Message Boards
Liferay 7.2 CE Custom Carousel Template
Benjamin Lawson, modified 3 Years ago.
Liferay 7.2 CE Custom Carousel Template
New Member Posts: 5 Join Date: 6/15/20 Recent Posts
Hi everyone,
I've been working on making a custom carousel for a website and it was functioning at first. I wanted to add more customization options from the web content portlet so I added a structure with one repeatable field that incorporated all the customization options. These options are the text field: Carousel Image (which houses all the other options), the text field: Image Tagline, the text field: Image paragraph, the image field: Image, and the text field: Image URL. I am able to get it to display if I only use one item but when I add multiple items, nothing appears. My template code is below.
Thanks!
~Ben Lawson
I've been working on making a custom carousel for a website and it was functioning at first. I wanted to add more customization options from the web content portlet so I added a structure with one repeatable field that incorporated all the customization options. These options are the text field: Carousel Image (which houses all the other options), the text field: Image Tagline, the text field: Image paragraph, the image field: Image, and the text field: Image URL. I am able to get it to display if I only use one item but when I add multiple items, nothing appears. My template code is below.
Any suggestions or errors that I am not seeing?<style> #carousel-<@portlet.namespace /> .aspect-ratio-custom { padding-bottom: ${AspectRatio.getData()}; } @media (max-width: 799px) { #carousel-<@portlet.namespace /> .aspect-ratio-custom { padding-bottom: 67%; } } </style> <#if CarouselImage.getSiblings()?has_content> <section class="carousel-container"> <div class="carousel slide carousel-fade" data-ride="carousel" id="carousel-<@portlet.namespace />"> <ol class="carousel-indicators hidden-sm hidden-xs"> <#list CarouselImage.getSiblings() as cur_img> <li class="${(cur_img?counter == 1)?then('active', '')}" data-slide-to="${(cur_img?counter == 1)?then(0, (cur_img?counter - 1))}" data-target="#carousel-<@portlet.namespace />"></li> <!--#list--> </ol> <#list CarouselImage.getSiblings() as cur_CarouselImage> <#if cur_CarouselImage.image.getData()?? && cur_CarouselImage.image.getData() != ""> <div class="carousel-inner" role="listbox"> <div class="${(cur_CarouselImage?counter == 1)?then('active', '')} carousel-item"> <div class="aspect-ratio aspect-ratio-custom aspect-ratio-middle"> <span class="carousel-caption d-md-block"> <#if cur_CarouselImage.ImageTagline.getData()!= ""> <h5> ${cur_CarouselImage.ImageTagline.getData()} </h5> <!--#if--> <#if cur_CarouselImage.ImageParagraph.getData()!= ""> <p> ${cur_CarouselImage.ImageParagraph.getData()} </p> <!--#if--> <#if cur_CarouselImage.ImageURL.getData()!= ""> <button type="button" class="btn btn-outline-primary"> <a href="${cur_CarouselImage.ImageURL.getData()}">SEE MORE</a> </button> <!--#if--> </span> <img class="d-block w-100 vh-100 h-auto d-inline-block" alt="${cur_CarouselImage.image.getAttribute(" alt")}" data-fileentryid="${cur_CarouselImage.image.getAttribute(" fileEntryId")}" src="${cur_CarouselImage.image.getData()}"> </div> </div> </div> <!--#if--> <!--#list--> <a class="carousel-control-prev" href="#carousel-<@portlet.namespace />" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#carousel-<@portlet.namespace />" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </section> <!--#if-->
Thanks!
~Ben Lawson
Mohammed Yasin, modified 3 Years ago.
RE: Liferay 7.2 CE Custom Carousel Template
Liferay Master Posts: 591 Join Date: 8/8/14 Recent Posts
Hi ,Can you please share structure code , it might be easier to understand the template
Benjamin Lawson, modified 3 Years ago.
RE: Liferay 7.2 CE Custom Carousel Template
New Member Posts: 5 Join Date: 6/15/20 Recent Posts
Here is the structure for the template:
``{
"availableLanguageIds": [
"en_US"
],
"defaultLanguageId": "en_US",
"fields": [
{
"label": {
"en_US": "Aspect Ratio"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "string",
"indexType": "keyword",
"localizable": true,
"name": "AspectRatio",
"readOnly": false,
"repeatable": false,
"required": false,
"showLabel": true,
"type": "text"
},
{
"label": {
"en_US": "Time Interval"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "number",
"fieldNamespace": "ddm",
"indexType": "keyword",
"localizable": true,
"name": "TimeInterval",
"readOnly": false,
"repeatable": false,
"required": false,
"showLabel": true,
"type": "ddm-number"
},
{
"label": {
"en_US": "Carousel Image"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "string",
"indexType": "keyword",
"localizable": true,
"name": "CarouselImage",
"readOnly": false,
"repeatable": true,
"required": false,
"showLabel": true,
"type": "text",
"nestedFields": [
{
"label": {
"en_US": "Image Tagline"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "string",
"indexType": "keyword",
"localizable": true,
"name": "ImageTagline",
"readOnly": false,
"repeatable": false,
"required": false,
"showLabel": true,
"type": "text"
},
{
"label": {
"en_US": "Image Paragraph"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "string",
"indexType": "keyword",
"localizable": true,
"name": "ImageParagraph",
"readOnly": false,
"repeatable": false,
"required": false,
"showLabel": true,
"type": "text"
},
{
"label": {
"en_US": "Image"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "image",
"fieldNamespace": "ddm",
"indexType": "text",
"localizable": true,
"name": "image",
"readOnly": false,
"repeatable": false,
"required": false,
"showLabel": true,
"type": "ddm-image"
},
{
"label": {
"en_US": "Image URL"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "string",
"indexType": "keyword",
"localizable": true,
"name": "ImageURL",
"readOnly": false,
"repeatable": false,
"required": false,
"showLabel": true,
"type": "text"
}
]
}
]
}``
``{
"availableLanguageIds": [
"en_US"
],
"defaultLanguageId": "en_US",
"fields": [
{
"label": {
"en_US": "Aspect Ratio"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "string",
"indexType": "keyword",
"localizable": true,
"name": "AspectRatio",
"readOnly": false,
"repeatable": false,
"required": false,
"showLabel": true,
"type": "text"
},
{
"label": {
"en_US": "Time Interval"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "number",
"fieldNamespace": "ddm",
"indexType": "keyword",
"localizable": true,
"name": "TimeInterval",
"readOnly": false,
"repeatable": false,
"required": false,
"showLabel": true,
"type": "ddm-number"
},
{
"label": {
"en_US": "Carousel Image"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "string",
"indexType": "keyword",
"localizable": true,
"name": "CarouselImage",
"readOnly": false,
"repeatable": true,
"required": false,
"showLabel": true,
"type": "text",
"nestedFields": [
{
"label": {
"en_US": "Image Tagline"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "string",
"indexType": "keyword",
"localizable": true,
"name": "ImageTagline",
"readOnly": false,
"repeatable": false,
"required": false,
"showLabel": true,
"type": "text"
},
{
"label": {
"en_US": "Image Paragraph"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "string",
"indexType": "keyword",
"localizable": true,
"name": "ImageParagraph",
"readOnly": false,
"repeatable": false,
"required": false,
"showLabel": true,
"type": "text"
},
{
"label": {
"en_US": "Image"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "image",
"fieldNamespace": "ddm",
"indexType": "text",
"localizable": true,
"name": "image",
"readOnly": false,
"repeatable": false,
"required": false,
"showLabel": true,
"type": "ddm-image"
},
{
"label": {
"en_US": "Image URL"
},
"predefinedValue": {
"en_US": ""
},
"style": {
"en_US": ""
},
"tip": {
"en_US": ""
},
"dataType": "string",
"indexType": "keyword",
"localizable": true,
"name": "ImageURL",
"readOnly": false,
"repeatable": false,
"required": false,
"showLabel": true,
"type": "text"
}
]
}
]
}``
Mohammed Yasin, modified 3 Years ago.
RE: Liferay 7.2 CE Custom Carousel Template
Liferay Master Posts: 591 Join Date: 8/8/14 Recent Posts
Hi,
I have build a carousel from the structure u have shared , i have referred carousel. You can have a look and update it accordingly
I have build a carousel from the structure u have shared , i have referred carousel. You can have a look and update it accordingly
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script [url="http://src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js""></script>]src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">[/url]
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<#list CarouselImage.getSiblings() as cur_img>
<li class="${(cur_img?counter == 1)?then('active', '')}" data-slide-to="${(cur_img?counter == 1)?then(0, (cur_img?counter - 1))}" data-target="#myCarousel"></li>
<!--#list-->
</ol>
<div class="carousel-inner">
<#list CarouselImage.getSiblings() as cur_img>
<div class="item ${(cur_img?counter == 1)?then('active', '')}">
<span class="carousel-caption">
<#if cur_img.ImageTagline.getData()!= "">
<h5>
${cur_img.ImageTagline.getData()}
</h5>
<!--#if-->
<#if cur_img.ImageParagraph.getData()!= "">
<p>
${cur_img.ImageParagraph.getData()}
</p>
<!--#if-->
<#if cur_img.ImageURL.getData()!= "">
<button type="button" class="btn btn-outline-primary">
<a href="${cur_img.ImageURL.getData()}">SEE MORE</a>
</button>
<!--#if-->
</span>
<img alt="${cur_img.image.getAttribute(" alt")}" data-fileentryid="${cur_img.image.getAttribute(" fileEntryId")}" src="${cur_img.image.getData()}">
</div>
<!--#list-->
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
Benjamin Lawson, modified 3 Years ago.
RE: Liferay 7.2 CE Custom Carousel Template
New Member Posts: 5 Join Date: 6/15/20 Recent Posts
Thank you so much for your help! I was able to figure out what needed to be corrected and get my custom carousel working again!