Forum Discussion

DougS's avatar
DougS
Khoros Oracle
14 years ago

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...
ebroyles's avatar
ebroyles
Maven

Thank you for this excellent documentation and code sample for displaying the latest three blog entries from the community in a custom component.

 

I have taken this and added it to our community and it is working well, however I would like to make it display like the Lithosphere version, which includes a teaser image on the left, then the title and teaser in the middle and all the way to the right is the friendly date, the author name and a tiny thumbnail of the author.

 

Here is a snapshot of the Lithosphere recent blog articles captured from the home page of the community today.  What I would like to know is where to the teaser images come from?  Are they coming from a special location, or are they simply included in the teaser of the blog by policy?

 

Lithosphere recent blog articles

 

I would also like to know where to get the tiny thumbnails for the author are found.  Are they standard or custom?

 

Thanks again for the great post.

MoniqueL's avatar
MoniqueL
Lithium Alumni (Retired)
12 years ago

"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 = "&nbsp;" />
			<#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