Add Static Resources
Now that you have a basic web site with some out-of-the-box features up and running and have configured the required image variants, there is one more thing you need to do before you can start adapting the templates to the web design.
Locate static resources
The HTML web design (see Introduction for up-to-date download link) makes use of several static resources. These can be split into four categories:
- CSS style sheets
In the folder structure of the web design these resources are located in the following folders:
In your Bloomreach Experience Manager project, you can find corresponding folders (except for images) under repository-data/webfiles/src/main/resources/site:
Add the Static Resources to your Project
Copy all contents of the css folder in the web design to the repository-data/webfiles/src/main/resources/site/css folder in your project.
Copy all contents of the fonts folder in the web design to the repository-data/webfiles/src/main/resources/site/fonts folder in your project.
Copy all contents of the images folder in the web design to the repository-data/webfiles/src/main/resources/site/images folder in your project.
Copy all contents of the js folder in the web design to the repository-data/webfiles/src/main/resources/site/js folder in your project.
Don't worry about the files already in those folders in your Bloomreach Experience Manager project. You can overwrite the ones with the same names as the files you are copying, and leave the other where they are.
Update the Web Files Allowlist
Open the Web Files allowlist file in your project. Depending on your Bloomreach Experience Manager version, this file is located at:
- v15.x: repository-data/webfiles/src/main/resources/site/hst-allowlist.txt
- v14.x: repository-data/webfiles/src/main/resources/site/hst-whitelist.txt
This file contains an allowlist of web files that should be publicly accessible.By default it contains:
css/ fonts/ js/
Add the new images folder to the list so it looks like this:
css/ fonts/ js/ images/
Adapt the Base Page Configuration to the Web Design