Skip to main content
OCLC Support

Configure your responsive CONTENTdm Website

Overview

About configuring your responsive website

Just like in the Version 6.x Website Configuration Tool, the Responsive Website Configuration Tool allows you to configure your Responsive Website at either a global or collection level. Global settings are the default for your entire Responsive Website. Collection settings affect only one collection. If no settings exist for a collection, then global settings are used. Any configurations set for a collection will override the global configurations.

Configurations made via the Responsive Configuration Tool only affect the Responsive Website. All customizations will persist through future updates.

Best practices

The user experience for your Responsive CONTENTdm Website was developed using extensive usability and accessibility testing and is designed to work on screens of all sizes. Before you invest in modifications or extensive configurations, we recommend that you evaluate their priority and requirement, consider their usability on screens of all sizes, and assess their conformance with the WCAG AA 2.0 accessibility standard.

If you were previously using the 6.x Website, you have the option to make the Responsive Website your main website by redirecting all URLs at https://Your_CONTENTdm_Website_URL/* to https://Your_CONTENTdm_Website_URL/digital. To make this switch, contact OCLC Support.

Getting Started

Access and review your Responsive Website

The first step to configuring your Responsive Website is to review what your existing collections look like by default without any configuration by going to your Responsive CONTENTdm Website URL – which is your CONTENTdm Website URL followed by /digital.

https://Your_CONTENTdm_Website_URL/digital

Keep the Responsive Website open in a separate browser window or tab so you can easily view and compare as you work.

Use the Responsive Website Configuration Tool

The Responsive Website Configuration Tool enables you to:

  • Globally brand and title the Responsive Website and offer website and collection descriptions.
  • Globally or per collection:
  • Refine page content, styles and behaviors
  • Refine navigation and behavior of UI features
  • Preview changes in your configurations before publishing.

When you click the Save button, you are saving your changes to a working copy, not to production.

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

Caution: To manage changes and avoid simultaneous overwriting of configurations, we recommend that only one person at a time use the Website Configuration Tool, both for Version 6.x and for Responsive.

Access the Responsive Website Configuration Tool

  1. Navigate to https://Your_CONTENTdm_Website_URL/config OR:
  2. Navigate to your CONTENTdm Administration, click the Server or Collections tab, and then click Website. The Website Configuration Tool displays in a new window or tab.
  3. Ensure that your user account has been granted rights to the Website Configuration Tool in CONTENTdm Administration.
  4. Log in using the same user name and password that you use when accessing CONTENTdm Administration.
  5. Note that the Website Configuration Tool has two options: 6.x Website and Responsive. The 6.x Website option allows you to customize your existing CONTENTdm Website at https://Your_CONTENTdm_Website_URL. The Responsive option allows you to customize your new Responsive Website at https://Your_CONTENTdm_Website_URL/digital. This document refers to the Responsive Website Configuration Tool. For any configuration you make to the Responsive Website, always confirm you are applying the Responsive option.

Configuration options

Remember: You configure your Responsive Website at either a global or collection level. Global settings are the default for your entire Responsive Website. Collection settings affect only one collection. For many settings, an “Override global settings for this collection” button is available. If this option is selected, the configurations set for that collection will override the global configurations. Within the Responsive Website Configuration Tool, you will see two tabs. For any configuration you make, always confirm you are applying the option with the correct tab selection.

The Responsive Website Configuration Tool has the following top-level menu options:

Appearance
Use the Appearance configurations to tailor the look and feel of your Responsive Website or collections by modifying the header , and setting fonts and colors to reflect your branding.
Search and browse
Use the Search & Browse options to configure the results page display, facets, advanced search options, and more.
Navigation
Use the Navigation configurations to edit or add to the navigation links in the menu .
Items Use the Items configurations to set various options that are available when end users view items in your collections. For example, you can choose whether to enable or disable the IIIF Image API .
Page types
Use the Page Types configurations to edit the contents and set display options for key pages of your Responsive Website such as the Home Page and the About Page.
Localization
Use the Localization option to configure the localized version of your Responsive Website interface text, including the default language, uploading a custom language file, and enabling users to select from multiple languages.
Analytics & SEO
Use the Analytics & SEO option to configure Google Analytics, Google Site Verification, and Sitemaps.

