Dynamic configation of web content in Liferay theme

Aim: If we want to display single web content across your portal.Please follow below steps.

Step1: change dtd 6.0.0 to 6.1.0 these lines in your theme liferay-look-and-feel.xml

<!DOCTYPE look-and-feel PUBLIC "-//Liferay//DTD Look and Feel 6.1.0//EN" "http://www.liferay.com/dtd/liferay-look-and-feel_6_1_0.dtd">

Then, change the theme like, IF you did not upgrade dtd it will through error 

<theme id="your_themeid" name="your themename">

<settings>

<setting configurable="true" key="header_throughaday" type="text"></setting>

</settings>

</theme>

Step2: Add these lines in any of your vm files like init_custom.vm,portal_normal.vm, Bold letter are your custom variables you can change.

#if ($theme_settings.header_throughaday)

#set ($header_section = $journalContentUtil.getContent($group_id, $theme_settings.header_throughaday, null, "$locale", $theme_display))

#end

Step3: Then added your varibales into your placeholder div

 $header_section

Step4: Then give your article id in look and feel section.

Step5: Write a css in your custom.css for more styles for your content .

If we follow these step we will avoid this problem:

we embed web content in theme level it will change for every page or we need to select that web content for all pages and also we need take care portlet borders,portlet body and all other default css and div.

AUI Carousel using WebContent with Repeatable Fields in Liferay

AUI Carousel using WebContent Structure/Template

AUI Carousel using WebContent Structure/Template with Repeatable Fields

Step 1 : Create a structure click Lunch editor its open a popup window paste this

<?xml version="1.0"?>

<root>
	<dynamic-element name="image" type="document_library" index-type="" repeatable="true"/>
</root>
 

Step 2 : Create a Template click Lunch editor its open a popup window paste this


<div id="carousel_1">
#foreach($img in $image.getSiblings())
<div class="imagediv" style="background: url($img.getData());"></div>    
#end
</div>
<script type="text/javascript" charset="utf-8"> AUI().ready('aui-carousel', function(A) {
var component = new A.Carousel(
{ intervalTime: 5, contentBox: '#carousel_1', activeIndex: 'rand', height: 214}
)
.render();
});
</script>

.imagediv {
	width: 100%;
	height: 214px;
	display: inline;
} 

Step 1 : Use this structure and template in web content portlet., You will find the add button if you click the button the filed will repeat one. you could delete this filed as click delete button to delete the filed.