News slideshow in liferay 6.2

I want to insert in my portal a portlet to show news with image, description and link to that article. This portlet would be a beautiful way to get notice from readers and make the website more beautiful. But to make a new portlet takes a lot of time, why don’t we use asset publisher portlet.

In liferay 6.2, we can use asset publisher template to change the way showing web content. And finally I got this:

It will automatically get image of webcontent and its description to make slideshow with beautiful transition effect. Click on the title to navigate to article. Now I will show you how to make news slideshow by asset publisher portlet:
1. Insert at least 3 article in web content. Remember that each article must has a small image, and a big image in its content to show big image and its thumb in slideshow
2. Add new asset publisher portlet. Select the categories of the articles we have added before to show content in slideshow automatically

3. Add a new template in the configuration/display setting with the code below and select it then:

##
## This template can be used to modify the look of a specific
## application.
##
## Please use the left panel to quickly add commonly used variables.
## Autocomplete is also available and can be invoked by typing “$”.
##

#if (!$entries.isEmpty())
#foreach ($curEntry in $entries)
#set($renderer = $curEntry.getAssetRenderer() )
#set($className = $renderer.getClassName() )

#if( $className == “com.liferay.portlet.journal.model.JournalArticle” )

#set( $Article = $renderer.getArticle() )
#if( $Article.getArticleImageURL($themeDisplay) )
#set( $image = $Article.getArticleImageURL($themeDisplay) )
#set ($content = $saxReaderUtil.read($Article.getContent()).getStringValue())
#set ($dau =$content.indexOf(‘src=”‘, 1))
#set ($dau = $dau + 5)
#set ($cuoi =$content.indexOf(‘”‘, $dau) )

#else

#end
#end
#end
#end


4. Add the file css to css folder of the theme being used and import it in your custom.css:

@import url(camera.css);

5. Add images in the folder image in css folder

6. Add javascript files to javascript folder and add these code in the head of template of the theme

file download:

Ok it’s done.
If you feel it’s difficult, you can download retina liferay theme, I have add all css and javascript of the slideshow to it. You just paste the asset publisher template to use slideshow.

Leave a Reply

Your email address will not be published. Required fields are marked *