Configurations

This section steps through how to set the Responsive Website configurations in the order in which they appear in the Responsive Website Configuration Tool. You will want to consider your own website’s audience and content types to determine which of the configurations are needed for your website, and which default settings need no modification.

CONTENTdm makes use of the industry standard TMX format for localization files. Using a TMX editor, you can add additional languages, edit the default text, and edit text strings in multiple languages. Always remember to make a backup copy of the original TMX file before changing and uploading a new file.

Edit the favicon
  1. From the Responsive Website Configuration Tool, select Appearance > Favicon. The favicon can only be edited at the global level.
  2. If you uploaded a favicon to your 6.x Website, that favicon will be carried over to your new Responsive Website.
  3. Click Browse to upload a new Favicon. To see the new Favicon in your browser, you will need to clear your cache by loading https://Your_CONTENTdm_Website_URL/digital/favicon.ico, and then press Shift+F5 on your keyboard. The uploaded favicon must be smaller than 100 mb.
  4. Click Save Changes.
  5. Click Preview or Publish.
Edit the header
  1. From the Responsive Website Configuration Tool, select Appearance > Header. The header can be edited at both the global and the collection level. If you choose to create a collection-level header, ensure that you are viewing the Collection-level Settings tab and that you have selected the desired collection.
  2. In the Header text box, edit the text. This text appears in the header on desktop and tablet sized screens. The header text from your 6.x Website will be carried over to your new Responsive Website.
  3. To add a logo to your header, check Use an optional logo and upload an image. If you uploaded a logo to your 6.x Website, that logo will be carried over to your new Responsive Website. (Note that graphical headers and totally custom headers will not be carried over from your 6.x Website to your Responsive Website).
  4. If you choose to display a logo, the header text will not appear on mobile sized screens.
  5. If you do not want the header text to appear on any screens, you can select Hide header text on desktop and tablet screens. You may wish to do this if your logo has sufficient information to describe your website to your users and you do not wish to display additional text.
  6. You can also change the background color, text color, and icon color in the header from this menu.
  7. Click Save Changes.
  8. Click Preview or Publish.
Edit the text
  1. From the Website Configuration Tool, select Appearance > Text. The text can be edited at both the global and the collection level. If you choose to create collection-level text configurations, ensure that you are viewing the Collection-level Settings tab and that you have selected the desired collection.
  2. The following types of text can be configured:
    • Level 1 Headers, including the collection title on the Collection Landing Page and the item title on the Item Page
    • Level 2 Headers, including the collection title(s) on the Home Page and the item title(s) on the Search Results Page
    • Level 3 Headers, including the search result count and collection indicator on the Search Results Page
    • Body Copy, including the metadata on the Item and Search Results Pages and the collection description(s) on the Home Page
    • Body Links, including the languages in the footer and any HTML links you add via customizations
  3. Text can be customized in the following ways:
    • Font-Family
    • Font-Size
    • Font-Weight
    • Color
    • Font-Style
    • Text-Decoration
    • For links: Hover color, Hover Text-Decoration, and Visited Color
  4. Click Save Changes.
  5. Click Preview or Publish.
Edit the buttons
  1. From the Website Configuration Tool, select Appearance > Buttons. The buttons can be edited at both the global and the collection level. If you choose to create collection-level button configurations, ensure that you are viewing the Collection-level Settings tab and that you have selected the desired collection.
  2. Examples of buttons on the Responsive Website include the Browse button on the Collection Landing Page and the Show/Hide Metadata button on the item page.
  3. Note that the buttons in the header conform to the configurations set in the Header > Icon Color menu, not to the Button configurations. 
  4. Buttons can be customized in the following ways:
    • Background Color
    • Text Color
    • Font-Family
    • Font-Size
    • Font-Weight
    • Background Hover Color
    • Text Hover Color
  5. Click Save Changes.
  6. Click Preview or Publish.
