Configure the Homepage

Previous Step

Adapt the Base Page Configuration to the Web Design

After updating the base page configuration to match your web design, configure the homepage to display dynamic content. This section explains how to remove placeholder text and add a Banner Carousel.

Remove Static Text from the Homepage

Open your website's homepage in a browser. The main content area displays generated placeholder text. Remove this text to prepare the page for dynamic content.

1. Open the file repository-data/webfiles/src/main/resources/site/freemarker/gogreen/homepage-main.ftl in your project.
2. Delete the following lines:

<@hst.setBundle basename="essentials.homepage"/>
<div>
  <h1><@fmt.message key="homepage.title" var="title"/>${title?html}</h1>
  <p><@fmt.message key="homepage.text" var="text"/>${text?html}</p>
  <#if !hstRequest.requestContext.cmsRequest>
    <p>
      [This text can be edited
      <a href="http://localhost:8080/cms/?1&path=/content/documents/administration/labels/homepage" target="_blank">here</a>.]
    </p>
  </#if>
</div>
copy

3. The file should now contain only these lines:

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

Create Banner Documents

Before adding the Banner Carousel, create banner documents and upload images as content.

1. Open Bloomreach Content in your browser: http://localhost:8080/cms/
2. Log in with username admin and password admin.
3. In the Content application, select Images from the dropdown menu.
4. Navigate to GoGreen > banners.
5. 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

6. Switch the dropdown menu to Documents and navigate to GoGreen > banners.

7. Add a new Banner document. Enter a name, for example, "10 Simple Steps to Green Your Office".

8. In the Title field, enter the same name.
9. In the Content field, add descriptive text. You can use text from the web design.
10. In the Image field, click Select, then browse to Images > GoGreen > banners.

11. Select office.jpg and click OK.
12. In the Link field, click Select, browse to Documents > GoGreen > news, and select a news article.

13. Click OK.

14. Click Done.
15. Open the Publication menu and select Publish.

16. Repeat these steps to create two more Banner documents, for example:
    • "Is a Smart Thermostat Worth the Investment?"
    • "How to Green Your Dorm Room"

Add the Banner Carousel to the Homepage

After creating banner documents, add the Banner Carousel component to the homepage.

1. In Bloomreach Content, open the Experience manager application and select the GoGreen website.
2. Click the icon in the top left corner to open the sidebar, then select Components.

3. Select the Carousel component.
4. Click inside the rectangle labeled 'Home Page Main' in the main content area to add the component to the container. The configuration sidebar appears on the right.
5. For Carousel Item 1, click the magnifying glass icon, browse to one of the Banner documents you created, and select it.
6. Repeat for Carousel Item 2 and Carousel Item 3.
7. Uncheck the Show carousel navigation option.

8. Click Save in the configuration sidebar, then close the sidebar.
9. The Banner Carousel now displays the selected banners.
10. Click Channel, then Publish.
11. View the site in your browser. The homepage now displays the Banner Carousel, which cycles through the banners you configured.

The banner carousel matches the appearance defined in the web design. Both the web design and the Banner Carousel component use Bootstrap's Carousel JavaScript, so the included CSS applies automatically.

Head Contributions

The web design's index.html includes JavaScript references that were not added to the base page template. Banner Carousel components can contribute resources to the page head using head contributions.

1. Open repository-data/webfiles/src/main/resources/site/freemarker/hstdefault/essentials-carousel.ftl. This template defines the out-of-the-box banner carousel.
2. The template contains head contributions, for example:

<@hst.headContribution category="htmlHead">
    <style type="text/css">
        /* Carousel base class */
        .carousel {
            height: ${cparam.carouselHeight}px;
            /*width: ${cparam.carouselWidth}px;*/
            margin-bottom: 60px;
        }

        /* Since positioning the image, we need to help out the caption */
        .carousel-caption {
            z-index: 10;
        }

        /* Declare heights because of positioning of img element */
        .carousel .item {
            height: ${cparam.carouselHeight}px;
            background-color: ${cparam.carouselBackgroundColor};
        }

        /* center images*/
        .carousel-inner > .item > img {
            margin: 0 auto;
        }
    </style>
</@hst.headContribution>

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

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

The category attribute of each <@hst.headContribution> tag determines where the resource is injected.

3. Open repository-data/webfiles/src/main/resources/site/freemarker/gogreen/base-layout.ftl and locate the <@hst.headContributions> tags you previously added. Identify where head contributions from the banner carousel are rendered in the final HTML.

Note: The base-layout.ftl template already loads jquery-3.5.1.min.js and bootstrap.min.js on every page. As a result, these scripts are loaded twice on the homepage.

Resolution:
Remove the bottom two head contributions (the script tags for jQuery and Bootstrap) from essentials-carousel.ftl to prevent duplicate script loading.

Next Step

Configure the News Overview Page

Full Source Code

For reference, the final version of homepage-main.ftl:

homepage-main.ftl

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