Thursday, June 26, 2014

Liferay 6.2 Web Content AUI Carousel Structure and Template / Image Slide Show

Introduction:

Liferay have very good content management system we can design and publish content in the web page very easy.

Along with that it’s also have structures and templates feature so that we can design common designs as structures and templates then we can reuse it many places with different data.

Same design if we want uses many places with different data then we will use structures and templates.

Liferay 6.2 structure templates have very user-friendly design to create structures and templates rather than liferay 6.1

But conceptually basic idea is same for liferay 6.2 and Liferay 6.1 but way of using they make simpler in Liferay 6.2 with very good User Interface.

Liferay 6.1 we have used velocity for coding in templates but in liferay 6.2 they have used free marker templates in addition velocity while designing templates and they have given very good UI and Template editor so that we can see all variables with respect to Structure which we have used for template.


Follow above tutorial then you can understand more about Structures and Templates in liferay web content. Same thing but way of usage is different in Liferay 6.2.


Objective:

We are going to create Carousel Image Slide show in website.

We will use AUI Carousel to design image slide show in liferay and we will use Web content 
Structures and templates feature to implement Image Slide Show


Assumptions:
  • In the image slide show we have many images so we able to upload or use many images
  • We need Slide show width and Height it should be configurable.
  • We need to specify time interval to change images so it should be configurable.
  • Each slide image have hyperlink when we click it should go to respective page and links should be configurable.

To consider all above now we will design structure and template to design web content.

Steps
  1. Create Structure
  2. Create Template and associate with Respective Structure
  3. Create web content by using Template
  4. Using Web content

Before start this we need to login as Admin

Liferay have default super admin so we need to login into liferay portal by following credentials


User Name:  test@liferay.com
Password:     test


Following is login screen




Once login as Admin go to Admin >> Site Administration


Once you go to Site Administration select Content Panel there you can click on web content



Create Structure

In the web content top navigation Manu you can see manage option menu there you can select 
structure link as follows




Once click on Structures then window pop up will be launch there you can enter your structure name and description


The following is Structure Creation Screen


In the bottom of pop up window you can see User Interface Design to Design Structure as follows



We have many controls so we can use all elements and we can design. Now we already have code for Image Slide show Structure so you simply click on source and in editor use following source code.


<root available-locales="en_US" default-locale="en_US">
<dynamic-element dataType="image" fieldNamespace="wcm" indexType="keyword" name="images" readOnly="false" repeatable="true" required="false" showLabel="true" type="wcm-image" width="">
<dynamic-element dataType="link-to-page" fieldNamespace="ddm" indexType="keyword" name="imagelink" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-link-to-page" width="small">
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Link to Page]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Image]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
<dynamic-element dataType="number" fieldNamespace="ddm" indexType="keyword" name="containerwidth" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-number" width="small">
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Container Width]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
<dynamic-element dataType="number" fieldNamespace="ddm" indexType="keyword" name="containerhight" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-number" width="small">
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Container Hight]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
<dynamic-element dataType="number" fieldNamespace="ddm" indexType="keyword" name="intervaltime" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-number" width="small">
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Interval Time]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
</root>

The following screen after use source in editor



The following is Graphical view of Structure



Finally click on save button then your structure will be created


Finally close pop up window and go back to Web content Manage Screen

Create Template and associate with Respective Structure

Now we need create template and it will use above created structure. In the web content screen top navigation goes manage option menu there you can find Templates Link



Once we click on template then pop window will be open there we can see +Add to create new template.

Now we need to fill the name and description along with that we need select respective structure. In our case we already create structure i.e. Image Slide Show Structure we need to select that.

We already know we are using free market template so we need to select Language as Free Marker (ftl) and its default language, apart from that we can use velocity and XSLT



In the bottom of pop up you can see Template editor and its respective Structure variables /fields and other available variables was shown in left side.

In the structure we have used some fields all fields you can see left side as follows



We already have Free Marker Template code for Image Slide Show please use following code in Editor and save then template will be created.


<script>
AUI({ filter: 'raw' }).use('aui-carousel', function(A) {
new A.Carousel({
intervalTime:${intervaltime.getData()},
contentBox: '#myCarousel',
activeIndex:0,
height:${containerhight.getData()},
width:${containerwidth.getData()}
}).render();

});
</script>
<#if images.getSiblings()?has_content>
<div id="myCarousel">
<#list images.getSiblings() as cur_images>

