Ask Questions and Find Answers

Ah, that's not what I understood from your original post. Alright, in that case, you could try this.

1. Add the "Media gallery" portlet to the page

2. Under the portlet configuration, there is an option for display template, you can choose carousel as the template

You can then use the + in the portlet title bar to add content items. If the results are not what you are looking for in terms of template presentation, you can always create your own template.


​​​​​​​

Hey Brody,

Glad to hear that you are part way there. Too bad the template doesn't meet your needs out of the box, but the good news is that you are now in control of hte template as this is an ADT enabled portlet.

1. Go back to where you picked the Carousel template and this time choose Manage Templates

2. The resulting dialog is likely empty, but you can use the + in the upper right hand corner to add a new item

3. Fill in the fields at the top and then you template at the bottom. Here is te code for the our of the box carousel you selected earlier -- which you can use as a baseline and change as you need to for your case

<#if entries?has_content>
   <style>
      #<@portlet.namespace />carousel .carousel-item {
         background-color: #000;
         height: 250px;
         overflow: hidden;
         text-align: center;
         width: 700px;
      }

      #<@portlet.namespace />carousel .carousel-item img {
         max-height: 250px;
         max-width: 700px;
      }
   </style>

   <div id="<@portlet.namespace />carousel">
      &lt;#assign imageMimeTypes = propsUtil.getArray("dl.file.entry.preview.image.mime.types") /&gt;

      &lt;#list entries as entry&gt;
         &lt;#if imageMimeTypes?seq_contains(entry.getMimeType())&gt;
            <div class="carousel-item image-viewer-base-image">
               <img src="${dlUtil.getPreviewURL(entry, entry.getFileVersion(), themeDisplay, " ")}">
            </div>
         <!--#if-->
      <!--#list-->
   </div>

   &lt;@liferay_aui.script use="aui-carousel"&gt;
      var carousel = new A.Carousel(
         {
            after: {
               responsive: function(event) {
                  event.stopImmediatePropagation();

                  var boundingBox = event.currentTarget.get('boundingBox');

                  boundingBox.all('.image-viewer-base-image-list, .image-viewer-base-image').setStyles(
                     {
                        height: 'auto',
                        maxHeight: event.height,
                        maxWidth: event.width,
                        width: 'auto'
                     }
                  );
               }
            },

            contentBox: '#&lt;@portlet.namespace /&gt;carousel',
            height: 250,
            intervalTime: 2,
            width: 700
         }
      ).render();
   <!--@liferay_aui.script-->
<!--#if-->

​​​​​​​
4. Now save, and exit out of everything, including the portlet preferences

5. Go back into the portlet preferences and you should see your custom template now as an option

Are you logged in as the administrator? .. this is what I see (attached)

I don't think that is how the Media Gallery was intended to be used. From what I can make out, it's just supposed to provide a flip book of sorts. To do what you want I think you have a couple options.

1. Check the Liferay Marketplace (https://web.liferay.com/marketplace) to see if there is a plugin there that someone has contributed.

2. Roll your own -- but rather than creating your own entire portlet for this you can just leverage the Asset Publisher.
a. Define a new structure with an image field and field to specify the link
b. Create a new WCM template with just the code to render the item (<li><a href="...)
c. Create new web content items, one for each image (I would probably organize them into a folder)
d. Go to the page where you want the carousel and add a Asset Publisher portlet
e. Configure the portlet to pull only the Web Content of your structure type
f. Manage templates, as you did for the Media Gallery, and add your template -- it will be a little different from what you did in the media gallery. You're basically going to loop over the list of asset entries and add define everything around the list items, and then use the loop to render then the asset entries which will actually render your WCM Template (<li>'s)

3. Is gross so I am not going to write it here because people just shouldn't do it

#1, if you can find a candidate is the quickest, but # gives you the most control.