Bloomreach

Bloomreach Documentation version

Add Static Resources

Previous Step

Configure Image Variants

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
  • Fonts
  • Images
  • Javascript code

In the folder structure of the web design these resources are located in the following folders:

  • css
  • fonts
  • images
  • js

In your Bloomreach Experience Manager project, you can find corresponding folders (except for images) under repository-data/webfiles/src/main/resources/site:

  • css
  • fonts
  • js
The repository-data/webfiles module contains your project's web files, static web application resources that are stored in the repository. During development they are automatically synchronized between your project folder and the running repository. This is especially convenient for CSS and Javascript files you might be developing. For simplicity you will store all static files (including images and fonts) as web files, however in a real world project you should consider which files would be better packaged as resources with your web application. 

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.

You may notice the web design also has a  binaries folder containing images. These are images that are part of the content (e.g. a news article). Bloomreach Experience Manager will retrieve content dynamically from the content repository, so these images are not considered static and you don't have to add them to your project.

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:

  • v16.x & 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/

Next Step

Adapt the Base Page Configuration to the Web Design

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?