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.
<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>
&lt;#if CarouselImage.getSiblings()?has_content&gt;
<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">
&lt;#list CarouselImage.getSiblings() as cur_img&gt;
<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>
&lt;#list CarouselImage.getSiblings() as cur_CarouselImage&gt;
&lt;#if cur_CarouselImage.image.getData()?? &amp;&amp; cur_CarouselImage.image.getData() != ""&gt;
<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">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="carousel-caption d-md-block">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;#if cur_CarouselImage.ImageTagline.getData()!= ""&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${cur_CarouselImage.ImageTagline.getData()}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h5>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--#if-->
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;#if cur_CarouselImage.ImageParagraph.getData()!= ""&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${cur_CarouselImage.ImageParagraph.getData()}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--#if-->
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;#if cur_CarouselImage.ImageURL.getData()!= ""&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-outline-primary">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<a href="${cur_CarouselImage.ImageURL.getData()}">SEE MORE</a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--#if-->
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <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()}">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp; <!--#if-->
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; <!--#list-->
&nbsp; &nbsp; <a class="carousel-control-prev" href="#carousel-<@portlet.namespace />" role="button" data-slide="prev">
&nbsp; &nbsp; <span class="carousel-control-prev-icon" aria-hidden="true"></span>
&nbsp; &nbsp; <span class="sr-only">Previous</span>
&nbsp; </a>
&nbsp; <a class="carousel-control-next" href="#carousel-<@portlet.namespace />" role="button" data-slide="next">
&nbsp; &nbsp; <span class="carousel-control-next-icon" aria-hidden="true"></span>
&nbsp; &nbsp; <span class="sr-only">Next</span>
&nbsp; </a>
&nbsp; </div>
&nbsp; </section>
&nbsp;     
&nbsp; <!--#if-->
​​​​​​​Any suggestions or errors that I am not seeing?
Thanks!
~Ben Lawson
thumbnail
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"
                }
            ]
        }
    ]
}``
thumbnail
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 
 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
&nbsp; <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
&nbsp; <script [url="http://src=&quot;https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js&quot;"></script>]src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"&gt;[/url]
​​​​​​​
<div class="container">
&nbsp; <div id="myCarousel" class="carousel slide" data-ride="carousel">
&nbsp; &nbsp;
&nbsp; &nbsp; <ol class="carousel-indicators">
&nbsp; &nbsp; &nbsp; &lt;#list CarouselImage.getSiblings() as cur_img&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<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>
&nbsp;&nbsp; &nbsp;<!--#list-->
&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; </ol>
&nbsp; &nbsp; <div class="carousel-inner">
&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;
&nbsp; &nbsp; &nbsp; &lt;#list CarouselImage.getSiblings() as cur_img&gt;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<div class="item ${(cur_img?counter == 1)?then('active', '')}">&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<span class="carousel-caption">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;#if cur_img.ImageTagline.getData()!= ""&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${cur_img.ImageTagline.getData()}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </h5>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--#if-->
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;#if cur_img.ImageParagraph.getData()!= ""&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ${cur_img.ImageParagraph.getData()}
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--#if-->
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;#if cur_img.ImageURL.getData()!= ""&gt;
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-outline-primary">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="${cur_img.ImageURL.getData()}">SEE MORE</a>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--#if-->
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <img  alt="${cur_img.image.getAttribute(" alt")}" data-fileentryid="${cur_img.image.getAttribute(" fileEntryId")}" src="${cur_img.image.getData()}">
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</div>
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;<!--#list-->
&nbsp; &nbsp; </div>
&nbsp; &nbsp; <a class="left carousel-control" href="#myCarousel" data-slide="prev">
&nbsp; &nbsp; &nbsp; <span class="glyphicon glyphicon-chevron-left"></span>
&nbsp; &nbsp; &nbsp; <span class="sr-only">Previous</span>
&nbsp; &nbsp; </a>
&nbsp; &nbsp; <a class="right carousel-control" href="#myCarousel" data-slide="next">
&nbsp; &nbsp; &nbsp; <span class="glyphicon glyphicon-chevron-right"></span>
&nbsp; &nbsp; &nbsp; <span class="sr-only">Next</span>
&nbsp; &nbsp; </a>
&nbsp; </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!