« Back

AUI Carousel using WebContent Structure/Template

General Blogs April 21, 2013 By Tejas Kanani

Hi All,

If you have checked Liferay Home Page (I'm sure you've seen it many times smiley), There is a nice Image Carousel placed on very first raw on it.

I saw many post in which people were asking on how to create the same Carousel.

AUI Carousel on Liferay Home page

Answer

We can develop the same using AUI Carousel. There is a nice tutorial on AlloyUI Carousel which describes in detail about it in very simple term.

 

Lets make it even easier

Just to make it more simple to use, we can create a Web Content Structure & Template which will allow you to create same carousel just by providing images to be displayed. & some basic carousel parameters mentioned below

 

Structure

Below are the details of some basic parameters that we've defined in AUI_Carousel_Structure.xml

  • activeIndex - Index of the first visible item of the carousel
  • timeInterval - Interval time in seconds between an item transition
  • maxImageHeight - Provide max height of image element. Min limit advisable is 40
  • maxImageWidth - Provide max width of image element. Min limit advisable is 130
  • ImageElementSet
    • image - Browse & upload image to be displayed
    • linkUrl - Url of image if you want to make it clickable

Template

Create a Structure & Template from above AUI_Carousel_Structure.xml & Template AUI_Carousel_Template.vm gists respectively. 

 

For Liferay 6.2

Structure

 

Template

 

 

That's it guys now just create web content using created Structure & Template along with all required element values & Images to be displayed. And your nice looking Image Carousel using AUI Carousel is ready.

 

Carousel prepared using Web content

I hope this will be helpful. Feel free to provide any feedback/issue via comment.

 

Thanks,

Tejas Kanani