<#if cur_images_index==0>
<a href="${cur_images.imagelink.getData()}">
<div class="carousel-item" style="background: url(${cur_images.getData()})width:${containerwidth.getData()}px; height:${containerhight.getData()}px;" class="carousel-item carousel-item-active";">
</div>
</a>
</#if>
<a href="${cur_images.imagelink.getData()}"> <div class="carousel-item" style="background: url(${cur_images.getData()});width:${containerwidth.getData()}px; height:${containerhight.getData()}px;" class="carousel-item""></div></a>
</#list>

</div>
</#if>



In the Template Design we use html and AUI Script to design template. And we will use stricture variable or fields to fill with dynamic content. These all design was made using Free Market Templates (FTL)

However use above template code in editor and finally save it then template will be create and it will be associated with one structure that is we created previously.

Note:

When we click in fields and variables in left side those will be added in the editor automatically where your cursor point in the editor. Templates editor is every flexible to code or design free marker templates in editor.

Each template should be associated with one structure and based in structure we need to code free market template to use structure variables and based on template design we will get input elements to design web content with dynamic data.

The following free marker template code in editor




Now finally save then your template will be created and it will be in the templates list as follows.



Now close pop up window and go back to web content screen.

Create web content by using Template

Well we are ready with Template and Structure and we will create web content using above template.

In the web content screen you can see +Add button option menu in the top navigation there you can see newly created template name that is Image Slide Show Template


Now you will get web content creation screen with selected template. We need to fill name for web content.

Based on template we need to fill the content and in our scenario we are using images element as repeatable so we can add more images by click + icon apposite to images file input element.

And we are using Height, Width and Interval we need to fill those values and it should be numbers and we can also select hyper link for each image


Once we fill the content in the web content template finally click on publish button then content will be available to use and it will be shown in web content list.


Using Web Content

We have done all steps now the content will be available to use. We will use web content display portlet to display web content in the pages.

Navigate to desirable page where you simply drag and drop web content display portlet in the page.

In the admin mode you can see left side + Icon click on the you can get the toggle there in the applications tab you can select Web content Display Portlet simply click on Add Link then blank web content display portlet will be added to page.


In the blank web content display portlet you can see toggle control in the bottom.


You can click on Select Web content there you can see list of web content articles.



You can select and click on respective web content and finally save it then web content will be displayed in portlet.


For better look and feel remove border for portlet then you can see image slide show as follows.


When we login as admin bottom of web content display portlet you can see edit controls to edit content and template. We can add more images, change height, width of slide show and we change slide interval time.


Download Image Slide Show Structure and Template Source 


Environment:

Liferay IDE 2.x+Eclipse (Kepler) +Liferay Plugins SDK 6.2+Tomcat 7.x Liferay Portal Bundle

Deployment and its Working.

You can source code in the template and Structure as said above in your portal.

I also given web content export file as lar. You simply drag and drop web content display portlet in the portlet configuration you can see export/import option and import downloaded lar file using file browses then web content will be created in your portal.

When we import lar file respective used template and structure will be created automatically.

Related Links



Author

