Widget template to display images in Asset PublisherWidget template to display images in Asset Publisherhttps://liferay.dev/c/message_boards/find_thread?p_l_id=119785333&threadId=1182913812024-03-28T11:35:29Z2024-03-28T11:35:29ZRE: Widget template to display images in Asset PublisherAvinash Patelhttps://liferay.dev/c/message_boards/find_message?p_l_id=119785333&messageId=1213856102022-03-29T16:46:26Z2022-03-25T11:07:06Z<pre
style="background-color: rgb(43,43,43);color: rgb(169,183,198);font-family: "JetBrains Mono" , monospace;font-size: 9.8pt;">
<span
style="color: rgb(204,120,50);font-weight: bold;"><#assign </span>imageMimeTypes = propsUtil.getArray(<span
style="color: rgb(106,135,89);">"dl.file.entry.preview.image.mime.types"</span>) catagory = <span
style="color: rgb(106,135,89);">"" </span>filterApplied = <span
style="color: rgb(204,120,50);">false </span><span
style="color: rgb(204,120,50);font-weight: bold;">/>
</span><span
style="color: rgb(204,120,50);font-weight: bold;"><#if </span>entries<span
style="color: rgb(104,151,187);">?</span>has_content<span
style="color: rgb(204,120,50);font-weight: bold;">>
</span><span
style="color: rgb(204,120,50);font-weight: bold;"> <#list </span>entries <span
style="color: rgb(204,120,50);">as </span>entry<span
style="color: rgb(204,120,50);font-weight: bold;">>
</span><span
style="color: rgb(204,120,50);font-weight: bold;"> <#if </span>imageMimeTypes<span
style="color: rgb(104,151,187);">?</span>seq_contains(entry.getMimeType())<span
style="color: rgb(204,120,50);font-weight: bold;">>
</span><span
style="color: rgb(204,120,50);font-weight: bold;"> ${</span>dlUtil.getPreviewURL(entry<span
style="color: rgb(204,120,50);">, </span>entry.getFileVersion()<span
style="color: rgb(204,120,50);">, </span>themeDisplay<span
style="color: rgb(204,120,50);">, </span><span
style="color: rgb(106,135,89);">""</span>)<span
style="color: rgb(204,120,50);font-weight: bold;">}
</span><span
style="color: rgb(204,120,50);font-weight: bold;"> </#if>
</span><span
style="color: rgb(204,120,50);font-weight: bold;"> </span><span
style="color: rgb(232,191,106);"><h2 </span><span
style="color: rgb(186,186,186);">class</span><span
style="color: rgb(165,194,97);">="text-center"</span><span
style="color: rgb(232,191,106);">></span><span
style="color: rgb(204,120,50);font-weight: bold;">${</span>entry.title<span
style="color: rgb(204,120,50);font-weight: bold;">}</span><span
style="color: rgb(232,191,106);"></h2>
</span><span
style="color: rgb(232,191,106);"> <h2 </span><span
style="color: rgb(186,186,186);">class</span><span
style="color: rgb(165,194,97);">="date mx-2 text-center"</span><span
style="color: rgb(232,191,106);">></span><span
style="color: rgb(204,120,50);font-weight: bold;">${</span>entry.createDate<span
style="color: rgb(204,120,50);font-weight: bold;">}</span><span
style="color: rgb(232,191,106);"></h2>
</span><span
style="color: rgb(232,191,106);"> </span><span
style="color: rgb(204,120,50);font-weight: bold;"></#list>
</span><span style="color: rgb(204,120,50);font-weight: bold;"></#if></span></pre>
<p>I have created successfully created images with preview. </p>Avinash Patel2022-03-25T11:07:06ZRE: Widget template to display images in Asset PublisherPete Helgrenhttps://liferay.dev/c/message_boards/find_message?p_l_id=119785333&messageId=1182924062020-01-17T17:16:34Z2020-01-17T17:16:34Z<html><head></head><body>Thanks! That gave me just enough to build ADT's for both the pictures and the MP3's. Here are the complete solutions:<br><br>For the display of images in an Asset Publisher:<br><br><pre><code>
&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-->
</code></pre><br><br>For the display of playable MP3 in an Asset Publisher:<br><br><pre><code>
&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-->
</code></pre><br><br>Pretty much covers it! I still need to add a bit more formatting but I really appreciate the tip. Got me moving forward again.</body></html>Pete Helgren2020-01-17T17:16:34ZRE: Widget template to display images in Asset PublisherMohammed Yasinhttps://liferay.dev/c/message_boards/find_message?p_l_id=119785333&messageId=1182895822020-01-17T06:45:17Z2020-01-17T06:45:17Z<html><head></head><body>Hi,For getting image url in ADT you can try <pre><code>&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-->
</code></pre></body></html>Mohammed Yasin2020-01-17T06:45:17ZWidget template to display images in Asset PublisherPete Helgrenhttps://liferay.dev/c/message_boards/find_message?p_l_id=119785333&messageId=1182913802020-01-16T23:05:32Z2020-01-16T23:05:32ZGot 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:<br /><br /><#if entries?has_content><br /> <#list entries as curEntry><br /> <#assign entry = curEntry <br /> assetRenderer = entry.getAssetRenderer() viewURL = assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, entry)<br /> /><br /> <br /> ${curEntry.getTitle(locale)}<br /> <br /> <a href="${viewURL}"><br /> ${curEntry.getTitle(locale)}<br /> </a><br /> <div class="aspect-ratio aspect-ratio-8-to-3 aspect-ratio-bg-cover cover-image mb-4" > <img src="${viewURL}"></div> </#list><br /></#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) . <br /><br />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 th