Latest 3 blog articles (Freemarker)

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