Image Viewer

Use the Image Viewer configurations to tailor toolbar options and other features to best showcase items in your collections.

Image Viewer configurations can be set at the global or collection level. Before changing configurations, confirm whether the Global Settings or Collections tab is selected.

Global settings are the default for your entire website. Collection settings affect only the selected collection. If no settings exist for a collection, then global settings are used. Any configurations set for a collection will override the global configurations.

Learn about:

 

Viewport

The viewport is the area of the image viewer where the image is displayed. If the image does not fill the entire viewport, a background displays.

You can configure this background to display a color or the CONTENTdm background.

To configure the viewport background

  1. From the Website Configuration Tool, click Image Viewer > Viewport. (Confirm selection of the Global Settings or Collections tab.)
  2. Specify the background that should display if the image does not fill the entire viewport area.
    • Select CONTENTdm Background to display a subtle CONTENTdm logo.
    • Select Solid Color to specify a color value.
      • Click the Background Color color block to use the color picker to choose or specify the color value. Click Done to close the color picker.
  3. Click Save Changes.
  4. Click Preview or Publish.

 

Toolbar

The toolbar displays at the top of the image viewer and enables the end user to manipulate the item view. For example, you can zoom and rotate an image.

The Website Configuration Tool enables you to show or hide these toolbar features, including:

  • Zooming — Slider and buttons that enable you to magnify or zoom out by a percentage of the image size
  • Full Browser — Button that enables you to view the image at the highest defined zoom level in which the full image fits in browser window and viewport, with the other website elements (metadata, navigation, search) hidden or minimized
  • Fit to Window — Button that enables you to view the image at the highest defined zoom level in which full image fits in defined viewport
  • Fit to Width — Button that enables you to view the image at the zoom level at which the image width fits exactly in the viewport
  • Image Rotation — Buttons that enable you to rotate the image 90 degrees  to the left and 90 degrees  to the right.

To show or hide a toolbar feature

  1. From the Website Configuration Tool, click Image Viewer > Toolbar. (Confirm selection of the Global Settings or Collections tab.)
  2. Check the checkbox for the feature to enable it (show). Uncheck the checkbox to disable it (hide).
  3. Click Save Changes.
  4. Click Preview or Publish.

 

Thumbnail Navigator

The Thumbnail Navigator displays in the upper-left corner of the image viewer. The thumbnail's outline and overlay color indicates which part of the full image is displayed.

The Website Configuration Tool enables you to show or hide the Thumbnail Navigator and to specify the color of the overlay.

To configure the Thumbnail Navigator

  1. From the Website Configuration Tool, click Image Viewer > Thumbnail Navigator. (Confirm selection of the Global Settings or Collections tab.)
  2. In the Enable Thumbnail Navigator box, select Show or Hide.
  3. In the Thumbnail Overlay Color box, click the color block to use the color picker to choose or specify the color value. Click Done to close the color picker.
  4. Click Save Changes.
  5. Click Preview or Publish.

 

Zoom

If zooming is enabled for the Toolbar, the Website Configuration Tool enables you to configure the percentage zoom level increments (when the user clicks the Zoom In and Zoom Out buttons or uses the slider on the Toolbar) and the initial viewport zoom level (how the item is displayed by default).

To configure the allowed zoom levels

  •  
    1. From the Website Configuration Tool, click Image Viewer > Zoom. (Confirm selection of the Global Settings or Collections tab.)
    2. Enter the zoom levels (in percentage of full size) The defined zoom level may not exceed 200.  
    3. Click Save Changes.
    4. Click Preview or Publish.

To configure the initial viewport zoom level

  1. From the Website Configuration Tool, click Image Viewer > Zoom. (Confirm selection of the Global Settings or Collections tab.)
  2. Set the Initial Viewport Zoom:
    • Select Fit to Window to view the image at the highest defined zoom level in which the full image fits in defined viewport.
    • Select Fit to Width to display the image at the zoom level at which the image width fits exactly in the viewport (this is the default).
    • Select Use Custom Initial Zoom Level and enter a percentage value in the text box to initially display at that zoom level.
  3. Note: The defined zoom level may not exceed 200.

  4. Click Save Changes.
  5. Click Preview or Publish.