Forums

Home » Liferay Portal » English » 3. Development

Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
How to get Image Slide Show using Web Content in liferay6 Juhi Kumari January 6, 2012 3:12 AM
RE: How to get Image Slide Show using Web Content in liferay6 Deepak R January 6, 2012 5:03 AM
RE: How to get Image Slide Show using Web Content in liferay6 Bradley Wood January 6, 2012 11:33 AM
RE: How to get Image Slide Show using Web Content in liferay6 Juhi Kumari January 8, 2012 10:50 PM
RE: How to get Image Slide Show using Web Content in liferay6 Deepak R January 8, 2012 11:33 PM
RE: How to get Image Slide Show using Web Content in liferay6 Juhi Kumari January 9, 2012 12:47 AM
RE: How to get Image Slide Show using Web Content in liferay6 Lanre Ogunbayo February 9, 2012 3:31 PM
RE: How to get Image Slide Show using Web Content in liferay6 Lanre Ogunbayo February 9, 2012 4:19 PM
RE: How to get Image Slide Show using Web Content in liferay6 Marco Faustinelli September 11, 2012 11:39 AM
RE: How to get Image Slide Show using Web Content in liferay6 Mradul Ashok October 29, 2012 4:16 AM
RE: How to get Image Slide Show using Web Content in liferay6 Nikhil Nishchal October 29, 2012 4:29 AM
RE: How to get Image Slide Show using Web Content in liferay6 Mradul Ashok October 29, 2012 5:26 AM
RE: How to get Image Slide Show using Web Content in liferay6 Nikhil Nishchal October 29, 2012 5:32 AM
RE: How to get Image Slide Show using Web Content in liferay6 Mradul Ashok October 29, 2012 7:24 AM
RE: How to get Image Slide Show using Web Content in liferay6 Vasanth Kumar August 6, 2012 10:26 PM
RE: How to get Image Slide Show using Web Content in liferay6 Matthew Dixon September 3, 2012 4:58 AM
RE: How to get Image Slide Show using Web Content in liferay6 Ben Chapman February 10, 2012 10:42 AM
RE: How to get Image Slide Show using Web Content in liferay6 Ben Chapman February 10, 2012 12:39 PM
RE: How to get Image Slide Show using Web Content in liferay6 Nagarjuna Gottimukkala May 11, 2012 4:52 AM
RE: How to get Image Slide Show using Web Content in liferay6 Kumar Bonagiri May 14, 2012 1:03 AM
RE: How to get Image Slide Show using Web Content in liferay6 Vishal Panchal April 17, 2013 9:03 PM
RE: How to get Image Slide Show using Web Content in liferay6 Colton3310 Martin May 6, 2013 1:21 AM
RE: How to get Image Slide Show using Web Content in liferay6 Vishal Panchal May 6, 2013 9:06 PM
RE: How to get Image Slide Show using Web Content in liferay6 parikshit sharma May 6, 2013 2:28 AM
RE: How to get Image Slide Show using Web Content in liferay6 Colton3310 Martin May 6, 2013 7:50 PM
RE: How to get Image Slide Show using Web Content in liferay6 parikshit sharma May 7, 2013 12:39 AM
Juhi Kumari
How to get Image Slide Show using Web Content in liferay6
January 6, 2012 3:12 AM
Answer

Juhi Kumari

Rank: Expert

Posts: 347

Join Date: December 12, 2011

Recent Posts

Hi
I want image slide show using Web Content in liferay6, but don't know how to achieve this. Just like in liferay.com home page.
If any idea plz share!!

Regards
Juhi
Deepak R
RE: How to get Image Slide Show using Web Content in liferay6
January 6, 2012 5:03 AM
Answer

Deepak R

Rank: New Member

Posts: 10

Join Date: October 10, 2011

Recent Posts

Take a look at this site.
http://demo.marcofolio.net/bgimg_slideshow/
Developed in jquery.

Thank you,
Deepak
Anonymous
RE: How to get Image Slide Show using Web Content in liferay6
January 6, 2012 11:33 AM
Answer

Anonymous

download the web content hook from liferay-plugins repository in there it has a carousel

Structure
 1<root>
 2    <dynamic-element name='duration' type='list' index-type='' repeatable='false'>
 3        <meta-data>
 4            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
 5            <entry name="required"><![CDATA[false]]></entry>
 6            <entry name="instructions"><![CDATA[Select how long, in seconds, you would prefer to display an item before switching to the next slide]]></entry>
 7            <entry name="label"><![CDATA[Item Duration]]></entry>
 8            <entry name="predefinedValue"><![CDATA[]]></entry>
 9        </meta-data>
