New York University Skip to Content Skip to Search Skip to Navigation Skip to Sub Navigation

Image

The Image component allows users to place images within the context of a page. Images are often worked into other components, but this component is used to place a stand-alone image within a page.

When to use it?

The image component is the primary tool to add images to your pages. Images may be used to break up text content to add visual interest to the page.

Where to use it?

The image component may be used in any column container in any position on a CMS-driven page. Images should be appropriate to the page topic.

How to use it?

1. Navigate to and open the desired page.

2. Add a component.

3. Double-click on the image icon and an edit window will open with the following options:

  • Title - Include a title with your image.
  • Alt Text - Specify text that is to be rendered when the image to which it is applied cannot be rendered.
  • Description - Add descriptive text about the chosen image, including captions and photo credits.
  • Link - Hyperlink the image to a related webpage
  • Width - Choose the column width for the image from a dropdown menu.
  • Alignment - Choose the alignment for the image.

  • Uses Images Path Checkbox - Check this box if the image will be drawn from a directory of multiple images that will rotate when the page is refreshed. See our tutorial on creating a rotating image sequence for more information.
  • Images Path - Select directory from which images will be pulled.

  • Map - Link the image by creating an image map.
  • Crop - Crop the image.
  • Rotate - Rotate the image clockwise or counterclockwise.
  • Clear - Remove image from component.

Note: Images must first be added to the Digital Asset Management (DAM) system and activated to be used.

4. Drag and drop an image from the Asset Finder (on the left-hand side) into the component area.

Note: The Asset Finder only displays up to 30 assets at a time.  To find a specific image, refer to the Locating an Image in the DAM instructions below.

5. Double-click on the image and you can edit the basic information about the image; in the Advanced tab, specify a title (if applicable), alternative text (required), a description, the column size width, and the image alignment.

6. Click the OK button to finish and to verify that the image has been added to the page.

7. Click the magnifying glass icon in the Sidekick to open the page in Preview mode to ensure that all additions are as expected from the end-user's perspective.


Add Images to the DAM

Before an image may be used in a page, it must be added to the Digital Asset Manager (DAM).  Content approvers and Content authors may both load images into the DAM, but only Content approvers may activate the uploaded assets.

Note: Images must be activated before they may be used.

To upload an image to the DAM, do the following:

Helpful File Naming Tips

  • Name your content prior to uploading it to the DAM
  • Use only letters, numbers, hyphens (-), or underscores (_)
  • Do not use any other punctuation marks in content or folder names
  • Do not use spaces in the file name
  1. In the Authoring Environment, click the "Digital Assets" button (the "camera" icon) next to the Site Admin (globe) icon. You'll now be placed into the DAM Admin environment.
  2. On the left-hand side, you'll see the familiar "tree" navigation. Digital assets are organized by administrative unit and housed within folders. Click through the tree to find your unit's folder.
  3. Click inside your unit's folder to find the image sub-folder.
  4. In the menu above the right-hand side Details window, click the New button. Choose "New File..." to upload your image.
  5. Click the Browse button to find the image on your local machine. 
  6. Click the OK button to add the image to the DAM.
  7. Refresh the asset list to ensure that the new item has been added.
  8. If you are a Content approver, highlight the new item in the asset list and click the Activate button to activate the image. 

    Note:
    Your image cannot be used until you activate it.

    When you return to Edit mode, you will now see a thumbnail of the new asset in the left-hand side DAM Asset Tray.
Component Tutorial: DAM Images

Once you're in the DAM environment, you will be able to navigate to your unit's directory and upload images.


Locate an Image in the DAM

With so many assets in the DAM, finding a specific image can be difficult. You can search for images by their path in the Asset Finder.

  1. In the search bar, type: "path:/content/dam/nyu/".
  2. After that last "/" the system will start looking for folders within the DAM. Select or type in the target folder.


Edit Image Metadata

After an asset is uploaded to the DAM, additional information about the asset called metadata may be edited or added to increase the asset's searchability.

  1. Double-click or right click on the image file and select Open
  2. Edit the appropriate fields in the asset editor
  3. Click the Save at the bottom of the form

In the Asset Editor you will also see any sub-assets and renditions of the selected asset.

thumbnails in the DAM

Once an image is uploaded to the DAM, a thumbnail preview is automatically generated. Double-click on the asset to Open it.


Look for University Stock Images

All CMS users have access to the Shared DAM folder, where University images are licensed for web use only. Search in the asset finder to the left by the following tags:

  • athletics (or by sport type ex. basketball, soccer, etc.)
  • students
  • activities
  • global (by location)
  • faculty
  • nyuBuildings
  • nyc
  • stock

Delete an Image from an Image Component

When speaking about deleting an image, an author could be discussing one of two things: first, removing an image component from the page and second, removing a specific image from a specific image component.

If you're looking to remove an image from a specific component, do the following:

  1. Navigate to and open the desired page that contains the existing image you wish to delete.
  2. Open the image component by right clicking and selecting edit or double clicking the component.
  3. Click on the Image tab.
  4. Click the Clear button. This will erase the image, but keep the component in its current location ready to be filled with other images.  If you leave the component empty, however, it will leave blank space on your published page.
  5. Click OK to save your changes.

Clear Image Example

Component Tutorial: Image Component

To delete an image from the Image component click the Clear button in the bottom toolbar.

Component Tutorials

Still need help?

To report an issue with this component, please contact the IT Service Desk:


Add Examples

Required Fields

Alignment in the Image Component is used in conjunction with the Rich Text Component for text wrapping. For this functionality, choose Left or Right alignment.

Image Component

Drag and drop an image from the Asset Finder into the Image component under the Image tab.


Image Known Bugs

No known bugs at this time.

Updated January 2013

NYU Footer