87 comments :

  1. Web Clients Follow Their Individual Natural Inclination: Most clients check the website page as opposed to perusing line by line.Webdesign

    ReplyDelete
  2. Easily, the article is actually the best topic on this registry related issue. I fit in with your conclusions and will eagerly look forward to your next updates. website builder templates

    ReplyDelete
  3. Two full thumbs up for this magneficent article of yours. I've really enjoyed reading this article today and I think this might be one of the best article that I've read yet. Please, keep this work going on in the same quality. case mate

    ReplyDelete
  4. this blog was really great, never seen a great blog like this before. i think im gonna share this to my friends.. iphone 8 cases

    ReplyDelete
  5. Admiring the time and effort you put into your blog and detailed information you offer!.. Atlanta Jeweler

    ReplyDelete
  6. I have been searching to find a comfort or effective procedure to complete this process and I think this is the most suitable way to do it effectively. Registered dietitian

    ReplyDelete
  7. I must say, I thought this was a pretty interesting read when it comes to this topic. Liked the material. . . . . front line workers

    ReplyDelete
  8. It's really nice and meanful. it's really cool blog. Linking is very useful thing.you have really helped lots of people who visit blog and provide them usefull information. LED mini mirror

    ReplyDelete
  9. Very nice article. I enjoyed reading your post. very nice share. I want to twit this to my followers. Thanks !. POP

    ReplyDelete
  10. I'm happy to see the considerable subtle element here!. Smart products electronics sale ios android

    ReplyDelete
  11. I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often. buy instagram video views instant

    ReplyDelete
  12. Thanks for sharing excellent informations. Your web-site is very cool. I'm impressed by the details that you have on this web site. It reveals how nicely you perceive this subject. Bookmarked this web page, will come back for extra articles. You, my pal, ROCK! I found simply the information I already searched all over the place and simply couldn't come across. What a perfect web-site. san fran design firms

    ReplyDelete
  13. good post. Ne’er knew this, thankyou for letting me know. san fran design firms

    ReplyDelete
  14. A couple of months ago I discovered another website that talked in depth about this topic. I am glad you were able to shed some light on what’s really happening out there. Some webistes are overtly biased towards things like this. Where do you think the industry is going in response to this? ux agency san francisco

    ReplyDelete
  15. Outstanding post, you have pointed out some good details , I likewise conceive this s a very good website. design agencies sf

    ReplyDelete
  16. Thanks for taking the time to discuss this topic. I really appreciate it. I’ll stick a link of this entry in my blog. device mockup

    ReplyDelete
  17. Hey, you?re the goto expert. Thanks for haingng out here. phone mockup

    ReplyDelete
  18. Great blog post, I’ve bookmarked this page and have a feeling I’ll be returning to it often. ipad photoshop

    ReplyDelete
  19. Recognizing something of all and every little thing of one thing? ipad psd

    ReplyDelete
  20. You there, this is really good post here. Thanks for taking the time to post such valuable information. Quality content is what always gets the visitors coming. content writing samples

    ReplyDelete
  21. I’ve been searching for some decent stuff on the subject and haven't had any luck up until this point, You just got a new biggest fan!.. SEO Company Vancouver

    ReplyDelete
  22. Couple this with a simple item like not having a secure website with an SSL Certificate; either one will kill your chances of obtaining high ranking regardless of your diligence with creating good content. DuckDuckGo! Scraper

    ReplyDelete
  23. I admit, I have not been on this web page in a long time... however it was another joy to see It is such an important topic and ignored by so many, even professionals. I thank you to help making people more aware of possible issues. inventory template

    ReplyDelete
  24. Nice to be visiting your blog again, it has been months for me. Well this article that i’ve been waited for so long. I need this article to complete my assignment in the college, and it has same topic with your article. Thanks, great share. slide boards best seller

    ReplyDelete
  25. On the off chance that your organization has a site, clients can investigate the most recent items the entrepreneur's organization offers. Webdesignlab

    ReplyDelete
  26. Excellent article. Very interesting to read. I really love to read such a nice article. Thanks! keep rocking. trafficize software

    ReplyDelete
  27. Great job for publishing such a beneficial web site. Your web log isn’t only useful but it is additionally really creative too. email extractor pro reviews

    ReplyDelete
  28. I appreciate this article for the well-researched content and excellent wording. I got so interested in this material that I couldn’t stop reading. Your blog is really impressive. gmass extension

    ReplyDelete
  29. Individuals get more intrigued when there are genuine live individuals they can banter with as opposed to simply produced mechanized messages showing up consistently on their pages. SMM Panel

    ReplyDelete
  30. I havent any word to appreciate this post.....Really i am impressed from this post....the person who create this post it was a great human..thanks for shared this with us. getresponse review

    ReplyDelete
  31. Just saying thanks will not just be sufficient, for the fantasti c lucidity in your writing. I will instantly grab your rss feed to stay informed of any updates. Dogecoin free

    ReplyDelete
  32. Responsive web design has gotten the go-to answer for organizations who need an easy to use interface and higher client maintenance. Webdesign

    ReplyDelete
  33. It denotes all sites on a 100-point, logarithmic scale (the higher you climb, the harder it gets).Webdesign bureau

    ReplyDelete
  34. Just what I need! A course that would help me and my business know what is actually important in coming up with brand names. Would definitely recommend this! Email Spider

    ReplyDelete
  35. This is a good post. This post gives truly quality information. I’m definitely going to look into it. Really very useful tips are provided here. Thank you so much. Keep up the good works. content marketing for small businesses

    ReplyDelete
  36. buy tik tok followers Increase your exposure on social media! Check out our deals and buy Instagram Followers, Buy Youtube Subscribers, and more! Fast, cheap, and 24/7 Support.

    ReplyDelete
  37. In addition, blog entries are extraordinary approaches to associate with your clients and feature your skill. What's more, they can bend over as web-based media posts and substance for your bulletins. website development in pakistan

    ReplyDelete
  38. The significant thing is you have a committed segment on your website for posting ordinary, new substance.
    Best Elementor Themes

    ReplyDelete
  39. The writer of this web configuration article is a specialist web architects Melbourne. Go ahead and visit their site to study their administrations. website developer australia

    ReplyDelete
  40. Basic. You get your work done on them. Then, at that point, you begin posing inquiries and taking notes. There are a lot of web creators accessible. You need to go with the best on the grounds that, indeed, your web architect is generally your accomplice. You need to pick an architect that treats YOUR business appropriately. https://www.seoexpertindelhi.in/

    ReplyDelete
  41. Formats are not difficult to work with in light of the fact that they come prepared to use with all that needed to be completely utilitarian. With only a bit of piece of tweaking and personalization like adding logos, picking foundation tones and adding remarkable substance, an unmistakable website can be made to draw in intrigued web guests. https://www.sandeepmehta.co.in/affordable-seo-services-delhi/

    ReplyDelete
  42. This comment has been removed by the author.

    ReplyDelete
  43. You completed several nice points there. I did a search on the issue and found the majority of
    persons will go along with with your blog.부산오피

    ReplyDelete
  44. We generate the appreciation and success that your audiences expect from you. Get your hands on cost-friendly SEO without further delay. https://thewebgross.com/seo-services-delhi-india/.

    ReplyDelete
  45. Very informative article. Really looking forward to read more. Really Cool.upload stories to instagram from pc

    ReplyDelete
  46. New web design organizations are jumping up the entirety existing apart from everything else, except don't be deceived by glossy locales noisily broadcasting their astounding administrations.
    https://onohosting.com/

    ReplyDelete
  47. Magnificent overcom! My spouse and i would like to newbie whilst you modify your current web site, precisely how could my spouse and i signed up for the web site web site? ฟรีแลนซ์

    ReplyDelete
  48. SEOs have been utilizing a few advertising procedures to advance their organizations. topic cluster

    ReplyDelete
  49. At our organization we call these sites chose by a customer "models" and they can be important while making the look, feel and capacity of a site that will meet what the customer's vision for their task. There is nothing bad about adjusting a smart thought from one site to use all alone or taking motivation from one more site in the plan of your own. WordPress Website Development Services

    ReplyDelete
  50. You will actually want to peruse their previous undertakings. webagenturessen.de

    ReplyDelete
  51. Thanks for the blog loaded with so many information. Stopping by your blog helped me to get what I was looking for. Web designers Yorkshire

    ReplyDelete
  52. In the world of business development and branding, going digital is all the buzz. So just what is digital marketing and how can we use it to grow our businesses?
    posicionamiento web

    ReplyDelete
  53. Websites that heap quick are positioned higher in the internet searcher results. Guests need to have the option to see the site immediately, not look out for everything to stack. If a site stacks slow, it's logical guests will return to the pursuit and attempt an alternate site.websites for sale

    ReplyDelete
  54. Design matters because it can have a huge impact on the number of new visitors to your pages, these are people who have reached you through typing in a specific search criteria and decided to click on the link to your site.Web Development Agency

    ReplyDelete
  55. The emblematic procedure of clipping path is to veil the background of an image. The other procedure of clipping path is to alter a picture into any shape. Get More Info

    ReplyDelete
  56. Internet searcher Marketing (PPC and SEO)
    Internet searcher marketing implies welcoming expanded traffic to your organization on web indexes through paid pursuit bulletins or different advertisements just as normal inquiry acquired through SEO rehearses. jasa backlink

    ReplyDelete
  57. With a website developer, entrepreneurs pay a little month to month expense and don't need to stress over any of the additional charges. They can save money on the installment for the engineer and make changes to the plan as they're chipping away at it, without it costing any extra.https://sites.google.com/view/seoservicesindelhiindia

    ReplyDelete
  58. This is a wonderful propelling article. I am for all intents and purposes happy with your extraordinary work. You put genuinely very strong information. Keep it up. Blog. Wanting to scrutinizing your next post about buy tiktok accounts.

    ReplyDelete
  59. I just read this blog, it's very interesting and the content is very good kode remot tv akari

    ReplyDelete
  60. Thankfully this information is very helpfull and great Information, Please check this out! Slot jackpot terbesar

    ReplyDelete
  61. Thank you for the support and give me everythink knowledge
    game wik wik

    Wow, I will always support you
    slot online

    ReplyDelete
  62. You know your projects stand out of the herd. There is something special about them. It seems to me all of them are really brilliant! master888 casino

    ReplyDelete
  63. The all-famous free keyword tool that recommends you relevant keywords, showing the number of searches per month locally and globally. tools for serp checking

    ReplyDelete
  64. Layer Masking: Layer masking is one of the most popular image conversion methods that is used for more compound images where clipping path alone is not enough. This layer masking system contains a black and white layer mask that ensures the visibility or invisibility of an image or a part of it. The black and white layer mask is used to hide some part of an image or to make it visible, transparent, semi-transparent, or translucent. Image Clipping Service

    ReplyDelete
  65. it was a wonderful chance to visit this kind of site and I am happy to know. thank you so much for giving us a chance to have this opportunity.. Digital Agency Melbourne

    ReplyDelete
  66. I see the attractive point in this article and i really like your style how to write it down and make it simple but yet still straight foward to deliver your message, i am recently writing for Kapal Togel

    ReplyDelete
  67. one of the best blog and check this best seo agenc in Dubai
    https://www.si3.ae/seo-services-agency-dubai/

    ReplyDelete
  68. This is a site that provides the best information, don't forget to also visit our official website which provides various types of interesting information:

    ReplyDelete
  69. this blog is interesting, im happy to stop by this blog! Kampus terbaik di Jakarta

    ReplyDelete
  70. Your website offered us with valuable info to work on! bonanza88

    ReplyDelete
  71. thankyou the information is very helpful. slot online

    ReplyDelete
  72. I read that Post and got it fine and informative. pas77 slot

    ReplyDelete
  73. Your website offered us with valuable info to work on! pas77 slot

    ReplyDelete
  74. The more pixels the better the lucidity and wealth of the picture. https://jpg-compress.com

    ReplyDelete
  75. Thanks for your previous informative and important post and specially this post.
    Buy Google 5 Star Reviews

    ReplyDelete
  76. Express VPN Crack is utilized to enhance internet restrict to any network on earth. The VPN stands to the virtual non-public network.

    ReplyDelete
  77. We provide 100% US verified PayPal account, with 100% legal and active documents, such as unique email address, active mobile number, Social

    Buy Verified PayPal Accounts

    ReplyDelete
  78. Correspondence is another significant element that you might need to consider while pursuing a decision.
    clipping path service

    ReplyDelete
  79. Situated in Bangalore, India; Prologic is a youthful and dynamic Seaward innovation and Image Editing Administrations firm contribution computerized photograph editing administrations, photo pattern, photo renovation, photo improvement, photo correcting in addition to image reestablishing. clipping path company

    ReplyDelete
  80. At this stage, numerous Photoshop procedures are applied to process the photos and classify them under various kinds.
    ghost mannequin service

    ReplyDelete
  81. I am so glad that I found this article online. In change, I will direct you to this website that has helped me a lot in the past situs togel mawartoto

    ReplyDelete
  82. "AI-generated art is a fusion of human intention and machine execution." ai image video

    ReplyDelete
  83. so many cool information in this site! thank you  toto macau

    ReplyDelete

Recent Posts

Recent Posts Widget

Popular Posts