10        <dynamic-element name='1' type='1' index-type='' repeatable='false'></dynamic-element>
11        <dynamic-element name='2' type='2' index-type='' repeatable='false'></dynamic-element>
12        <dynamic-element name='3' type='3' index-type='' repeatable='false'></dynamic-element>
13        <dynamic-element name='4' type='4' index-type='' repeatable='false'></dynamic-element>
14        <dynamic-element name='5' type='5' index-type='' repeatable='false'></dynamic-element>
15        <dynamic-element name='6' type='6' index-type='' repeatable='false'></dynamic-element>
16        <dynamic-element name='7' type='7' index-type='' repeatable='false'></dynamic-element>
17        <dynamic-element name='8' type='8' index-type='' repeatable='false'></dynamic-element>
18        <dynamic-element name='9' type='9' index-type='' repeatable='false'></dynamic-element>
19        <dynamic-element name='10' type='10' index-type='' repeatable='false'></dynamic-element>
20    </dynamic-element>
21    <dynamic-element name='height' type='text' index-type='' repeatable='false'>
22        <meta-data>
23            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
24            <entry name="required"><![CDATA[true]]></entry>
25            <entry name="instructions"><![CDATA[This defines the height of the carousel, in pixels(px). Do not add "px" at the end of the value]]></entry>
26            <entry name="label"><![CDATA[Height]]></entry>
27            <entry name="predefinedValue"><![CDATA[]]></entry>
28        </meta-data>
29    </dynamic-element>
30    <dynamic-element name='width' type='text' index-type='' repeatable='false'>
31        <meta-data>
32            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
33            <entry name="required"><![CDATA[true]]></entry>
34            <entry name="instructions"><![CDATA[This defines the width of the carousel, in pixels(px). Do not add "px" at the end of the value]]></entry>
35            <entry name="label"><![CDATA[Width]]></entry>
36            <entry name="predefinedValue"><![CDATA[]]></entry>
37        </meta-data>
38    </dynamic-element>
39    <dynamic-element name='content' type='text_area' index-type='text' repeatable='true'>
40        <meta-data>
41            <entry name="displayAsTooltip"><![CDATA[false]]></entry>
42            <entry name="required"><![CDATA[true]]></entry>
43            <entry name="instructions"><![CDATA[This is the content of this slide. To create more slides, click on the " " button]]></entry>
44            <entry name="label"><![CDATA[content]]></entry>
45            <entry name="predefinedValue"><![CDATA[]]></entry>
46        </meta-data>
47    </dynamic-element>
48</root>


Template

 1#set ($contentId = $reserved-article-id.getData())
 2#set ($contentClass = "multiple-items-" + $contentId + "-carousel")
 3
 4<style type="text/css" media="screen">
 5    #$contentClass {
 6        height: $height.getData()px;
 7        position: relative;
 8        width: $width.getData()px;
 9    }
10
11    #$contentClass .carousel-item {
12        height: $height.getData()px;
13        overflow: hidden;
14        width: $width.getData()px;
15        position: absolute;
16        top: 0;
17    }
18</style>
19
20<div id="$contentClass">
21    #foreach ($item in $content.getSiblings())
22        <div class="carousel-item">
23            $item.getData()
24        </div>
25    #end
26</div>
27
28<script type="text/javascript">
29    AUI().ready(
30    'aui-carousel',
31    function(A) {
32        var component = new A.Carousel(
33            {
34                activeIndex: 'rand',
35                contentBox: '#$contentClass',
36                height: $height.getData(),
37                intervalTime: $duration.getData(),
38                width: $width.getData()
39            }
40        )
41        .render();
42    });
43</script>
Juhi Kumari
RE: How to get Image Slide Show using Web Content in liferay6
January 8, 2012 10:50 PM
Answer

Juhi Kumari

Rank: Expert

Posts: 347

Join Date: December 12, 2011

Recent Posts

Hi Bradley,

Thanks for response.
I tried this but only first image is displaying. I want all images should display like slidshow.

Regards
Juhi
Deepak R
RE: How to get Image Slide Show using Web Content in liferay6
January 8, 2012 11:33 PM
Answer

Deepak R

Rank: New Member

Posts: 10

Join Date: October 10, 2011

Recent Posts

Great. Working perfectly. Previously I had done image slider using custom portlet. But this one is so easy, also user can easily change image if needs to.

Thank you,
Deepak
Juhi Kumari
RE: How to get Image Slide Show using Web Content in liferay6
January 9, 2012 12:47 AM
Answer

Juhi Kumari

Rank: Expert

Posts: 347

Join Date: December 12, 2011

Recent Posts

Hi Bradley,

I found my mistake, now its working fine. Thanks a lot.

Regards
Juhi
Lanre Ogunbayo
RE: How to get Image Slide Show using Web Content in liferay6
February 9, 2012 3:31 PM
Answer

Lanre Ogunbayo

Rank: New Member

Posts: 2

Join Date: November 12, 2011

Recent Posts

