You are now in the main content area

Digital Asset Manager (DAM)

Digital assets such as images and documents are stored in AEM's Digital Asset Manager, or DAM. 

image file

Adding images and files to the DAM

Every website has a DAM folder name that is the same as their website folder.  The interface is similar to the website site admin view.

The DAM can be accessed anywhere the camera icon is available.

Working with images and assets in the DAM

To create a folder, navigate to the DAM to the location of your DAM folder name.

  • Click on your folder (in the left pane) and select the location where you want your new folder.  
  • Click New> New Folder
  • In new window, add folder name
    • do not use spaces, or characters (*%&,?), separate words with hyphens or underscores
  • add a title
    • the order of title and name is reversed from how they appear when creating a web page; a title is not a required field
  • Click Create

How to create new DAM folders

DAM Folder Structure

We recommend that the DAM folder structure mirror the site content structure in the WCM (web content manager).  This provides a visual reference of where digital assets belong or are used on your website.

Responsive images should be high resolution. 

  • Images should be PNG or JPG
  • Do not use GIF files

 Minimum sizes (in pixels):

  • 800X600 (particularly for news, events and page grid displays)
  • 1200X900   

Slideshow options:

  • Homepage (full page width): 2000 by X
  • Content width: 1200 by X

 Please ensure that all images used in a slideshow are the same dimensions - same width and height.

When deciding on a height for slideshow images, choose a size that will not result in the slideshow being so large that it displaces critical content.

 Optimize the file size of all images!  Do not upload images in excess of 1 MB.  Ideally, images (even slideshow images) should ideally be less than 600-700KB.

  • Locate the appropriate subfolder to upload your digital asset.
  • In the right-hand pane, click New>New File.
  • Browse... to locate the file you want to upload from your computer.
  • Click Open once you have located and selected the appropriate file to upload.
  • Click Upload to add the file to the DAM.
    • If you don't see your file, click the refresh button from the menu bar to refresh the list of files
  • Digital assets will not be viewable on the live site until they are activated. To activate a file:
    • Click on an asset, then click Activate in horizontal toolbar
    • Right-click on the file and select Activate  

How to upload a new file

 Drag & Drop

Users can also drag and drop assets directly into their DAM folders.

Best practices

  • Rename files before uploading assets
  • Use only letters, numbers, hyphens (or underscores)
  • Do not use spaces in filename
  • Images should be a minimum of 1200X900 pixels if you are unsure of your page layout (see Image Specifications above)
  • Image file sizes should not exceed 600 KB
  • Optimize and crop images prior to upload
  • Acceptable file formats include:
    • PDF, Word, PPT, etc.
  • Files that should not be uploaded include:
    • Video files - please use Ryecast or YouTube
    • Executable files

When you open an asset (double click), you reveal its metadata information. We recommend adding a Title to your file that can serve as a default alternative text for screen readers.

You can also add a description, tags, copyright owner, as well as a litany of other information related to the file. You can also set a time for the asset to expire.

The References tab can provide you with a list of pages that are using a specific file.

After you make changes in this view, be sure to click Save at the bottom of the page

Asset metadata view

If you have an asset on the website that you need to update, we recommend that you create a new rendition of the file.  Not only will it update the asset across the website but it will save you time by not having to remove the old asset and fix broken links.

To create a new rendition, open the file in the DAM and go to the Renditions tab.   

Click Upload in the bottom right corner, then Browse...for the file you want to use to overwrite the current file.

Click OK

Do not change the rendition name.

After you have added the new file, save your changes and reactivate the asset.

To rename an asset in the DAM, select the asset and choose Move/Rename from the toolbar; or, right-click ont he file and select Move/Rename.

  • To change the location of a file, change the path in the Destination field to the folder where you want the asset moved. Click Move.
  • To rename a file, change the name in the Rename to field. Do not change the file extension. Click Move.
  • If the file is being moved to another folder and renamed - change both of the above fields. Click Move.

 

The process for adding documents, such as PDF or PPT files, is the same as uploading an image. Depending on the number of files you are uploading, and the size of those files, there may be a lag in the upload time.

Assets can be activated in multiple ways:

  • Choose an asset, right click and select activate
  • Click on an asset, and select activate from the horizontal toolbar
  • Choose multiple assets by holding down the control button and selecting the assets you want to activate, then right click and select activate or use the activate button in the toolbar
  • Activated items have green icons next to them, in the Published Column
  • Deactivated assets have a red icon.
  • Revisions have a blue icon.
  • Pending activations have an orange icon.

Deactivating Assets - follow the same process and select "Deactivate"

After you've uploaded your image or document file to the DAM, you add it to your web page in the following ways:

For document files:

  1. Open your page & any component with a text field
  2. Create a link 
  3. Set the path for the link to the document in the DAM

For image files:

  1. Drag & drop an Image component (or a Slideshow) onto your page
  2. To add the image to the component, use the content finder in the left to find your image and drag into onto the component
  3. Optional: Hyperlink the image to the image in the DAM

Editing images in Photoshop

When you add an image to your webpage make sure the file size isn’t too large. This will increase the pageload speed. Larger images= longer load time. At the same time, make sure that your file size isn’t too small as this will ruin the quality of your image. To do this you, save your images for the web in Photoshop.

  1. Open up your image in Photoshop.
  2. Click File > Save for Web…
  3. There are several different file formats you can save your image as – GIF, JPEG, PNG, etc.
  4. You’ll notice tabs that say Original, Optimized, 2-Up, and 4-Up. If you select 2-Up you can see a side-by-side comparison of the original image and the optimized version of your image.
  5. Select the type of quality you want your image to be. Try selecting Medium or High from the dropdown and choose the one you believe looks best without taking too long to load.  You can see the approximate load time below your image.
  6. Once you are happy with the quality and the load time of your image you can click Save. 
  7. A “Saved Optimized As” window will appear. Give your file a name and save it to your folder.

File formats

  1. Open up Photoshop.
  2. Click File > Open and search for your image.
  3. At the top click Image > Image size.
  4. A dialog box will appear with width and height fields.
  5. The best thing to do would be to change either the width or the height of the image while making sure the “chain-link” image is selected in between Width and Height. You’ll know it has been selected when you see lines connecting it to the Width and the Height.
  6. When you are happy with the size click “OK.”
  7. Save for the web.
  1. Open up Photoshop.
  2. Click File > Open and search for your image.
  3. Click on the Crop Tool in the left-hand side.
  4. Crop your image to a specific width and height click on the Crop Tool. 
  5. At the top you’ll see two fields for “Ratio.” Enter in the width and height in pixels and you’ll see that the crop tool box will adjust to match the size you entered. For example, you can crop your image to be 1200px by 900px.
  6. Click and drag the photo around if you want a different part of the image to be cropped.
  7. Hit Enter.
  8. Save for the web.

Crop tool

  1. Open up your image in Photoshop by clicking File > Open and search for your image.
  2. Click on the “Create new fill or adjustment layer” button.
  3. Select “Levels.”
  4. You’ll see a dropdown that says “Normal” by default. Click on it and select “Screen.”
  5. If you’re happy with your image save it for the web.
  6. If you would like to brighten your image even more click on the layer called “Levels 1” and drag and drop it to the “Create a new layer” button. You will see a new layer called “Levels Copy 1” which will make your photo even brighter.
  7. Save for the web.

 

Adjustment layer button

Levels

Screen