Latest 3 blog articles (Freemarker)
Taken from http://lithosphere.lithium.com/t5/Everything-Studio/Cross-promote-blogs-and-discussion-boards/m-p/19658#M80 with big thanks to Kaela!
Description
Displays the Subject and Teaser (i...
Forum Discussion
Thank you very much, MoniqueL, for answering my questions directly and providing the exact code to do what I wanted. I have implemented that in my custom component and it works just as claimed.
Before you responded, I had come up with my own solution which is slightly different, and I will share with the community in case it may be of value to anyone. Not knowing how to include an image in the teaser but be able to yank it out and display it elsewhere (which is effectively what MoniqueL's solution does), I made use of the REST API and the fact that a message has an images collection.
Here is the relevant portion of the code.
<td class="image">
<#assign images_for_message = rest("${message.@href}/images").images />
<div style="width: 110px; height: 110px; margin: 0px 10px 10px 0px; background-image: url('/html/assets/community-blog-teaser-background-110.jpg'); border-radius: 2px;">
<#if images_for_message?size gt 0>
<#list images_for_message.image as image>
<img src="${image.thumbnail.url}" alt="${image.title}" title="${image.title}" border="0" align="left" width="110px" height="110px"/>
<#break>
</#list>
</#if>
</div>
</td>This calls the REST API to get a list of the images for the message and then loops through them (if any exist) and displays the thumbnail version of the first one it finds, ignoring all the others. It carries the same caveat that MoniqueL's code carries with respect to the sizing of images, though it specifically sizes the image right here in the code rather than relying on separate CSS styles.
MoniqueL's code has the advantage of enabling the author to decide which image to include in the teaser and also choose an appropriate size, and for that reason I prefer it over my original solution.
By the way, I found out after using it for a short time that the original code was a bit picky about how the images were inserted into the teaser. It was expecting the src attribute to follow the beginning of the img tag immediately, but I found with use that sometimes that doesn't hold true. I modified the code slightly so it is less picky. Here is the updated code.
The change I made is on this line:
<#assign imgPosB = teaser?index_of("<IMG ") />I also found that adding the height and width of the image as attributes to the img tag did not always work since sometimes those attributes already existed on the tag, depending upon how the image was inserted into the teaser. So I removed the addition of those attributes and opted instead for CSS that forces the images to be the right size.
Here's the CSS I used (which assumes that the custom component wraps itself in a div with the id recent-blog-articles).
#recent-blog-articles .image img { margin-bottom: 10px; width: 110px; height: 110px; }With those two changes, here's the new code.
<td class="image"> <#assign teaser = message.teaser /> <#assign imageLink = " " /> <#assign imgPosB = teaser?index_of("<IMG ") /> <#if (imgPosB > 0) > <#assign teaser2 = teaser?substring(imgPosB) /> <#assign imgPosE = teaser2?index_of("/>") /> <#if (imgPosE >0) > <#assign imageLink = teaser2?substring(0, imgPosE) + " /> " /> <#assign teaser = teaser?substring(0, imgPosB) + teaser2?substring(imgPosE+2) /> </#if> </#if> <div style="width: 110px; height: 110px; margin: 0px 10px 10px 0px; background-image: url('/html/assets/siemens-community-110.jpg'); border-radius: 2px;"> ${imageLink} </div> </td>
