Configuring the CONTENTdm Interface Tutorial Part I

Note: This tutorial is also available as a video or PDF file.

This tutorial will walk you through the configuration of the Sorensen Collection you developed during the Create Collection for CONTENTdm exercise. All of the files used during this tutorial are located under Sample Files. Upon completion of this tutorial, you will be able to meet all of the requirements for the Configure CONTENTdm Interface Exercise. This tutorial is based on the CONTENTdm tutorial offered by OCLC.

Section I     Getting Started

Determine Branding Requirements & Other Elements

Although for this exercise all of the following information will be provided, in general use it may be helpful to plan ahead for the following elements before you get started:

  • A title for your website (displays in the browser title bar and below the header on your Home page).
  • A website description statement (300 words recommended).
  • If you know you want to use a logo or other image as a header for your website (instead of just a text- or HTML-based header), it would be useful to create that ahead of time:
    • Logo images can be no larger than 76 x 76 pixels
    • The custom header is an image that you upload. Custom headers (.jpg, .png, or .gif) can be no larger than about 828 x 76 pixels and are used as-is.
  • Optional content for an About page.
  • Descriptions for the collection
  • A Contact Us e-mail address (the Contact Us link displays in the global, website footer).

IMPORTANT: While the Website Configuration Tool allows configuration of both the entire CONTENTdm website (Global Settings) and individual collections, for this class please limit your editing to the collections settings. If you edit the global settings you may alter the appearance of other students’ collections. For any configuration you make, always confirm you are applying the option with the Collection-level Settings tab selected:

Using the Website Configuration Tool

The Website Configuration Tool enables you to:

  • Globally brand and title the website, set a Contact Us link, and offer website and collection descriptions in three steps.
  • Globally or per collection (configurations set for a collection will override global configurations):
    • Refine page content, styles and behaviors
    • Refine item displays (including preventing words from being hyperlinked within metadata displays, display of full text)
    • Refine navigation and behavior of UI widgets and other features
  • Preview changes in your configurations before publishing.

Website configurations are stored in .css and config (XML) files that should only be edited using the Website Configuration Tool. The complexity of these files makes manual editing error-prone and, therefore, unsupported.

When you edit website configurations, you are working on a copy of your production style (.css) and configuration (.ini) files. The Website Configuration Tool makes a copy of the production settings files when it starts.

When you click the Save button, you are saving your changes to the working copy, not to production. (You can revert to the last published version of your website.)

When you click Preview, you are viewing your site using the working copy so you can verify your changes before pushing to production.

When you click Publish, you are copying from your preview settings to your production settings.

Caution: To manage changes and avoid simultaneous overwriting of configurations, only one person at a time should use the Website Configuration Tool in a group.

 

Accessing the Website Configuration Tool

  1. Navigate to the CONTENTdm Administration URL
  2. From the CONTENTdm Administration, click the Collections tab and then click Website. The Website Configuration Tool displays in a new window or tab.
  3. Log in using the same user name and password that you use when accessing the CONTENTdm Administration.

Configuration Options—Some Highlights

Quick Config* An optional way to set up some initial global configurations that help establish the site identity.
Appearance Use the Appearance configurations to tailor the look and feel of your website or collections by modifying the header, and setting fonts and colors to reflect your branding.
Search and Browse Use the Searching & Browsing options to configure the default search mode and advanced search scope, and to configure the results page display, default sorting and more.
UI Widgets Use the UI Widgets configurations to enable and define features that can help users explore and experience items in your collections. For example, create Suggested Topics, which guide end users in their research, and tailor the QuickView display, which helps users quickly scan items with some additional detail.
Image Viewer Use the Image Viewer configurations to tailor toolbar options and other features to best showcase items in your collections.
Navigation Use the Navigation configurations to edit or add to the header and footer navigation links.
Items Use the Items configurations to set various options that are available when end users view items in your collections. For example, manage user-generated content, enable and configure the Share and Reference URL features, choose whether to display the full text for items with transcripts, and configure metadata display settings.
Page Types Use the Page Types configurations to edit the contents and set representative item display options for key pages of your website, optionally replace key pages with custom pages, enable your site for RSS, and define the display of compound objects and PDF files.
Tools Use the Tools option to configure the localized version of your website interface text, including the default language, uploading a custom language file, and enabling users to select from multiple languages. You also can configure a CONTENTdm Log In/Out link on your website, and configure the credentials used by a custom form for end-user content submission.
Custom Use the Custom Pages/Scripts options to add additional pages to your website and use your own JavaScript scripts and CSS to modify the website behavior and appearance.

