Work with the file manager
The Custom Pages section of the Website Configuration Tool provides a general file manager (“manage files” link) for working with customizations. While this file manager gives you a way to upload custom page HTML files, it also provides tools to create subdirectories and upload any non-executable resource file. You can upload images, video & audio files, companion CSS and JS files, etc.
If you are creating customizations where multiple files are working together, the file manager gives you the tools to organize those files as you prefer. For example, it is common to create a “js” subdirectory for storing included JavaScript files and an “img” subdirectory for any image files linked from custom HTML.
File paths
If you use the file manager to upload custom HTML pages, there are special rules about how the path to those pages is formed. See Custom pages overview for details.
If you are using the file manager to upload static resources that will be referenced by other custom code, you will need to know the path to be able to link to these files. For the Custom Pages section of the Global Settings tab in the Website Configuration Tool, the base path used for files uploaded to the file manager is /customizations/global/pages/. When you access files using this form of the path they are passed through directly rather than being parsed by the CONTENTdm application. For example, here is a direct link to a custom JavaScript file:
https://cdmdemo.contentdm.oclc.org/customizations/global/pages/js/open-external.js
This is not being executed by the browser, but simply displayed. Note that this file has been placed into a “js” subdirectory in the file manager. If you are including this JavaScript into another HTML or JS file, this is the form of the path you need to use.
The same is true for other types of static resources. If you have an image that is referenced by your custom HTML, your img tag would have a src value that looks like this:
https://cdmdemo.contentdm.oclc.org/customizations/global/pages/img/iiif-logo-sm.png
This is the absolute URL form to show the relationship to the entire path. For most customizations it is better to use relative paths whenever possible. For the image example above the relative path would be /customizations/global/pages/img/iiif-logo-sm.png. For the custom JavaScript file example previously shown, the relative path would be /customizations/global/pages/js/open-external.js.
The Custom Pages functionality also exists in the Collection-level settings tab in the Website Configuration Tool. The base path for the collection-specific file managers will include the CONTENTdm alias of the collection in question. For example, if I use the file manager for the OCLC Sample Collection to upload an image file (the collection alias is “oclcsample”) then this file will be directly accessible here:
https://cdmdemo.contentdm.oclc.org/customizations/collection/oclcsample/pages/example-image.png
The relative path to this file is /customizations/collection/oclcsample/pages/example-image.png.
Note: Working with file paths can get confusing at times since one form of the path accesses the content through the CONTENTdm application (and includes any necessary modification or dynamic rendering) and another form of the path provides direct, raw access to the file. The key is that files that are accessed via a path that begins with /digital/ are running through the CONTENTdm React application and may have headers or footers attached or the script code may be immediately executed. On the other hand, paths that begin with /customizations/ will generally be direct links to the file with no processing or interpretation of the content by CONTENTdm.