1. Home
  2. Development
  3. Widget template to display images in Asset Publisher

Widget template to display images in Asset Publisher

thumbnail
Pete Helgren, modified 6 Years ago.
Widget template to display images in Asset Publisher
Regular Member Posts: 225 Join Date: 4/7/11 Recent Posts
Got a bunch of images that I added through the document and media portlet.  I have tagged them so I can select them using the asset publisher.  What I'd like to do is format the images a bit differently but I cannot figure out how to get the image to display in asset publisher.  So I started by creating a widget template I could apply to asset publisher.  I think this is about the same as an ADT so I poked around a bit and have gotten this far:
​​​​​​​
<#if entries?has_content>
    <#list entries as curEntry>
        <#assign entry = curEntry 
         assetRenderer = entry.getAssetRenderer()        viewURL = assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, entry)
        />
        
        ${curEntry.getTitle(locale)}
        
            <a href="${viewURL}">
                ${curEntry.getTitle(locale)}
            </a>
        <div class="aspect-ratio aspect-ratio-8-to-3 aspect-ratio-bg-cover cover-image mb-4" > <img src="${viewURL}"></div>    </#list>
</#if>This template will display the title just fine AND I can get to the image if I wrap the viewURL in a anchor tag.  But I want the image directly, not through a link.  I found multiple examples of how to display a journal article and a few for blogs but nothing for just an image (document).  Given the flexibility of the asset publisher, my guess is that you have to determine the document type and then format it, but I can't seem to find the correct code to do this.  As a bonus, I'd also like to do the same with some mp3's I'd like to present (in an audio tag) .

So I think what I need to get the path to the actual asset in the file system so it can be used in an img tag (or an audio tag when it's an mp3).  Can you point me to an example that does that for images (at least).  Seems easy but I can't seem to get to the right objects and methods.
  
thumbnail
Mohammed Yasin, modified 6 Years ago.
RE: Widget template to display images in Asset Publisher
Liferay Master Posts: 593 Join Date: 8/8/14 Recent Posts
Hi,For getting image url in ADT you can try 
&lt;#if entries?has_content&gt;
&nbsp; &nbsp; &lt;#list entries as curEntry&gt;&nbsp;
&nbsp; &nbsp; &nbsp; &nbsp;${curEntry.getTitle(locale)} ---
&nbsp; &nbsp; &nbsp; &nbsp; ${curEntry.getAssetRenderer().getURLImagePreview(renderRequest)}
&nbsp; &nbsp; &nbsp;<!--#list--> <!--#if-->
thumbnail
Pete Helgren, modified 6 Years ago.
RE: Widget template to display images in Asset Publisher
Regular Member Posts: 225 Join Date: 4/7/11 Recent Posts
Thanks!  That gave me just enough to build ADT's for both the pictures and the MP3's.  Here are the complete solutions:

For the display of images in an Asset Publisher:


&lt;#if entries?has_content&gt;
   &lt;#list entries as curEntry&gt;
        &lt;#assign entry = curEntry 
         assetRenderer = entry.getAssetRenderer() 
         imgPreview = assetRenderer.getURLImagePreview(renderRequest)
        /&gt;
        
        ${curEntry.getTitle(locale)}

        <div class="cover-image"> 
        
        <img src="${imgPreview}">

        </div>
    
    <!--#list-->
<!--#if-->


For the display of playable MP3 in an Asset Publisher:


&lt;#if entries?has_content&gt;
   &lt;#list entries as curEntry&gt;
        &lt;#assign entry = curEntry 
         assetRenderer = entry.getAssetRenderer() 
         mediaFile = assetRenderer.getURLDownload(themeDisplay)
        /&gt;
        
        ${curEntry.getTitle(locale)}

        <div> 
        
        <audio controls>
            <source src="${mediaFile}" type="audio/mpeg">
        </audio>

        </div>
    
    <!--#list-->
<!--#if-->


Pretty much covers it! I still need to add a bit more formatting but I really appreciate the tip. Got me moving forward again.
Jamie Sammons, modified 4 Years ago.
RE: Widget template to display images in Asset Publisher
New Member Post: 1 Join Date: 3/23/22 Recent Posts 
<#assign imageMimeTypes = propsUtil.getArray("dl.file.entry.preview.image.mime.types") catagory = "" filterApplied = false />
<#if entries?has_content>
    <#list entries as entry>
        <#if imageMimeTypes?seq_contains(entry.getMimeType())>
            ${dlUtil.getPreviewURL(entry, entry.getFileVersion(), themeDisplay, "")}
        </#if>
        <h2 class="text-center">${entry.title}</h2>
        <h2 class="date mx-2 text-center">${entry.createDate}</h2>
    </#list>
</#if>

I have created successfully created images with preview.