Edit the results configurations
  1. From the Responsive Website Configuration Tool, select Search & Browse > Results. The Results configurations can be edited at both the global and the collection level. If you choose to create collection-level button configurations, ensure that you are viewing the Collection-level Settings tab and that you have selected the desired collection.
  2. To choose which metadata fields appear in the search results, use the Choose fields for display and order they appear in menu. You can choose four total fields for display. At the global level , the available fields will represent the Dublin Core mappings . At the collection level, the available fields will be all of the fields in your collection. Note that the first field chosen will appear as a Level 2 Header. In most cases, it is recommended that you choose the Title as the first field. The fields chosen from this menu will also become the fields that are available for search results sorting, with the addition of Relevance.
  3. Uncheck Enable thumbnails in search results if you do not wish to have item thumbnails appear in the list of search results. Thumbnails are enabled by default.
  4. Choose an option from the Default Sort Order (Search Results) configuration to determine how search results in your Website should be sorted by default.
  5. Choose an option from the Default Sort Order (Browse All) configuration to determine how browse results in your Website should be sorted by default.
  6. Click Save Changes.
  7. Click Preview or Publish.
Edit the facet configurations
  1. From the Responsive Website Configuration Tool  select Search & Browse > Facets. The Facets configurations can be edited at both the global and the collection level. If you choose to create collection-level facet configurations, ensure that you are viewing the Collection-level Settings tab and that you have selected the desired collection.
  2. To disable facets, uncheck the Enable facets checkbox.
  3. To choose which metadata fields are available as facets, use the Search facets drop-down. You can choose five total fields for facets. At the global level, the available fields will represent the Dublin Core mappings. At the collection level, the available fields will be all of the fields in your collection.
  4. Click Save Changes.
  5. Click Preview or Publish.
Edit the advanced search configurations
  1. From the Responsive Website Configuration Tool, select Search & Browse > Advanced Search. The advanced search configurations can be edited at both the global and the collection level. If you choose to create collection-level advanced search configurations, ensure that you are viewing the Collection-level Settings tab and that you have selected the desired collection.
  2. To choose which metadata fields are available to search via Advanced Search, use the Choose advanced search fields checkboxes. You can choose as many advanced search fields as you’d like. At the global level, the available fields will represent the Dublin Core mappings. At the collection level, the available fields will be all of the fields in your collection.
  3. To disable date search, uncheck the Enable date search checkbox.
  4. Click Save Changes.
  5. Click Preview or Publish.
Edit the navigation
  1. From the Responsive Website Configuration Tool, select Navigation > Menu. The Menu configurations can only be edited at the global level.
  2. To include a Home link in your navigation menu, ensure that Include Home in Navigation is checked. This configuration is enabled by default . You can choose to rename the Home link label. Regardless of the label, the link will resolve to https://Your_CONTENTdm_Website_URL/digital.
  3. To include a Browse link in your navigation menu, ensure that Include Browse in Navigation is checked. This configuration is enabled by default. You can choose to rename the Browse link label. Regardless of the label, the link will resolve to a browse of either all items in your repository, or all items in a given collection, depending on the user’s context.
  4. To include an About link in your navigation menu, ensure that Include About in Navigation is checked. This configuration is enabled by default. You can choose to rename the About link label. Regardless of the label, the link will resolve to your About page.
  5. To add additional links to your navigation menu, add their labels and URLs to the Navigation Labels & URLs section.
  6. Click Save Changes.
  7. Click Preview or Publish.
Configure download
If enabled, the Download feature displays a Download button above the viewport when viewing an item. End users can then click to select a size to download (for images), and then a File Download prompt displays. (If enabled, the Download button never displays for metadata - only items.)
  1. From the Responsive Website Configuration Tool, select Items > Download. The download configurations can be edited at both the global and the collection level. If you choose to configure download at the collection level, ensure that you are viewing the Collection-level Settings tab and that you have selected the desired collection.
  2. To disable print, uncheck the Enable Download button checkbox.
  3. To configure the size options that are made available for image download, check or uncheck the Small Image, Medium Image, Large Image, Extra Large Image, Full Size Image, and/or Archival Image options. You can also choose to customize the labels that appear in the user interface for each of these options.
  4. Click Save Changes.
  5. Click Preview or Publish.
