Configure the About 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.

17-02-2016

Configure the About Page

Previous Step

Configure the News Detail Page

After adapting the templates of the out-of-the-box news feature you will now create an "About" text document, add a new URL to your web site, and configure it to display the text document.

Take a Look at the Web Design

Load the web design in your browser and browse to the "About" page. In addition to the common page elements you already have in place, the page shows a two columns in the main content area:

  • left column: text content
  • right column: secondary navigation menu

The two column main content area is out of scope for this iteration, so ignore the right column and the navigation menu inside it and concentrate on the text content.

Create the Content

Remember that you added the "Simple Content" out-of-the-box feature to your project when you set it up. The "Simple Content" feature includes a document type "content document" which contains fields for title, introduction, content and publication date. You will use this document type to create the content for the About page.

Load Hippo CMS in your browser:  http://localhost:8080/cms/. Log in with username "admin" and password "admin".

On the dashboard click "To the documents" to open the browse tab.

Browse to gogreen > content.

Add a new content document and give it the name "About". The new document will be opened in the editor.

In the "Title" field enter "About Hippo GoGreen".

Enter some text in the "Introduction" and "Content" fields.

Save and close the document and publish it.

At this point you can view the published document in the web site by selecting "content" in the navigation menu. This leads to a generic content list that is also included in the "Simple Content" feature. "About Hippo GoGreen" should show up in the list. Click on it to go to display the complete text document on its own page.

Create the URL

In the web design there is no generic content list, the About page is a content page that is on its own. You must configure a URL for it.

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

Click the "Edit" button.

Click on the 'chain link' icon in the top right. This will open a different UI through which you can manage some essential configuration for your web site.

In the near future this UI will be replaced by a new set of tools that will be integrated in the Channel Manager UI.

Select "Sitemap" from the dropdown in the left column. The sitemap defines the URL space of your web site, and maps each URL to a page configuration and a content item.

Click on the "Add new URL design" button.

In the dialog that appears, make sure the option "specific name" is selected and enter the name "about" and click "OK".

You will now see a form in which you can select the content item and the page configuration that the new URL should map to.

Click on the browse link ( [...]) next to the "Content path" field. In the dialog that appears browse to the "About" document you created. Select it and click "OK".

Below "Page design" use the arrow buttons to browse the available page configurations until you get to "hst:pages/contentpage". This is the generic text content page configuration included with the "Simple Content" feature.

Click on the "Save" button. You have now added the URL "about" to your web site and you configured it to display the "About" document using the "contentpage" page configuration.

Go back to the web site preview by clicking on 'GoGreen' in the top 'breadcrumb' navigation of the channel manager.

You can now preview the About page in the channel manager, but there is no "About" item in the navigation menu yet (you will get to that soon).

Click on the "Pages" button. A dialog will appear listing all pages in the site.

Click on "/about". The About page is rendered. It doesn't conform to the web design yet (you will fix this in a minute).

Save and close and publish your changes.

View the About page in your web site by entering the URL directly in your browser:  http://localhost:8080/site/about.

Apply the Web Design to the Simple Content Template.

Open the file about.html found in the web design. Here you'll find the HTML markup for the About page.

Locate the element  <div class="body-wrapper">. This contains the markup for the text content.

Open the file  bootstrap/webfiles/src/main/resources/site/freemarker/hstdefault/contentpage-main.ftl found in your project. This is the Freemarker template that renders the text content.

Apply the HTML markup found in about.html to the Freemarker code in contentpage-main.ftl. You should end up with something similar to this:

<#include "../include/imports.ftl">
<div class="body-wrapper">
  <div class="container">
    <div class="row">
      <#if document??>
        <@hst.link var="link" hippobean=document/>
        <div class="col-md-9 col-sm-9">
          <h2>${document.title?html}</h2>
          <p>${document.introduction?html}</p>
          <@hst.html hippohtml=document.content/>
        </div>
      <#elseif editMode>
        <img src="<@hst.link path="/images/essentials/catalog-component-icons/simple-content.png" />"> Click to edit Simple Content
      </#if>
    </div>
  </div>
</div>

Point your browser to the About page's URL again:  http://localhost:8080/site/about. It now conforms to the web design and displays the contents of the "About" document.

Next Step

Configure the Navigation Menu

Full Source Code

contentpage-main.ftl

<#include "../include/imports.ftl">
<div class="body-wrapper">
  <div class="container">
    <div class="row">
      <#if document??>
        <@hst.link var="link" hippobean=document/>
        <div class="col-md-9 col-sm-9">
          <h2>${document.title?html}</h2>
          <p>${document.introduction?html}</p>
          <@hst.html hippohtml=document.content/>
        </div>
      <#elseif editMode>
        <img src="<@hst.link path="/images/essentials/catalog-component-icons/simple-content.png" />"> Click to edit Simple Content
      </#if>
    </div>
  </div>
</div>
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?