Liferay theme with embedded content

Goal

Customize a Liferay theme with specific contents

Description

I have been working in some Liferay projects in the last 2 years. In all those projects, a Liferay theme was necessary. And in all, without exception, sooner or later, had the requirement to change something in the footer. For instance, a logo or a URL was changed and we had to make a new project release to deal with that. If you are like me, you will agree that this kind of work is boring so I wanted a different solution. This recipe explains how you can make your Liferay theme customizable in order to change some aspects of the theme with specific Liferay contents (by the way, I would like to say thanks to Ricardo Alves, a colleague from Linkare, with whom I implemented this solution and, after testing it, sent me the steps we took so that I could create this recipe).

How to

This recipe consists on the following steps (notice, however, that we will not go into details of how to create a Liferay theme in this recipe as it is not its focus):

  1. Theme configuration property – In file liferay-look-and-feel.xml, add a configuration property that will hold the id of the content you wish to load for the footer section of your theme
    <setting configurable="true" key="footer-article-id" type="text" value="/please-set-in-theme-properties" />
    
  2. Configure your theme template – In file portal-normal.vm of your theme project, make something similar to the following (notice that we will make the theme in a way such that it will show a default footer, if no footer-article-id is set when one defines the theme for our site):
    <!-- Liferay 6 with velocity -->
    #set ($footerArticleId = $theme_settings.getProperty("footer-article-id"))
    #set ($groupId = $themeDisplay.getLayout().getGroupId())
    #set ($footerContent = $journalContentUtil.
    getContent($groupId, $footerArticleId, "", "", "$locale", $theme_display))
    
    #if ($footerContent)
    $footerContent
    #else
    ... default content will go here
    #end
    
    <!-- Liferay 7 with freemarker -->
    <#assign journalContent = serviceLocator.findService("com.liferay.journal.util.JournalContent") />
    <#assign groupId = themeDisplay.getLayout().getGroupId() />
    <#assign footerContent = journalContent.getContent(groupId, footer_article_id, "", locale, themeDisplay)!"" />
    
    <#if footerContent?has_content>
      ${footerContent}
    <#else>
    ... default content will go here
    </#if> 
  3. Create and set the footer article – Create a Liferay document that will contain the footer content and go to the theme configuration for your site and set the footer-article-id with the id of the created article. For better performance, make sure your content is cacheable

Explanations

This recipe has already proved useful for our customers (they no longer depend on us to change the footer of their portals) and ourselves (we no longer waste our time changing simple things such the one discussed in this recipe). It it simple yet effective so its use is self explanatory.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s