Silver School of Social Work, New York University Skip to Content Skip to Search Skip to Navigation Skip to Sub Navigation

Silver Image

Description

The Silver Image component is used to place a standalone image within a page. This is essentially an extension of Adobe CQ’s out-of-the-box image component extended to provide the following additional features:

  • Allow only pre-existing DAM images; disable the ability to upload a new image
  • Mandatory "alt" text (to meet Section 508 web accessibility standards)
  • Option to make the image a link and optionally open that link in a new window
  • Customizable fixed-width size selection rather than manually specifying pixel dimensions
  • Option to align ("float") an image to the left, center, or right

Parameters Input By Author

  • Image tab
    • Drag and drop image from DAM
    • Image manipulation elements (Map, Crop, Rotate)
  • Image properties tab
    • Title
      • Text displayed upon mouse-over
    • Alt Text
      • Text available for screen-readers, etc.
    • Caption
      • Text displayed under image
    • Width
      • Original
      • Thumbnail (162px)
      • Small (354px)
      • Medium (546px)
      • Large (738px)
      • Extra-large (930px)
    • CSS style
      • CSS custom definition (e.g. “margin:1em;")
    • CSS class
      • Predefined CSS class
    • Alignment
      • None
      • Left
      • Right
  • Navigation tab
    • Link
      • Hyperlink, if applicable, to another web page
    • Open link in new window (checkbox)

Usage

  1. Drag Silver Image component onto page.
  2. Look up your image by file name or in the navigation on the left side and drag it into the Image tab.
  3. In the Image Properties tab, fill in the title, alt-text, caption if desired, width, CSS if desired, and alignment.
  4. If you wish to make the image a hyperlink, enter the link in the Navigation tab.
  5. Click on OK.

Notes

  1. Crop and rotate are only applied to images in their “Original” size, however, the author can force resize a manipulated image by specifying a width and/or height in the dialog.
  2. Images are designed to expand to either their full width (e.g. Medium 546px) or the width of their container (e.g. a column). This means that images that are bigger than their container will shrink to fit, but they will never expand beyond the specified size of the image.
  3. If the image size specified is bigger than the original image, the image may appear pixelated.
  4. Captions for images should expand to the width of the image. However, there are cases where this will fail: if the image is too small to accommodate a caption (e.g. a thumbnail); if the actual image size is too small (e.g. the image in the DAM is 200px wide but it is placed in a wide column).
  5. By default a 20px margin will be added to the bottom of each image. To cancel this, type in “margin-bottom:0;” in the CSS style for the image.


Screen Shots

Configuration dialog tabs

 
Image tab Image Properties tab

   

Navigation tab