Liferay 6.2 Web Content Call for action Structure and Template

Call for action Structure and Template 

Structure:

<root available-locales="en_US" default-locale="en_US">
<dynamic-element dataType="image" fieldNamespace="wcm" indexType="keyword" localizable="true" name="add_image" readOnly="false" repeatable="true" required="false" showLabel="true" type="wcm-image" width="">
<dynamic-element dataType="string" indexType="keyword" localizable="true" name="head" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Title]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
<dynamic-element dataType="string" indexType="keyword" localizable="true" name="image_url" readOnly="false" repeatable="false" required="false" showLabel="true" type="text" width="small">
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Redirection Link]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>
<dynamic-element dataType="html" fieldNamespace="ddm" indexType="keyword" localizable="true" name="desc" readOnly="false" repeatable="false" required="false" showLabel="true" type="ddm-text-html" width="small">
<meta-data locale="en_US">
<entry name="label">
<![CDATA[Description]]>
</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 Upload]]>
</entry>
<entry name="predefinedValue">
<![CDATA[]]>
</entry>
<entry name="tip">
<![CDATA[]]>
</entry>
</meta-data>
</dynamic-element>

</root>

Template :

                      <style>
.image-container a {
color: #fff !important;
text-decoration:none !important;
}
.image-container .span4 {
margin-left: 5px !important;
}
.tab-disc { margin: 7px !important;
font-size: 16px;
line-height: 22px;
}
   .call {text-align:center;}
.call h2 {
background-color: #ececec;
color: #096ba0;
font-size: 18px;
font-weight: 500;
padding: 30px 20px;
margin: 0 !important;
font-family: "Lato-Regular";
line-height: 4px !important;
}
.call .desc > p {

font-size: 15px;
padding: 2px 20px 25px;
margin: 40px 0 0 !important;
font-family: "Lato-Regular";

}
.desc{background-color: #ececec;
color: #096ba0;}
.call:hover .desc{
background-color:#096BA0 !important;
color:#fff !important;
}
.call:hover h2{
background-color:#E62027;
color:#fff;
}
.call > img {height: 160px;width: 280px;}


</style>
<div id="listings-wrapper" class="image-container">
#if (!$add_image.getSiblings().isEmpty())
<ul id="calls">
#foreach ($currentImage in $add_image.getSiblings())
        #if($velocityCount<=4)
     
        <li class="span4">
       
            <a href="$currentImage.image_url.getData()" target="_blank">
         
                <div class="call">
                  <h2 class="tab-head">$currentImage.head.getData()</h2>
<img alt="Image Upload" src="$currentImage.getData()" />
                    <div class="desc">
                               
                    <p class="tab-head">$stringUtil.shorten($currentImage.desc.getData(), 50)</p>
                    </div>
                     </div>
                </a>
            </li>
         
        #end
  #end
 </ul>
#end

</div>