Configure the IIIF image API
  1. From the Responsive Website Configuration Tool, select Items > Images. The IIIF configurations can only be edited at the global level.
  2. he IIIF Image API is enabled by default. To disable the IIIF Image API for your repository, uncheck Enable IIIF Image API.
  3. Click Save Changes.
  4. Click Preview or Publish.
Configure hyperlinks in metadata
If enabled, the Hyperlinks feature displays a clickable hyperlink on the item page for metadata terms in a controlled vocabulary. End users can then click those hyperlinks to bring up all search results for that term in the current collection. Note that this feature does not have any impact on hyperlinks that are added manually to metadata fields. Those hyperlinks will always display, regardless of the configurations set in this menu.
  1. From the Responsive Website Configuration Tool , select Items > Hyperlinks. The hyperlinks configurations can be edited at both the global and the collection level. If you choose to configure hyperlinks at the collection level, ensure that you are viewing the Collection-level Settings tab and that you have selected the desired collection.
  2. To disable hyperlinks in the metadata, choose the Disable for all fields radio button. To enable hyperlinks in metadata, choose Enable for fields with controlled vocabulary. It is not possible to enable hyperlinks in metadata for fields without a controlled vocabulary.
  3. Click Save Changes.
  4. Click Preview or Publish.
Configure sharing
If enabled, the Share feature displays on the right hand side of the item (larger screens) or above the item (smaller screens) when viewing an item. End users can then click to share the item using popular platforms, such as e-mail, Facebook and Twitter. A compact view of sharing options displays in your website, and an expanded view of sharing options displays when the end user clicks the More (+) link in the compact view. You can configure which sharing options display in both views. The Share feature uses AddThis, a free bookmarking and sharing service. To use this service, you need to create an AddThis account, and then provide your AddThis ID in the Website Configuration Tool.
  1. From the Responsive Website Configuration Tool, select Items > Share. The share configurations can be edited at both the global and the collection level. If you choose to configure sharing at the collection level, ensure that you are viewing the Collection-level Settings tab and that you have selected the desired collection.
  2. In the Enable share options box, select Enable AddThis Functionality.
  3. Go to the AddThis site, and then sign in your account.
  4. Create an inline sharing button. Any other button type may not behave properly in the Responsive Website.
  5. Choose any button options you prefer for the inline sharing button.
  6. Click the ellipses (...) in the top menu.
  7. In the Profile Options menu, click General.
  8. Copy the ID. It will look like similar to: ra - 54b44fac084bc873.
  9. In the AddThis ID box in the Website Configuration Tool, paste the src attribute you just copied.
  10. Click Save Changes.
  11. Click Preview or Publish.
Edit the homepage
  1. From the Responsive Website Configuration Tool, click Page Types > Home Page. The homepage configuration is only available at the global level.
  2. In the Site Title box, edit the text. The Site Title in your 6.x Website will be carried over to your new Responsive Website. The title displays in the browser title bar.
  3. If you do not want the list of collections in your repository to appear, uncheck Display Collection List on Homepage. This list is enabled by default.
  4. In the Homepage text box, enter and edit content. The Homepage text in your 6.x Website will be carried over to your new Responsive Website. The contents may optionally include HTML. Note that you can insert images and links and specify fonts and background color using the editor. If you have HTML code you created using another editor that you want to paste into this editor , or if you want to edit in the code view , click the HTML button.
  5. If you wish to display a splash image on the home page, choose Upload a custom image in the Image preferences for this site’s homepage section. Click Browse to upload an image.
  6. For accessibility, we recommend that you add alt text for the custom splash image using the Custom alt text for the home page image box.
  7. Click Save Changes.
  8. Click Preview or Publish.