Threaded Replies Author Date
Interesting ... I still prefer jquery rotators... Jack Bakker April 21, 2013 12:17 PM
The one thing to keep in mind, Jack, is that... David H Nebinger April 21, 2013 6:25 PM
David, are you implying that all aui gets... Jack Bakker April 21, 2013 6:49 PM
AUI uses selective loading (only loads modules... David H Nebinger April 21, 2013 6:54 PM
loading multiple jquery versions is pretty... Jack Bakker April 21, 2013 7:14 PM
Here is a sliding carousel that Robert and I... Bradley Wood April 22, 2013 10:53 AM
[url]http://codepen.io/randombrad/pen/cDjvB[/url] Bradley Wood April 22, 2013 10:56 AM
That looks cool. Thanks for sharing Bradley. Tejas Kanani April 22, 2013 8:38 PM
It would be great if you add to the sample some... Luis Mas May 1, 2013 7:59 AM
Too good Using this i made web-content... chirag @ India May 21, 2013 3:23 AM
You can check at... chirag @ India May 21, 2013 3:24 AM
Nice tutorial. I'm trying to implement it, and... guest Here June 14, 2013 2:47 AM
Try giving complete url including http in url... Tejas Kanani June 14, 2013 2:53 AM
Thank you Tejas, thad did the trick! guest Here June 14, 2013 3:45 AM
On the liferay homepage the carousel is... Riley Pickerl June 17, 2013 7:31 AM
Riley, Check this out it is something you are... Tejas Kanani June 19, 2013 3:17 AM
hi tejas.. i followed your steps exactly..i... Vishnudas Lokhande October 8, 2013 4:12 AM
sorry tejas... mistake was in copying code..... Vishnudas Lokhande October 8, 2013 4:18 AM
Glad to know that it helped you. Tejas Kanani October 8, 2013 7:10 AM
its not working in LR 6.2 siddhant jain March 21, 2014 3:55 AM
Thanks Siddhant for pointing out. I've also... Tejas Kanani March 21, 2014 6:14 AM
Hi Tejas, I am still not able to get this to... Philip Teagle April 1, 2014 10:36 AM
Hi Philip, As it's using Alloy UI's Carousel... Tejas Kanani April 2, 2014 3:21 AM
For Liferay 6.2 / Responsive Carousel ... Marco Moncalvo April 9, 2014 1:38 PM
[...] AUI Carousel using WebContent... Anonymous April 29, 2014 1:15 AM
Hmmm... very odd. The 6.2 code doesn't seem to... Aaron Paxson June 15, 2014 6:08 PM
Nevermind. I used Marco's CSS Style in the... Aaron Paxson June 16, 2014 12:39 PM
[...] Have you ever thought that Liferay could... Anonymous August 11, 2014 10:22 AM
If I want to put ‘sequence’ and ‘alternate... Shahid Khan August 19, 2014 2:06 AM
[...] Have you ever thought that Liferay could... Anonymous August 20, 2014 4:54 PM
I am able to display it after logged in. but... Shahid Khan October 7, 2014 2:35 AM
Hi Tejas, Same issue. href" " not responding.... Sujeet Rai November 1, 2014 9:02 PM
Using Liferay 6.2 Sujeet Rai November 1, 2014 9:04 PM
Hi Tejas, I'm a newbie using CE 62 GA2 and I... Valentin Rabollet November 6, 2014 1:00 AM
[...] Have you ever thought that Liferay could... Anonymous June 19, 2015 11:37 AM
[...] Have you ever thought that Liferay could... Anonymous June 19, 2015 12:07 PM

Interesting ... I still prefer jquery rotators and continue to include jquery in tomcat*/ROOT/html/js/jquery and then reference in theme; other aui tools are certainly VERY attractive ; great that Liferay can support each and more
Posted on 4/21/13 12:17 PM.
The one thing to keep in mind, Jack, is that Liferay will load AUI anyway (otherwise the portal is not functional). Adding jQuery will result in a larger browser footprint on the client side.

Sure you get the effects you're looking for and it will work in your test environment, but end users may balk at the larger memory requirements of their browser w/o understanding why it is needed...
Posted on 4/21/13 6:25 PM in reply to Jack Bakker.
David, are you implying that all aui gets loaded with each page hit ? I love aui for many things (yes, love), but also might reference one or more versions of jquery in perhaps one or more themes, but then load jquery addons via Liveray Page level JavaScript 1, 2,3 etc.
Posted on 4/21/13 6:49 PM.
AUI uses selective loading (only loads modules which are used on the page), so it doesn't load everything and the kitchen sink. But you do get the core AUI, just like when you load jQuery you get the jQuery core.

I wouldn't recommend using different versions of jQuery (as you are adding more client browser resource requirements), nor would I recommend loading jQuery on a portlet level (by specifying in liferay-portlet.xml, for example).

If you are planning to use jQuery in your portlets, I'd stick with a single version of jQuery loaded at the theme level.
Posted on 4/21/13 6:54 PM in reply to Jack Bakker.
loading multiple jquery versions is pretty straight forward ; also is load of addons requiring specific versions
Posted on 4/21/13 7:14 PM.
Bradley Wood
Here is a sliding carousel that Robert and I made by using Alloy

http://codepen.io/randombrad/pen/cDjvB
Posted on 4/22/13 10:53 AM.
That looks cool. Thanks for sharing Bradley.
Posted on 4/22/13 8:38 PM in reply to Bradley Wood.
It would be great if you add to the sample some text content inside the image for demoing that something like this http://bqworks.com/products/advanced-slider/mixed.html can be done with AlloyUI carousel.
Posted on 5/1/13 7:59 AM.
Too good Using this i made web-content Carousel.In that we insert only id of web-content & then it display whole content instead of image check it
Posted on 5/21/13 3:23 AM.
You can check at http://liferay.medicalassociation.in/home
Posted on 5/21/13 3:24 AM in reply to chirag @ India.
guest Here
Nice tutorial.
I'm trying to implement it, and it works fine. Except for the images hyperlinks:
- liferay assigns the site path + the provided linkUrl as the hyperlinnk. So if the image has a url (outside the portal), say, www.urlhere.com, liferay gives: www.siteurl.com/www.urlhere.com.

How can I go around this problem?
Thanks!
Posted on 6/14/13 2:47 AM.
Try giving complete url including http in url textbox.
So give http://www.urlhere.com instead of www.urlhere.com. It should resolve your problem.
Posted on 6/14/13 2:53 AM in reply to guest Here.
guest Here
Thank you Tejas, thad did the trick!
Posted on 6/14/13 3:45 AM.
On the liferay homepage the carousel is responsive. Do you have the js to do this or is this something that is handled by AUI? Thanks
Posted on 6/17/13 7:31 AM.
Riley, Check this out it is something you are looking for.
http://codepen.io/randombrad/pen/cDjvB
Posted on 6/19/13 3:17 AM in reply to Riley Pickerl.
hi tejas..
i followed your steps exactly..i created structure and tenplate with your code( no chane)..but it is showing only first image ...it is not sliding..sliding bar also not visible...and on left side of top it is displaying this.
ageWidth = 600)
Posted on 10/8/13 4:12 AM.
sorry tejas... mistake was in copying code.. now it is working fine..thanks for this blog
Posted on 10/8/13 4:18 AM.
Glad to know that it helped you.
Posted on 10/8/13 7:10 AM in reply to V D L.
its not working in LR 6.2
Posted on 3/21/14 3:55 AM in reply to Tejas Kanani.
Thanks Siddhant for pointing out. I've also attached code for 6.2 now. Try that out, it should work in 6.2.
Posted on 3/21/14 6:14 AM in reply to siddhant jain.
Hi Tejas,
I am still not able to get this to work in 6.2. Is it required to load the seed and CSS files or is that done by the base 6.2 product? If so, where should this be done? In the web content?

