Blog Post

...

Liferay 7 embed Language Portlet in Header

Hey there, the new Liferay 7 is out now. With this version we become a brand new concept (which implements the OSGi specification) of Liferay Plugins development and integration within a portal. Having OSGi implemented, Liferay moves from a hack-like style of Plugin management, where each Plugin is a separate web application stored as a war-file on an app server, to a much cleaner concept. There are many global changes in Liferay 7 and in this post we’ll see how to insert Language Portlet to custom Theme header in accordance with new architecture.

One of the most important changes in Liferay 7 is that the Velocity template engine is deprecated; since now there is left the Freemarker template engine only. Having this in mind let’s find a code of a theme where Language Portlet should be placed to. Normally theme’s header persists in /templates/portal_normal.ftl freemarker template file, so we need to use a Language Portlet tag from liferay-ui.tld JSP tag library in it. This is how portal_normal.ftl of the Classic theme should look like:

<header class="container-fluid-1280" id="banner" role="banner">
	<div class="row">
		<div class="navbar-header" id="heading">
			<a class="${logo_css_class}" href="${site_default_url}" title="<@liferay.language_format arguments="${site_name}" key="go-to-x" />">
				<img alt="${logo_description}" height="64" src="${site_logo}" />
			</a>
			<#if show_site_name>
				<span class="site-name" title="<@liferay.language_format arguments="${site_name}" key="go-to-x" />">
					${site_name}
				</span>
			</#if>
			<#if is_setup_complete>
				<button aria-controls="navigation" aria-expanded="false" class="collapsed navbar-toggle" data-target="#navigationCollapse" data-toggle="collapse" type="button">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<div class="pull-right user-personal-bar">
					<@liferay.user_personal_bar />
				</div>
				<div class="pull-right language-bar">
					<@liferay_ui["language"]/> <
				</div>					
			</#if>
		</div>
		<#include "${full_templates_path}/navigation.ftl" />
	</div>
</header>

In current template there is actually 1 line is added that injects Language Portlet to the Classic’s theme header:  <@liferay_ui["language"]/>.

Since Liferay 7 implements the OSGi technology all tld tag libraries are stored in separate OSGi bundles (not shipped within each portlet). It means that we don’t need to embed any tag library in our theme bundle. We don’t even need to refer the demanded taglib in ftl template in order to inject some tag, all mapping are done automatically by the OSGi.

Also CSS stylings can be added to Language portlet so it is located right next to SignIn portlet, just append this class to src/css/_custom.scss:

@media only screen and (min-width: 768px) {
    #banner .language-bar {
      position: absolute;
      right: 160px;
      top: 0px; 
    } 
}

After the theme is built and deployed the header will look as following:

liferay 7 language

And finally, to refine languages list go to Site Configuration –> Site Settings –> Languages tab and leave only current languages:

liferay 7 language 

Ok, that’s it, in the end we got the Language selector embedded using freemarker template engine in Theme’s header that corresponds to Liferay 7 OSGi specification.

Comments (4)

Tags: liferay


Comments:

...

Amer Mar 27, 2017 at 16:52 #

Ty man , great article , very useful.

...

Stanislav Mar 30, 2017 at 19:55 #

Amer, thanks, appreciate this!

...

Suresh Aug 31, 2017 at 18:22 #

How can we specify display style? I.e if we want to display template to "Language text"

...

Stan Nov 09, 2017 at 20:56 #

Hey Suresh, just alter _custom.scss and then rebuild current theme

Leave a Comment