* For this class you should not see the Quick Config option. If you can, please do not use it as it will alter the settings for the entire class website.*

 

Section II Configuring the Interface

Create a Custom Header for Your Collection

  1. Click the Appearance link on the left hand side of the Website Configuration Tool.
  2. From the expanded menu, click Header.
  3. Select “Use a graphical header,” from the options and then Browse, to locate the new header (in the case of the exercise, use the file called header.png) and click Upload.

(Note: You can also change the background color of the header area by clicking on the color box and selecting a different color).

  1. Click Save Changes.
  2. Preview the new header by clicking Preview.
  3. If satisfied with the results, click Publish to finalize the change. If you are not satisfied, click Undo Saved Changes to revert back to the original.

Adjust the appearance of text throughout the collection

You can configure the appearance of text-based headings, links, and other text on the collection.

Note: Some browsers have problems displaying Unicode characters. If you experience this issue, set the Font-Family drop-down for all options to Arial Unicode MS to fix the issue.

Because the same styles are used in multiple ways for cohesiveness and design consistency, we recommend that after changing any of the default configurations, you review your site experience to make sure that your changes have the desired effect throughout the site.

Following are examples of the configurable text options.

Level 1 Heading

Used for key headings in the interface, such as:

  • Home page: Website name (displayed below the breadcrumbs [note: this is not the global header])
  • Collection landing page: Collection name (displayed below the breadcrumbs)
  • Item pages: Item title when viewing an item

Level 2 Heading

Used for key labels in the interface, such as:

  • Home page: Collection label text for “All Collections” list and “About Collections”
  • Item pages: Page title (displays below the item title)
  • Results page: Left navigation section headers (“Narrow your search by” and “Add or remove other collections to your search”)

Level 3 Heading

Used for prominent instructional text and labels in the interface, such as:

  • Item pages: Item title in the breadcrumbs. For compound objects, the item title is displayed in several ways using this heading level, including in the Thumbnails and Content navigation tabs.
  • Browse/Results page: Instructional text “Browsing items in:” or “You’ve searched”, as well as unclickable column headers (e.g., “Thumbnail”). The QuickView field labels also use this heading level (e.g., “Subject:” and “Description:”).

Directional Copy

Used for less-prominent instructional text in the interface, such as:

  • Browse/Results page: Number of results, no results search suggestions (“Your search retrieved no results…”), and Results page Display Options dialog box text
  • Item pages: Number of pages (e.g., x “of 195”) and the Reference URL dialog box instructional text (e.g., “To link to the entire object, paste this link…”). If the carousel is used for compound objects, the  number of pages and the object title use this text style.

Body Copy

Used for most of the unlinked text displayed on the website, such as:

  • Home page: Collection descriptions
  • Item pages: Metadata and user-generated content
  • Browse/Results pages: Metadata and QuickView metadata
  • About page: Body text (by default: “Describe your website for visitors to your site.”)

Body Links

Used for most of the links on the website, such as:

  • Home page: Collection names
  • Collection landing pages: Item titles
  • Item pages: Metadata links, tag links. For compound objects, the Thumbnail and Content tabs page title links also use this style.
  • Results page: Collection names in left navigation, results metadata, Narrow Your Search options metadata links (facets)

Action Links

