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
- Create Structure
- Create Template and associate with Respective Structure
- Create web content by using Template
- 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
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
Web Clients Follow Their Individual Natural Inclination: Most clients check the website page as opposed to perusing line by line.Webdesign
ReplyDeleteEasily, 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
ReplyDeleteTwo 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
ReplyDeletethis blog was really great, never seen a great blog like this before. i think im gonna share this to my friends.. iphone 8 cases
ReplyDeleteAdmiring the time and effort you put into your blog and detailed information you offer!.. Atlanta Jeweler
ReplyDeleteI 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
ReplyDeleteI must say, I thought this was a pretty interesting read when it comes to this topic. Liked the material. . . . . front line workers
ReplyDeleteIt'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
ReplyDeleteVery nice article. I enjoyed reading your post. very nice share. I want to twit this to my followers. Thanks !. POP
ReplyDeleteI'm happy to see the considerable subtle element here!. Smart products electronics sale ios android
ReplyDeleteI 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
ReplyDeleteThanks 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
ReplyDeletegood post. Ne’er knew this, thankyou for letting me know. san fran design firms
ReplyDeleteA 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
ReplyDeleteOutstanding post, you have pointed out some good details , I likewise conceive this s a very good website. design agencies sf
ReplyDeleteI adore your wp web template, wherever would you obtain it through? design agencies sf
ReplyDeleteThanks 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
ReplyDeleteHey, you?re the goto expert. Thanks for haingng out here. phone mockup
ReplyDeleteGreat blog post, I’ve bookmarked this page and have a feeling I’ll be returning to it often. ipad photoshop
ReplyDeleteRecognizing something of all and every little thing of one thing? ipad psd
ReplyDeleteThanks for the blog loaded with so many information. Stopping by your blog helped me to get what I was looking for. hyip templates
ReplyDeleteYou 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
ReplyDeleteI’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
ReplyDeleteCouple 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
ReplyDeleteI 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
ReplyDeleteNice 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
ReplyDeleteOn the off chance that your organization has a site, clients can investigate the most recent items the entrepreneur's organization offers. Webdesignlab
ReplyDeleteExcellent article. Very interesting to read. I really love to read such a nice article. Thanks! keep rocking. trafficize software
ReplyDeleteGreat 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
ReplyDeleteI 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
ReplyDeleteIndividuals 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
ReplyDeleteI 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
ReplyDeleteJust 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
ReplyDeleteResponsive web design has gotten the go-to answer for organizations who need an easy to use interface and higher client maintenance. Webdesign
ReplyDeleteEfficiently written information. It will be profitable to anybody who utilizes it, counting me. Keep up the good work. I'm looking forward for more posts. Thanks Workmanship
ReplyDeleteIt denotes all sites on a 100-point, logarithmic scale (the higher you climb, the harder it gets).Webdesign bureau
ReplyDeleteJust 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
ReplyDeleteThis 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
ReplyDeletebuy 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.
ReplyDeleteMua vé máy bay tại Aivivu, tham khảo
ReplyDeletegia ve may bay di my
mua vé máy bay pleiku đi sài gòn
vé máy bay sài gòn ra hà nội
giá vé máy bay đi đà lạt khứ hồi
có chuyến bay từ mỹ về việt nam chưa
taxi sân bay rẻ
combo quy nhơn phú yên