Hello Juhi,
What was your mistake? I'm stuck on the first image...I suspect I've made the same mistake but I can't figure it out..
Thanks
Lanre Ogunbayo
RE: How to get Image Slide Show using Web Content in liferay6
February 9, 2012 4:19 PM
Answer

Lanre Ogunbayo

Rank: New Member

Posts: 2

Join Date: November 12, 2011

Recent Posts

Aha...found my mistake too!
Ben Chapman
RE: How to get Image Slide Show using Web Content in liferay6
February 10, 2012 10:42 AM
Answer

Ben Chapman

Rank: New Member

Posts: 23

Join Date: March 7, 2011

Recent Posts

Bradley,

Sorry, but I'm just not quite getting something here. The text that would be input in structure looks like the "alt" text or no image text. Is that true? In looking at the structure and template I don't see any reference to an image file, which led me to believe that the image would be located in the CSS (this seems to be how liferay does it at liferay.com). However, that doesn't see very end-user friendly and the script doesn't seem to be creating uniquely named entries in the classes anyway.

I must just not be getting something very fundamental. Could you point me in the right direction? Assume that we have a set of images image1.png, image2.png, and image3.png. How would I reference them?

Thank you for any guidance and sorry to be so clueless. We're using 6.0 EE.

Ben
Ben Chapman
RE: How to get Image Slide Show using Web Content in liferay6
February 10, 2012 12:39 PM
Answer

Ben Chapman

Rank: New Member

Posts: 23

Join Date: March 7, 2011

Recent Posts

I'm responding to my own post only because the answer was very obvious, but maybe it will help someone else in the future. Once you have configured the template and structure as above, create a new web content element. Do not put any text into the HTML area, just click on the image icon, then click on browse server and browse to the image that you want to use as the banner in the slider/carousel. Repeat as required.

I was over-thinking the issue.

Sorry for posting such a silly question!
Nagarjuna Gottimukkala
RE: How to get Image Slide Show using Web Content in liferay6
May 11, 2012 4:52 AM
Answer

Nagarjuna Gottimukkala

Rank: New Member

Posts: 23

Join Date: May 6, 2012

Recent Posts

Hi,
I am new to liferay. I am using liferay 6.1. i am using liferay plugins sdk. can you please tell me in which files i need to add this code?

Thanking You,
Nagarjuna Gottimukkala.
Kumar Bonagiri
RE: How to get Image Slide Show using Web Content in liferay6
May 14, 2012 1:03 AM
Answer

Kumar Bonagiri

Rank: Junior Member

Posts: 35

Join Date: April 22, 2012

Recent Posts

Hi Bradley,

From where i have to download the web content hook from liferay-plugins repository in there it has a carousel

please provide me the URL and the Plugin name

Regards,
Kumar
Vasanth Kumar
RE: How to get Image Slide Show using Web Content in liferay6
August 6, 2012 10:26 PM
Answer

Vasanth Kumar

Rank: New Member

Posts: 8

Join Date: July 9, 2012

Recent Posts

Deepak R:
Great. Working perfectly. Previously I had done image slider using custom portlet. But this one is so easy, also user can easily change image if needs to.

Thank you,
Deepak



Hi Deepak/Juhi/Lanre,

I am trying to implement portlet with images(need to get from database, physical path should be provided in Demoticon having Hyperlink & video image. On click of Image, description/content should be opened in new portlet.

Can you plz share the image slide show stuff which you guys tried with steps.

I am using liferay6.1ce.

Appreciate you help !!!

Thanks
Vasanth
Matthew Dixon
RE: How to get Image Slide Show using Web Content in liferay6
September 3, 2012 4:58 AM
Answer

Matthew Dixon

Rank: New Member

Posts: 7

Join Date: July 19, 2012

Recent Posts

Just to confirm that Ben's description above works fine in 6.1 CE. To clarify, you

1) set up the template code above as a web content template
2) set up the structure code above as a web content structure
3) create a web content item into which you add the images you want to slideshow
4) display that web content item using the web content portlet.

The only other thing is that each image is added into a separate "slide" in the web content item. So for the second and subsequent images, you have to click on the green plus sign above and to the right of the rich text editor, adding another blank slide (with its own editor) into which you add the image.

Matt
Marco Faustinelli
RE: How to get Image Slide Show using Web Content in liferay6
September 11, 2012 11:39 AM
Answer

Marco Faustinelli

Rank: New Member

Posts: 1

Join Date: September 10, 2012

Recent Posts

Lanre Ogunbayo:
Aha...found my mistake too!


Neither of you writes down what the mistake was like.

In my case I discovered that the content was saved with just one image. I am sure I had put all of them inside, but certainly something went wrong during the save.

Cheers,
Mradul Ashok
RE: How to get Image Slide Show using Web Content in liferay6
October 29, 2012 4:16 AM
Answer