Edit the About page
The About page refers to the main About page for your Responsive Website. It can describe your organization and website, and is linked to, by default, in the navigation menu.
  1. From the Responsive Website Configuration Tool, click Page Types > About Page. The About page configuration is only available at the global level.
  2. In the About Page Title box, edit the text. The About page title in your 6.x Website will be carried over to your new Responsive Website. The title displays in the browser title bar and below the header on your About page.
  3. In the About Page Contents box, enter and edit content. The About page text in your 6.x Website will be carried over to your new Responsive Website. The contents may optionally include HTML. Note that you can insert images and links, specify fonts and background color using the editor. If you have HTML code you created using another editor that you want to paste into this editor, or if you want to edit in the code view, click the HTML button.
  4. Click Save Changes.
  5. Click Preview or Publish.
Edit the collection landing page
  1. From the Responsive Website Configuration Tool, click Page Types > Landing Pages. Confirm selection of the Collections tab.
  2. Select the collection from the Editing Collection drop-down list.
  3. In the Collection Landing Page Title box, edit the text. The Collection Landing page title in your 6.x Website will be carried over to your new Responsive Website. The title displays in the browser title bar and below the header on your Collection Landing page.
  4. In the Collection Title on Home Page box, edit the text. By default, the Collection Title on Home Page duplicates the Collection Landing Page Title. This title displays in collection card that describes this collection on the homepage, if the Collection List on Home Page is enabled. You may want to create a shorter title for display on the Home Page that fits well on mobile sized screens.
  5. In the Collection Landing Page Text box, enter and edit content. The Collection Landing page text in your 6.x Website will be carried over to your new Responsive Website. The contents may optionally include HTML. Note that you can insert images and links, specify fonts and background color using the editor. If you have HTML code you created using another editor that you want to paste into this editor, or if you want to edit in the code view, click the HTML button.
  6. In the Collection Summary on Home Page box, enter and edit content. By default, the Collection Summary on Home Page duplicates the Collection Landing Page Text. The contents may optionally include HTML. Note that you can insert images and links, specify fonts and background color using the editor. If you have HTML code you created using another editor that you want to paste into this editor, or if you want to edit in the code view, click the HTML button. You may want to create a shorter summary for display on the Home Page that fits well on mobile sized screens.
  7. If you wish to display a splash image on the Collection Landing page, choose Upload a custom image in the Image preferences for this collection’s landing page section. Click Browse to upload an image.
    • For accessibility , we recommend that you add alt text for the custom splash image using the Custom alt text for landing page image box.
  8. By default , a random thumbnail from the collection will appear for this collection on the home page. If you wish to upload a custom thumbnail, choose Image preferences for this collection on the home page, and select Upload a custom image, and then click Browse.
  9. By default, a Browse button appears on the Collection Landing page. The Browse button allows the users to browse all items in the collection. To customize the text of the Browse button, edit the text in the Browse button text box. To remove this button from the Collection Landing page, uncheck Enable browse button.
  10. Suggested Topics in the Responsive Website are enabled by default. Suggested Topics are predefined queries that can guide end users in their research and help them discover materials in your digital collections. To add suggested topics to the collection landing page, click add suggested topic, and add the Link Label and URL for that topic.
  11. Click Save Changes.
  12. Click Preview or Publish.
Configure the localization options
CONTENTdm provides features to localize and customize the text used for website navigation, interface element labels, site and collection descriptions, and messages like confirmations and errors.

Using the Localization options, you can:

  • Offer the CONTENTdm Website interface text in multiple languages by enabling and configuring a language list in the footer
  • Set the default language
  • Download the website interface language file and upload a custom language file with your custom text

OCLC provides translations for the following languages. These translations are included in CONTENTdm installation.

Language Language code
Catalan ca
Chinese – Simplified zh_CN
Chinese – Traditional zh_TW
Dutch nl
English en_US
French fr
German de
Japanese ja
Korean kr
Spanish es
Thai th

