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
"What I would like to know is where to the teaser images come from?"
For that particular component, some free marker has been added to pull in an image if an image has been added to the blog teaser section when a blog author is drafting their article. If the author fails to add a custom image specific to that blog teaser/article, then it'll pull in the "generic" Li image"
Also note that some css has been added to force the blog teaser images in this component to be the same square size as the li image, for a more uniform look. I would suggest tweaking the css or simply not relying on the css but rather try to have your creative team and/or blog authors crop & create images for blog teasers that are a consistent in size & ratio so you avoid image distortion that you sometimes see on the lithosphere
<td class="image<#if thisRow == 3> last</#if>">
<#assign teaser = message.teaser />
<#assign imageLink = " " />
<#assign imgPosB = teaser?index_of("<IMG src=") />
<#if (imgPosB > 0) >
<#assign teaser2 = teaser?substring(imgPosB) />
<#assign imgPosE = teaser2?index_of("/>") />
<#if (imgPosE >0) >
<#assign imageLink = teaser2?substring(0, imgPosE) + " height=110px width=110px /> " />
<#assign teaser = teaser?substring(0, imgPosB) + teaser2?substring(imgPosE+2) />
</#if>
</#if>
<div style="width: 110px; height: 110px; background-image: url('/html/assets/blogfeedimgsquare-blue.png'); border-radius: 2px;"> ${imageLink} </div>
</td>
"I would also like to know where to get the tiny thumbnails for the author are found. Are they standard or custom?"
They're standard in the sense that the particular freemaker code here is reference the message size version of the avatar but relying on specifically written css for this component to shrink the image down.
<td class="created<#if thisRow == 3> last</#if>">
<div id="date"><#if (useFriendlyDate) >${message.post_time.@view_friendly_date}<#else>${message.post_time.@view_date?date("MM-dd-yyyy")}</#if></div>
<#assign avatar = rest(message.author.@href + "/profiles/avatar/size/message").image>
<div id="authors"><a href="${message.author.@view_href}">${message.author.login}</a> <a href="${message.author.@view_href}"><img src="${avatar.url}" title="${message.author.login}" /></a></div>
</td
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.