Used for clickable interface elements, such as:

  • Home page: “Advanced Search” and “Back to Top” links
  • Collection landing pages: breadcrumb links, “RSS” link
  • Item pages: “View Description”, “View as …”, “Report Abuse”, and “Print this Item” links. For compound objects, the “Previous”, “Next” and “Text Search” links also use this style.
  • Browse/Results page: Sortable column header links and the “Display Options” link

To configure the appearance of text elements

  1. From the Website Configuration Tool, click Appearance > Text.
  2. Use the drop-down lists to change the properties you want to modify.
  3. Click the Color color block to use the color picker to choose or specify the color value.
  4. Click Done to close the color picker.
  5. Click Save Changes.
  6. Click Preview or Publish.

For this assignment please make the following alterations:

  1. Increase the font size of the level 1 headers to 20 px
  2. Change the level 3 header font to Helvetica
  3. Change all remaining uses of the Verdana font to Courier
  4. Change the visited color of body links to color code: #0db337

Select which fields are available in the Advanced Search function

  1. From the Website Configuration Tool, click Search & Browse > Search.
  2. Click More Search Configurations.
  3. In the Choose Advanced Search Fields box, select the specific fields to display in the Advanced Search pane. Select All Fieldsto make that option also available.
  4. Click Save Changes.
  5. Click Preview or Publish.

For this assignment please select four fields for the advanced search fields, and make one of the fields (not all fields) the default advanced search field.

Adjust the appearance of the search results page

Some organizations choose to change the default Results page display from grid to a more simplified thumbnail view, or to refine the metadata display on the grid view (the grid view enables you to select fields and order the metadata display).

  1. From the Website Configuration Tool, click Search & Browse > Results Pages. (Confirm selection of the Global Settings or Collection-level settings tab.)
  2. In the Choose a Layout box, for our example, select Thumbnail instead of the default Grid view.

Note: The grid view is the default and displays the fields chosen for display in the configuration labeled “Choose fields for display and order they appear in”. Thumbnail and collection title are also available for display.

Thumbnail view displays item thumbnails with item titles only (no additional metadata).

  1. Click Save Changes.
  2. Click Preview or Publish.

Select which facets users can apply to narrow their search results

About Facets

If enabled, facets display on Results pages in the far-left column as the Narrow Your Search By list. Facets enable users to narrow their results by the fields that you choose to display as facet options.

  • A maximum of five fields can be displayed in the Narrow Your Search By list.
  • Only searchable fields will display, if specified. Hidden fields will not display. (Note: If you are defining facets at the global level, and have collections with the same field set to hidden in one collection and searchable in another, then the field will be a facet option. Do not select the hidden field as a facet at the global level, if you want it to remain hidden for some collections.)
  • For searches across multiple collections, the Narrow Your Search By list displays Dublin Core names. For single-collection searches, the field names are displayed.

To configure facets for narrowing search results

  1. From the Website Configuration Tool, click Search & Browse > Results Pages.
  2. Click More Results Configurations.

  1. In the Enable Facets box, check the checkbox to enable facets to display in the far-left column of Results pages.
  2. Select up to five fields to include as facets. Click Remove Field to display fewer than five facets.
    1. For this assignment please select three facets to use.
  3. Click Save Changes.
  4. Click Preview or Publish.

Insert suggested topics on the collection home page

Suggested Topics are predefined queries that can guide end users in their research and help them discover materials in your digital collections. Suggested Topics display on the Home page, collection landing page, or Results pages.

Each Suggested Topic is a simple hyperlink that invokes a single, predefined query. To create a Suggested Topic that displays on the Home page, use the Website Configuration Tool global settings. To create a Suggested Topic that appears on the collection landing page, use the collection settings. Collection-level Suggested Topics will appear on the Results page of a single collection search. Global-level Suggested Topics will appear on the Results page of a cross-collection search.