<script src="http://cdn.alloyui.com/2.0.0/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/2.0.0/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>
Posted on 4/1/14 10:36 AM in reply to Tejas Kanani.
Hi Philip,
As it's using Alloy UI's Carousel function itself, all required css & js should be there in Liferay 6.2 theme. No need to include any more css & js specific to display carousel. Try by verifying the code with Liferay 6.2 default(Classic) theme. And if you are using your custom theme, make sure it properly loads aui js & css.
Posted on 4/2/14 3:21 AM in reply to Philip Teagle.
For Liferay 6.2 / Responsive Carousel

Structure:

<root available-locales="es_ES" default-locale="es_ES">
<dynamic-element dataType="string" indexType="" name="activeIndex" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
<meta-data locale="es_ES">
<entry name="label">
<![CDATA]>
</entry>
<entry name="predefinedValue">
<![CDATA[0]]>
</entry>
<entry name="tip">
<![CDATA[Index of the first visible item of the carousel]]>
</entry>
</meta-data>
</dynamic-element>
<dynamic-element dataType="string" indexType="" name="timeInterval" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
<meta-data locale="es_ES">
<entry name="label">
<![CDATA]>
</entry>
<entry name="predefinedValue">
<![CDATA[0.75]]>
</entry>
<entry name="tip">
<![CDATA[Interval time in seconds between an item transition.]]>
</entry>
</meta-data>
</dynamic-element>
<dynamic-element dataType="image" fieldNamespace="wcm" indexType="keyword" name="image" readOnly="false" repeatable="true" required="false" showLabel="true" type="wcm-image" width="">
<dynamic-element dataType="string" indexType="keyword" name="linkUrl" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
<meta-data locale="es_ES">
<entry name="label">
<![CDATA]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<e­ntry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</d­ynamic-element>
<meta-data locale="es_ES">
<entry name="label">
<![CDATA]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element­>
</root>



Template:

#set($interval = $timeInterval.Data)
#set($activeIndexValue = $activeIndex.Data)

<style type="text/css">
.aui .carousel {
margin-bottom: 0;
}
.auiCarousel .aui-carousel-item {
height: auto;
position: relative;
display: none;
}
.auiCarousel .carousel-item img {
width: 100%;
height: auto;
}
.auiCarousel .carousel-item-active {
display: block;
}
</style>

