Configure the Home Page - BloomReach Experience - Open Source CMS

This article covers a Hippo CMS version 10. There's an updated version available that covers our most recent release.


Configure the Home Page

Previous Step

Adapt the Base Page Configuration to the Web Design

Now that you have applied the web design to the base page configuration, you can turn your attention to the actual pages. The Home page is a good place to start. Let's add the Banner Carousel.

Remove the Static Text from the Home Page

Look at your web site's home page in your browser. The main content area contains a generated text. Let's remove it.

Open the file  bootstrap/webfiles/src/main/resources/site/freemarker/gogreen/homepage-main.ftl found in your project.

Remove the following lines:

<@hst.setBundle basename="essentials.homepage"/>
  <h1><@fmt.message key="homepage.title"/></h1>
  <p><@fmt.message key="homepage.text"/></p>

So you will only have the following two lines left:

<#include "../include/imports.ftl">
<@hst.include ref="container"/>

Create Banner Documents

Before you can add the Banner Carousel you must first create some banner content. The instructions below let you recreate the banner content from the web design.

Load Hippo CMS in your browser:   http://localhost:8080/cms/

Log in with username 'admin' and password 'admin'.

Go to the Content tab and select 'Images' from the dropdown menu.

Browse to gogreen > banners.

Upload the following images from the web design into the banners folder:

  • binaries/content/gallery/banners/office.jpg
  • binaries/content/gallery/banners/study.jpg
  • binaries/content/gallery/banners/thermostat2.jpg

Now select Documents from the dropdown menu and browse to  gogreen > banners.

Add a new Banner document and give it a name, for example "10 Simple Steps to Green Your Office".

Enter the name again in the Title field, for example "10 Simple Steps to Green Your Office".

Enter some text in the Content field, you can copy paste it from the web design.

Click the 'Select' button in the Image field and browse to  Images > gogreen > banners.

Select the office.jpg image and click 'OK'.

Click the 'Select' button in the Link field, browse to  Documents > gogreen > news and select a news article of your choice.

Click the 'OK' button.

Click 'Save & Close'.

Open the 'Publication' menu and click 'Publish'.

Use the same procedure to add 2 more Banner documents, e.g.

  • "Is a Smart Thermostat Worth the Investment?"
  • "How to Green Your Dorm Room"

Add the Banner Carousel to the Home Page

Now that you have some banner content you can add the Banner Carousel feature to the Home page.

Still in Hippo CMS, go to the Channels tab and select your web site.

Click 'Edit'.

Click 'Components'.

Drag the 'Carousel' component icon into the dotted rectangle in the home page's main content area.

Click on the still empty carousel component. A configuration dialog will appear.

In the 'Carousel Item 1' field click on the looking glass icon, browse to one of the Banner documents you added and select it.

Repeat for 'Carousel Item 2' and 'Carousel Item 3'.

Uncheck the option 'Show carousel navigation'.

Click 'Save', then close the configuration dialog.

The Banner Carousel now displays the selected banners.

Click 'Save & Close'.

Click 'Publish my changes'.

View the site in your browser. The Home page now contains the Banner Carousel and it will cycle through the banners you configured.


Note that the banner carousel looks exactly like it does in the web design! This is because both the web design and Hippo's Banner Carousel feature use  Bootstrap's Carousel Javascript. As a result the CSS included in the web design is automatically applied to the banner carousel.

Head Contributions

Remember the Javascript references in  index.html in the web design that you didn't include in the base page template? And remember the code you added to include  head contributions made by components further down in the hierarchy?

Open the file  bootstrap/webfiles/src/main/resources/site/freemarker/hstdefault/essentials-carousel.ftl found in your project. This is the template for the out-of-the-box banner carousel.

In the template you can see an example of head contributions:

  <@hst.headContribution category="htmlBodyEnd">
    <script type="text/javascript" src="< path="/js/jquery-2.1.0.min.js"/>"></script>
  <@hst.headContribution category="htmlBodyEnd">
    <script type="text/javascript" src="< path="/js/bootstrap.min.js"/>"></script>

Note the category attributes of the   <@hst.headContribution> tags.

Open the file  bootstrap/webfiles/src/main/resources/site/freemarker/gogreen/base-layout.ftl once more and look for the   <@hst.headContributions> tags you added there. Can you figure out where in   base-layout.ftl the head contributions made by the banner carousel end up?

Next Step

Configure the News Overview Page

Full Source Code

For reference the full source code for each of the files you worked on is included below.


<#include "../include/imports.ftl">
<@hst.include ref="container"/>
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?