• View
• Edit
• History
• Print

Referencing a bundled image in a portlet

#############################

Problem

You have a portlet and you want to include an image in the portlet (for instance in a subdirectory called image). How to show this image in the portlet?

Solution #1

First, you have to figure out the ID of the produced WAR file. In my case I had a project with several portlets, but it's not the portlet IDs that we have to use but the module ID. To figure it out, compile and deploy the project, then check the file catalina.out. I keep a console open for this file and using tail -f catalina.out I can notice every change. So, during deployment it'll produce something like this:

16:59:36,131 INFO  [PortletHotDeployListener:227] Registering portlets for farm-portlet
16:59:36,174 INFO  [PortletHotDeployListener:351] 7 portlets for farm-portlet are available for use

So the module ID is "farm-portlet" in this example. I don't know exactly where it comes from since I didn't specify it in any config file…

Now, in your JSP files you can put a reference on an image the following way:

<img src="/farm-portlet/image/mostbeautifulcow.jpg" />

Here I suppose that the photo of your pet is located here:

PROJECTS/farm-portlet/docroot/image/mostbeautifulcow.jpg

Again, even if your project is in a folder called PROJECTS/farm-portlet, the module ID can be different (as it was in my case), so search for the module ID in the catalina.out file.

Solution #2

There is a way to set the module ID in a config file. However, I didn't find this file in the Liferay SDK and I'm not sure what it is. It can be an old config file… However, in Liferay 5.2.3 it was working for me. (I figured this out after Solution #1).

The file is called liferay-plugin-package.xml and here is an example for its content:

<?xml version="1.0"?>
<!DOCTYPE plugin-package PUBLIC "-//Liferay//DTD Plugin Package 4.3.0//EN" "http://www.liferay.com/dtd/liferay-plugin-package_4_3_0.dtd">

<plugin-package>
    <name>My Farm</name>
    <module-id>liferay/farm-portlet/5.2.3/war</module-id>
    <types>
        <type>portlet</type>
    </types>
    <tags>
       <tag>farm</tag>
    </tags>
    <short-description>Me and my farm.</short-description>
    <long-description></long-description>
    <change-log></change-log>
    <page-url></page-url>
    <author>Redneck</author>
    <licenses>
        <license osi-approved="true">open source</license>
    </licenses>
    <liferay-versions>
        <liferay-version>5.2.3+</liferay-version>
    </liferay-versions>
</plugin-package>

Thanks

I managed to solve this image referencing problem thanks to an example at RobiSoft.com. I used http://www.robisoft.com/software/jquery-part2-portlet-5.2.3.1.war.