To create a Suggested Topic

  1. Using Advanced Search, define your search, see the results, add a sort and, when the results are right, copy and save the RESTful URL that displays in the browser address bar on the Results page.
  2. Then from the Website Configuration Tool, click UI Widgets > Suggested Topics.
  3. Enable Suggested Topics.
  4. Click Add Suggested Topic.
  5. Enter a name for the predefined query.
  6. Paste the saved URL into the Link text box.
  7. Click Save Changes.
  8. Click Preview or Publish.

For this assignment, please create three suggested topics: Leeds Music Corporation; Musical; and 1946.

Enable and customize QuickView

The QuickView displays a larger thumbnail image and more item information when the pointer pauses over a thumbnail or title on the Results or collection landing pages.

For this assignment please make the following customizations:

  1. Enable QuickView on both landing pages and result pages
  2. Display the collection name
  3. Use the Composer field in the QuickView title bar
  4. Order the metadata as follows: Title, Date, Publisher
  5. Change the collection bar font-size to 12 px

To choose whether QuickView displays on collection landing pages

  1. From the Website Configuration Tool, click UI Widgets > QuickView.
  2. Check the checkbox to Enable QuickView for Landing Page(s).
  3. Click Save Changes.
  4. Click Preview or Publish.

To choose whether QuickView displays on Results pages

  1. From the Website Configuration Tool, click UI Widgets > QuickView.
  2. Check the checkbox to Enable QuickView for Results Pages.
  3. Click Save Changes.
  4. Click Preview or Publish.

To configure whether the collection name displays

  1. From the Website Configuration Tool, click UI Widgets > QuickView.
  2. In the Display Collection Name in QuickView box:
    • Select Yes to include the collection name.
    • Select No to hide the collection name.
  3. Click Save Changes.
  4. Click Preview or Publish.

To select the field to use in the QuickView title bar

  1. From the Website Configuration Tool, click UI Widgets > QuickView.
  2. In the Choose field for display in QuickView title bar box, select the field to display at the top of the QuickView.
  3. Click Save Changes.
  4. Click Preview or Publish.

To select and order the metadata fields displayed

  1. From the Website Configuration Tool, click UI Widgets > QuickView.
  2. In the Choose fields for display and order they appear in box, select the three fields to display. (Field 1 is displayed first [after the title bar, and any optional collection name], field 2 is displayed next, and so on.)
  3. Click Save Changes.
  4. Click Preview or Publish.

To configure the QuickView background color

  1. From the Website Configuration Tool, click UI Widgets > QuickView.
  2. Click More QuickView Configurations.
  3. In the QuickView Background 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.

To configure the QuickView border color

  1. From the Website Configuration Tool, click UI Widgets > QuickView.
  2. Click More QuickView Configurations.
  3. In the QuickView Border Color box, click the color block to use the color picker to choose or specify the color value. Click Doneto close the color picker.
  4. Click Save Changes.
  5. Click Preview or Publish.

To configure the QuickView collection bar background color

  1. From the Website Configuration Tool, click UI Widgets > QuickView.
  2. Click More QuickView Configurations.
  3. In the Collection Bar Background 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.

Note: The title bar background color displays with the collection name.

  1. Click Save Changes.
  2. Click Preview or Publish.

To configure the collection bar font size

  1. From the Website Configuration Tool, click UI Widgets > QuickView.
  2. Click More QuickView Configurations.
  3. In the Collection Bar Font Size box, select the font size.
  1. Click Save Changes.
  2. Click Preview or Publish.

Customize the Image Viewer

For this assignment, please make the following customizations:

  1. Change the viewport background color to black
  2. Disable the full browser option on the Image Viewer Toolbar
  3. Change the available zoom levels to: 25, 50, 75, 100, 125, 150, 175, 200
  4. Make the initial viewport zoom level fit to window

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.
  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.
  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.
  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.
  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.
  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. Click Save Changes.
  4. Click Preview or Publish.

Summary | Software & Tutorials | Sample Collections | Exercises | Resources & Best Practices

i