Mradul Ashok

Rank: New Member

Posts: 3

Join Date: October 28, 2012

Recent Posts

Marco Faustinelli:
Lanre Ogunbayo:
Aha...found my mistake too!


Neither of you writes down what the mistake was like.

In my case I discovered that the content was saved with just one image. I am sure I had put all of them inside, but certainly something went wrong during the save.

Cheers,



Hey but in my liferay 6.0.6, after creating the template and then the structure, when i go to use them in desired web-content its not reading the template. that i created from control panel, however structure is being read, please help me out asap.

Regards-
Mradul
Nikhil Nishchal
RE: How to get Image Slide Show using Web Content in liferay6
October 29, 2012 4:29 AM
Answer

Nikhil Nishchal

Rank: Regular Member

Posts: 136

Join Date: June 21, 2012

Recent Posts

Hello Marco,
Did u choose structure while creating template.
>create structure
>create template (here u can choose the structure for which template is created)
and then at the time of creating webontent when you, choose structure.
You will get either specific template selected or option to select them (in case of multiple template for same structure ).
Mradul Ashok
RE: How to get Image Slide Show using Web Content in liferay6
October 29, 2012 5:26 AM
Answer

Mradul Ashok

Rank: New Member

Posts: 3

Join Date: October 28, 2012

Recent Posts

Hey but i am not getting structure choosing facility while creating template in LIferay 6.0.6

Please help....
Nikhil Nishchal
RE: How to get Image Slide Show using Web Content in liferay6
October 29, 2012 5:32 AM
Answer

Nikhil Nishchal

Rank: Regular Member

Posts: 136

Join Date: June 21, 2012

Recent Posts

In case of template creation there is button below description for "Structure ".
clicking on that u can choose structure from opened popup window.
Mradul Ashok
RE: How to get Image Slide Show using Web Content in liferay6
October 29, 2012 7:24 AM
Answer

Mradul Ashok

Rank: New Member

Posts: 3

Join Date: October 28, 2012

Recent Posts

Hey thanks for responding soon, but i am still stuck that my image show is running but images are not being displayed, i have browse them n the web content, but when i go to see them after publishing, i can't see them, can i be helped somemore.
Vishal Panchal
RE: How to get Image Slide Show using Web Content in liferay6
April 17, 2013 9:03 PM
Answer

Vishal Panchal

Rank: Expert

Posts: 280

Join Date: May 20, 2012

Recent Posts

Hello Bradley ,

This is the easiest one.
Made my day.emoticon


Thanks You,
Vishal
Colton3310 Martin
RE: How to get Image Slide Show using Web Content in liferay6
May 6, 2013 1:21 AM
Answer

Colton3310 Martin

Rank: New Member

Posts: 4

Join Date: April 26, 2013

Recent Posts

Which one is the easiest one?
parikshit sharma
RE: How to get Image Slide Show using Web Content in liferay6
May 6, 2013 2:28 AM
Answer

parikshit sharma

Rank: Junior Member

Posts: 48

Join Date: October 18, 2012

Recent Posts

Hi,
How could I make images slide from left to right or vice-versa in slide show?
Colton3310 Martin
RE: How to get Image Slide Show using Web Content in liferay6
May 6, 2013 7:50 PM
Answer

Colton3310 Martin

Rank: New Member

Posts: 4

Join Date: April 26, 2013

Recent Posts

Maybe it has the option. You should find it our.
Vishal Panchal
RE: How to get Image Slide Show using Web Content in liferay6
May 6, 2013 9:06 PM
Answer

Vishal Panchal

Rank: Expert

Posts: 280

Join Date: May 20, 2012

Recent Posts

Colton3310 Martin:
Which one is the easiest one?


Hi Colton,

The easiest one here is a imageslide which you will find on liferay's home page.
As per Bradley's privious post we have a readymade structure and template for this, which is also available on liferay called carousel (download the web content hook from liferay-plugins repository).

After deploying this hook you will have one structure and template available in your webcontent , apply this you will able to select your desired images , size in which you want to display a slider and a time interval of image change.

Further you will be able to download this hook from liferay and also as an alternative you may download it from http://www.liferay.com/marketplace/-/mp/application/18455438

Go through this link for more explanation.
http://blogs.xtivia.com/home/-/blogs/carousel-portlet

Please feel free to ask if you need any more information in same regard.emoticon

Have a nice day.!

Best Regards,
Vishal Panchal
parikshit sharma
RE: How to get Image Slide Show using Web Content in liferay6
May 7, 2013 12:39 AM
Answer

parikshit sharma

Rank: Junior Member

Posts: 48

Join Date: October 18, 2012

Recent Posts

Colton3310 Martin:
Maybe it has the option. You should find it our.


Didn't find such option ..that's why posted the comment,if you have any then share it ......