#set($totalCount = 0)
<div class="auiCarousel">
#foreach($imageElement in $image.getSiblings())
<div class="aui-carousel-item">
#if($imageElement.getData() != "")
#if($imageElement.linkUrl.getData() != "")
<a href="$imageElement.linkUrl.Data">
<img src="$imageElement.Data" />
</a>
#else
<img src="$imageElement.Data" />
#end
#set($totalCount = $totalCount + 1)
#end
</div>
#end
</div>

#if($totalCount > 0)
<script>
// Defining Carousel Module"
YUI().use('aui-carousel', function(Y) {
new Y.Carousel({
contentBox: '.auiCarousel',
activeIndex: $activeIndexValue,
intervalTime: $interval,
}).render();
});
</script>
#end
Posted on 4/9/14 1:38 PM.
[...] AUI Carousel using WebContent Structure/Template - Blog | Liferay [...] Read More
Posted on 4/29/14 1:15 AM.
Hmmm... very odd. The 6.2 code doesn't seem to work. The carousel loads, and I can see the carousel controls changing, but no images show and no link. When doing an inspection, the link the images point to works fine.
Posted on 6/15/14 6:08 PM.
Nevermind. I used Marco's CSS Style in the template and works fine.
Posted on 6/16/14 12:39 PM in reply to Aaron Paxson.
[...] Have you ever thought that Liferay could use a little more Instagram? With the power of the Instagram API and the mighty Alloy-UI resource it is possible to integrate Instagram onto your page.... [...] Read More
Posted on 8/11/14 10:22 AM.
If I want to put ‘sequence’ and ‘alternate text’ fields in ImageElementSet then what modifications I need to make here?
Posted on 8/19/14 2:06 AM.
[...] Have you ever thought that Liferay could use a little more Instagram? With the power of the Instagram API and the mighty Alloy-UI resource it is possible to integrate Instagram onto your page.... [...] Read More
Posted on 8/20/14 4:54 PM.
I am able to display it after logged in. but this Carousel is not visible for Guest user.
Can anybody tell me how to overcome this problem?
i tried all basic permissions and settings but still no use
Posted on 10/7/14 2:35 AM.
Hi Tejas,

Same issue. href" " not responding.
when i am giving link "http://www.google.com" in linkUrl then, that image also disappear.
Posted on 11/1/14 9:02 PM.
Posted on 11/1/14 9:04 PM in reply to Sujeet Rai.
Hi Tejas,

I'm a newbie using CE 62 GA2 and I ve created the structure and the template with the scripts above. Suprisingly, the Web Content Display show me this :

-------------------------------------
#set($imageWidth = $maxImageWidth.Data) #set($imageHeight = $maxImageHeight.Data) #set($imageWidthPx = $imageWidth + "px") #set($imageHeightPx = $imageHeight + "px") #set($interval = $timeInterval.Data) #set($activeIndexValue = $activeIndex.Data) #set($totalCount = 0)
#foreach($imageElement in $image.getSiblings()) #if($imageElement.getData() != "") #if($imageElement.linkUrl.getData() != "") #else #end #set($totalCount = $totalCount + 1) #end #end
#if($totalCount > 0) #end
------------------------------------------------------

Did I miss something? Must I load Alloy UI somewhere first?

Thanks for your help!
Posted on 11/6/14 1:00 AM.
[...] Have you ever thought that Liferay could use a little more Instagram? With the power of the Instagram API and the mighty Alloy-UI resource it is possible to integrate Instagram onto your page.... [...] Read More
Posted on 6/19/15 11:37 AM.
[...] Have you ever thought that Liferay could use a little more Instagram? With the power of the Instagram API and the mighty Alloy-UI resource it is possible to integrate Instagram onto your page.... [...] Read More
Posted on 6/19/15 12:07 PM.