Container Configuration in Hippo CMS

What is Container ?

Container is an modifyable section in your page in which Webmaster can modify there contain in page using Channel Editor. Containers are Stotred in hst:workspace we can configure in
1. below hst:workspace/hst:pages or
2. below hst:workspace/hst:containers
so in this blog we configure container below hst:workspace/hst:containers.

Steps to create Container in Hippo CMS.

Step 1: Create a New Project

generate your Hippo project using the Maven archetype as explained in Create the Project.

Step 2: Build the Project

Compile and run the project by using the following Maven commands:
mvn verify
mvn –Pcargo.run

Step 3: Create a Jsp File

Create a jsp file under your_project_name/site/src/main/webapp/WEB-INF/jsp/your_project_name/home.jsp

Add the line inside the home.jsp file
<%@ taglib prefix=”hst” uri=”http://www.hippoecm.org/jsp/hst/core” %>
<hst:include ref=”main”/>

Step 4: Configure the Template

Browse to the Hippo Console at http://localhost:8080/cms/console and log in using the default admin / admin credentials.

Browse to the node at /hst:hst/hst:configurations/your_Project_Name and you will see something similar to this:

53d3b016-cdc0-400f-854a-85784741398d

select the hst:templates node. Add a new child node, by either clicking on ‘Add’ in the top menu or by right-clicking the node then selecting ‘Add node’. Name it homepage. The node type should be set to hst:template by default. Click OK to create.

38a7bb8b-e3cb-4cba-ab80-3f1267a68fb6

After this, click on the ‘Add Property’ button above the properties. This will open a dialog:

b0a5f33b-fab6-47be-801e-4d2f03f382b1

 

Add a property named hst:renderpath. Set the value to the location of the jsp file you created: jsp/Your_Project_Name/home.jsp
Click OK to close the dialog.

Step 5: Add a Page (Component)

Select the hst:pages node and add a child node called homepage of type hst:component. Note that there is no separate node type for a page, the page node is simply the top level component in the hierarchy.
Add a property hst:template to the home node with the value homepage.

db41fb28-56dc-4e0b-aa01-d3bc74aaff6c

Add a property hst:containercomponent to the homepage node with the value main.

4

 

Step 6. Container Configuration

Select the node /hst:hst/hst:configurations/Your_Project_Name/hst:workspace/hst:containers

5

 

add a child node called homepage of type hst:containercomponentfolder

 

6

 

Select the node /hst:hst/hst:configurations/myhippoproject/hst:workspace/hst:containers/homepage add a child node called main of type hst:containercomponent

4

 

add a property to main of type hst:xtype and value hst:nomarkup

8

 

select hst:hst/hst:configurations/Your_Project_Name/hst:pages/home/main node add a property called hst:referencecomponent of value homepage/main

9

 

Step 7: Configure the Sitemap

The final step to take is to map a URL to the page you configured. Hippo’s delivery tier uses a sitemap to configure the URL space of a website and map each URL to a page and (optionally) a content item. You want your page to be rendered as the home page of your site, which means you have to add a root sitemap item.
Select the hst:sitemap node and add a child node called root of type hst:sitemapitem.

Add a property called hst:componentconfigurationid and set the value to hst:pages/homepage (referring to the page configuration you just created)

don’t forget to do write changes in repository.

Step 8: Install the plugin from Essentials for Drag and Drop.

go to url localhost:8080/essentials/#/library

 

10

 

click on install feature of Banner, Carousel, Menu, Map, News, Content Blocks, and Events

11

 

Then rebuild your project

mvn clean verify && mvn -Pcargo.run
after rebuilding your project goto url localhost:8080/cms

Then goto Channels at left Side then click on your_project it will display preview page.
Then click Edit Button after that click top most left icon of sidenav . It will open following screen.
Click on your url on sitemap and then component after that just drag and drop the Banner, Carousel, Faq, News, Map, Events, blogs component to your page.

 

12

 
13

 

Publish the changes .

14

Step 9: Output

visit the site. You now actually see the content being rendered!

15

 

 

Leave a Reply