« Back to FrontPage

Display Theme's Images in Portlets

If for some reason we need to use Liferay 5.2 theme's images in our portlet, there is a very easy way of doing this. 

First in our jsp we need to import the Liferay Theme Taglib this way:

<%@taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>

This allow us to use the

<liferay-theme: ... >

tag to access some important functions. The one we need to use here is

<liferay-theme:defineObjects />

After this call a lots of objects are availables in our jsp. The one we are interested for is


We are going to use it to get the theme's images path so we can use it into an img tag this way

<img src="${themeDisplay.getPathThemeImages}/folder/image.png" />

For example suppose that into your jsp you want to display the italian flag icon. To do this you just have to write this code

...other jsp imports...

<%@taglib uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>

<liferay-theme:defineObjects />

...other jsp code...

<!-- Here we display the italian flag image -->
<img src="${themeDisplay.getPathThemeImages}/language/it_IT.png" />

Another way to use theme's images is to use the liferay tag liferay-ui:icon

<%@ taglib uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>

<liferay-ui:icon src='<%= themeDisplay.getPathThemeImages() + /social/add_friend.png"%>'/>

When you use this tag liferay if the property is theme.images.fast.load=true. It will use the sprite like this way
 <img class="icon" src="/html/themes/classic/images/spacer.png"
style="background-image: url('/mytheme/images/portlet/.sprite.png');
background-position: 50% -131px;
background-repeat: no-repeat;
height: 16px;
width: 16px;" />


 <img class="icon" id="mpob" src="/mytheme/images/social/add_friend.png">

I test this function in liferay 6.1

0 Attachments
Average (0 Votes)
The average rating is 0.0 stars out of 5.