To set language options

  1. From the Website Configuration Tool, click Localization > Language. Confirm selection of the Global Settings or Collections tab.
  2. Check the Enable users to select language of website interface text to show the available languages in the footer. This is selected by default. Uncheck the checkbox to hide the language selection drop-down and just display the website interface text in the defined default language.
  3. In the Available Website Interface Languages box, select the languages.
  4. Confirm selection of the Default Website Interface Language. This is the language that is displayed unless the user changes the language using footer. Note: If the end user selects a language from the footer, the Website will remember that language selection in a cookie.
  5. Click Save Changes.
  6. Click Preview or Publish.

To download the website interface language file for editing

CONTENTdm makes use of the industry standard TMX format for localization files. Using a TMX editor, you can add additional languages, edit the default text, and edit text strings in multiple languages. Always remember to make a backup copy of the original TMX file before changing and uploading a new file.

You can edit most of the interface text at the global and collection levels by downloading editing the ap propriate XML files:

  • Global interface text strings are found in cdm_language.xml on the Global Settings tab.
  • Global Website Configuration Tool strings are found in cdm_language_configs.xml on the Global Settings tab.
  • Collection Website Configuration Tool strings are found in cdm_language_coll_ {collection alias}.xml on the Collections tab.
  1. From the Website Configuration Tool, click Localization > Language. Confirm selection of the Global Settings or Collections tab.
  2. Click Download the current website interface language file.
  3. Save the cdm_language.xml file for review and editing using a TMX editor.

Note: The downloaded file is the version currently displaying on your website. If you have customized this file and want to revert to the released version, you can contact support at OCLC Support and follow the instructions for uploading below

To edit a custom website interface language file

Any XML editor can be used to edit the TMX files. A TMX-specific editor is less error-prone and provides editing features particularly useful for localization.

Important Note: TMX editors will allow you to delete keys, but we do not advise doing so with CONTENTdm's TMX files. Unused keys and language codes will be ignored by the CONTENTdm Website and the empty keys should be left in the TMX files to ensure future compatibility.

Important Note: The cdm_language.xml file must be UTF-8 encoded.

To upload a custom website interface language file

After you edit the cdm_language.xml file, upload your file using the Website Configuration Tool.

  1. From the Website Configuration Tool, click Localization > Language. Confirm selection of the Global Settings or Collections tab.
  2. In the Upload a custom website interface language file box, click Browse to locate the edited language file.
  3. After choosing the TMX or XML file to upload, click Upload.
  4. Click Save Changes.
  5. Click Preview or Publish.
  6. Remember to proof the changes on the website to make sure the translations or customizations are appropriate.
Configuring Google Analytics
For information on how to configure and use Google Analytics, see Google Analytics in CONTENTdm.
Enable Google Webmaster Tools site verification
  1. From the Website Configuration Tool, click Analytics & SEO > SEO. Confirm selection of the Global Settings tab.
  2. Check the Enable Google Site Verification box.
  3. Enter your Google site verification ID. This creates a meta tag that Google uses to verify ownership of your site. Note: the site verification ID is the value of the content attribute of the meta tag that Webmaster Tools provides; do not enter the entire meta tag.
  4. Click Save.
  5. Click Publish.
More information on Google Webmaster Tools site verification is available from Google Support and in Google Analytics in CONTENTdm.
Enter a Public URL
  1. From the Website Configuration Tool, click Analytics & SEO > SEO. Confirm selection of the Global Settings tab.
  2. In the Public URL box, enter the URL that you want end users to use to reach your CONTENTdm digital collections. Note: You must already own the URL you enter here. CONTENTdm does not act as a domain name registrar.
  3. Click Save.
  4. Click Publish.
Enable XML Sitemaps
Enabling XML Sitemaps will create the Sitemap file at http:///sitemap.xml and add a line to your robots.txt file (http:///robots.txt) so that search engines know where to look for the Sitemap.
Enter a Public URL as described above.
If you do not do this, you will not be able to enable XML Sitemaps.
Check the Enable XML Sitemaps box.
Click Save.
Click Publish.
Note: A Responsive Sitemap will not be generated until you make the full switch to the Responsive Website. At that point, the Responsive Sitemap will replace the 6.x Sitemap. The Sitemap is updated about once a week.
  • Was this article helpful?