Related Entries with Images & Recent Assets Linked to Entries

Tom Keating : VoIP & Gadgets Blog
Tom Keating
CTO
| VoIP & Gadgets blog - Latest news in VoIP & gadgets, wireless, mobile phones, reviews, & opinions

Related Entries with Images & Recent Assets Linked to Entries

movable-type-logo.jpg Movable Type bloggers related entries template recipes and I've come up with what I think is one of the best ones out here. Further, Movable Type bloggers using version MT 4+ with its built-in Asset Management have also been clamoring for the ability to display not just Recent Assets (images in this case) but Recent Assets hyperlinked to the actual Entry where the image was used. I've come up with such a method, so read on...

By default, Movable Type's Recent Assets widget simply links to the image location and not the context of where the image was used. Of course, an image asset can be used multiple times in multiple blog entries, so my template recipe limits it to the most recent entry. But this should be a perfectly acceptable compromise.

Let's start with my Recent Image Assets linked to entries (Part 1) recipe and then I'll discuss my Related Entries with Images recipe (Part 2).
Part 1
First, let me just list the entire widget template code followed by an explanation nearly line-by-line.

10 Most Recent Image Assets Linked to Entries widget code:
<div class="widget-recent-assets widget">
    <h3 class="widget-header">Recent Entry Images</h3>
    <div class="widget-content">
        <ul>
<$MTSetVar name="imagecount" value="0"><mt:entries lastn="30"><mt:entryassets type="image" limit="1"><MTSetVarBlock name="hasimage"><mt:AssetURL></MTSetVarBlock><mt:if name="hasimage"><$MTSetVar name="imagecount" op="add" value="1">
  <mt:If name="imagecount" le="10"><li class="item"><a class="asset-image" href="<$mt:EntryPermalink$>" title="<$MTEntryTitle remove_html="1" encode_xml="1"$>"><img src="<$mt:AssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<mt:assetlabel>"/></a></li></mt:if></mt:if></mt:entryassets></mt:entries>
        </ul>
    </div>
</div>


Now let's examine how the above code works. You'll notice I grab the last 30 entries (<mt:entries lastn="30">), however, later in the code you will see where I keep a running counter of the number of images pulled and limit it to just 10, i.e. <mt:If name="imagecount" le="10">. Note: le = less than or equal to. The reason for this is simple. I want to pull the LAST 10 asset images and link to the Entry that correspond to each individual asset image, however, I may not always blog an entry with an image. Suppose my most recent last 10 entries had no images - what would result is that this widget code won't display any images. So by bumping the mt:entries to "30" I make the assumption that in the last 30 entries I DO HAVE at least 10 images.

This piece of code is critical to determining is an entry had an image:
<MTSetVarBlock name="hasimage"><mt:AssetURL></MTSetVarBlock>

It simply looks for <mt:AssetURL> and assigns this value to the variable called "hasimage". We don't really care what the URL is, but we do care if it is 'null' (no image) or 'not null' (has an image). By assigning the URL to this variable we can test if the image exists - if no URL exists, the variable is 'null'.

Next, we test this variable and if indeed an image exists, we increase the value of another variable called "imagecount", which keeps track of the number of images pulled:
<mt:if name="hasimage"><$MTSetVar name="imagecount" op="add" value="1">

Now, we test to see if we are still less than or equal to 10:
<mt:If name="imagecount" le="10">

If the number of images is still <=10, then we insert a 70px height thumbnail of the image, hyperlinked to the entry in context, i.e.:
<li class="item"><a class="asset-image" href="<$mt:EntryPermalink$>" title="<$MTEntryTitle remove_html="1" encode_xml="1"$>"><img src="<$mt:AssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<mt:assetlabel>"/></a></li>

It then continues to loop until it reaches 30 entries. It looks simple enough looking at this code, but it took me awhile to figure it out.

I came across several Movable Type Forum threads requesting the above template code. Here's a couple:
- Link Asset to Entries?
- MT4 Thumbnails ("Is it possible the have the thumbnails link to the blog they are featured in?") Note: One poster responds "No way to display the link of entry to asset. sad.gif" Guess he'll need to read my template recipe above!

I simply replaced the default 'Recent Assets' widget code with the above code. You can do the same or create a new widget if you like since it is now more aptly called 'Recent Entry Images' rather than Recent Assets. After all MT assets include much more than just images. You can upload videos, sound files/podcasts, etc.

Part 2
Now let's move on to my Related Entries with Images template recipe. I should note that this template recipe was inspired by something I noticed on conservative blogger Michelle Malkin's WordPress blog. Ironically, Michelle Malkin used to run her highly-trafficked blog on Movable Type but migrated to WordPress.

In any event, if you go to any of Michelle's entries, you'll notice in the middle column you'll see "Related" along with thumbnail images that point to the related entry. Here's a link to one of her posts as an example. Surely, if WordPress can have related entries with thumbnails, then Movable Type should support it right? First, I looked on the Movable Type forums to see if someone had done this already. Why reinvent the wheel? I couldn't find anything. I did some googling and came up empty. Ok, I guess if I want this feature, I'll have to do it myself.

First you'll need the TagSupplementals plugin, which adds the MTRelatedEntries template tag. There are other Movable Type Related plugins, however many of them go by the keywords or the category fields and not the entry 'tags' field, which I think it more accurate. The beauty of this plugin is that MTRelatedEntries calculates relevance between the current entry and each other entries, based on weighted sum of co-occured tags, and then listed entries which have the highest total relevances.

Alternatively, if you don't want to install this plugin, you might be able to substitute this very basic MT Related code which also looks for related entries based on tags (no weighting or relevances applied):
<mt:SetVarBlock name="tags"><mt:EntryTags glue=" OR "><mt:TagName></mt:EntryTags></mt:SetVarBlock>
 <ul>
   <mt:Entries tags="$tags">
       <li><a href="<mt:EntryPermalink>"><mt:EntryTitle></a></li>
   </mt:Entries>
 </ul>


With this in mind, here was my original, but not final "Related Entries with Images code". You'll see why in a minute why this is not the final version, but this code might suit your purposes.

Original (but not Final) Related Entries with Images code:
<mt:If name="entry_template">
<div class="widget-recent-entries widget-archives widget">
<h3 class="widget-header"><a href="<$mt:EntryPermalink$>" title="<$MTEntryTitle$>">Related Entries</a></h3>
<div class="widget-content">
<ul class="widget-list">
<MTRelatedEntries lastn="10">
<li><a href="<$MTEntryLink$>" title="<$MTEntryTitle$>"><mt:entryassets type="image" limit="1"><img src="<mt:AssetThumbnailURL width="150" square="1" />" alt="<mt:assetlabel>"/></mt:entryassets></a><br><a href="<$mt:EntryPermalink$>"><$MTEntryTitle$></a>
</MTRelatedEntries>
</ul>

</div>
</div>
</mt:if>


This code works, however because I'm using the Fastsearch plugin and it appears that Fastsearch doesn't like the Related Entries with Images code. It was resulting in blank sidebars / widgets within Fastsearch pages (tag pages + searches) when I had MTRelatedEntries code installed. I believe it was related to this error I was getting:

Publish error in template 'Main Index': Error in <mtInclude> tag: error in module Sidebar: Publish error in template 'Sidebar': Error in <mtif> tag: Error in <mtelse> tag: Error in <mtWidgetSet> tag: Error in <mtinclude> tag: error in widget Related Entries with Images: Publish error in template 'Related Entries with Images': Error in <mtEntryPermalink> tag: You used an 'mtEntryPermalink' tag outside of the context of an entry; perhaps you mistakenly placed it outside of an 'MTEntries' container?


Basically I think <mtEntryPermalink> is very finicky in Fastsearch. Actually, I believe if I changed it to <$MTEntryLink$> it may have worked.

Anyway, if I deleted the <MTRelatedEntries lastn=10> code then the Fastsearch tag/search pages once again showed my widgets in my sidebar columns. I tried a mt:if conditional statement that should only evaluate "<MTRelatedEntries lastn=10>" within the 'Related Entries with Images' widget, but that didn't work.

So how do I solve this dilemma? I'm not sure why the conditional mt:if didn't work, but I decided to create a separate template module that is 'conditionally' loaded only on entry_template pages (individual archive pages), as seen by these two FINAL VERSION code snippets:

Related Entries with Images Widget (FINAL VERSION):
<div class="widget-recent-entries widget-archives widget">
<h3 class="widget-header"><mt:If name="entry_template"><a href="<$mt:EntryPermalink$>" title="<$MTEntryTitle$>"></mt:If>Related Entries</a></h3>
<div class="widget-content">
<ul class="widget-list">
<mt:If name="entry_template">
<mt:include module="Related Entries Images Module">
</mt:if>
</ul>

</div>
</div>


Related Entries Images Module (FINAL VERSION):
<MTRelatedEntries lastn="10"><li><a href="<$mt:EntryPermalink$>"><$MTEntryTitle$><a href="<$MTEntryLink$>" title="<$MTEntryTitle$>"><mt:entryassets type="image" limit="1"><img src="<mt:AssetThumbnailURL width="150" />" alt="<mt:assetlabel>"/></mt:entryassets></a>
</MTRelatedEntries>


mt-edit-widget-set-primary-sidebar.jpg
After you create the two templates above, you simply edit your Widget Set and drag-and-drop the Related Entries with Images Widget to your Primary or Secondary sidebar (screenshot above, red arrow) and rebuild your entire blog. Now all of your entries will display Related Entries with Images in the sidebar you selected.

movable-type-related-entries-with-images-sidebar.jpg So there you have it - Related Entries with images with the image hyperlinked to the entry in context. I believe TMCnet's blogs (which I manage) are the only Movable Type blogs that display related entries with images. Sample Related Entries with Images screenshot to the right.

Click here to see a sample entry example showing this in action with lots of pretty graphics.

BONUS: If you use the Fastsearch plugin, you can insert an image thumbnail pulled from each entry next to the search results. It really "prettys" up the search result pages by adding lots of graphics/images. This code can also be used on tag pages.

Check out these two examples with nice graphics next to many of the search results:

Tag search page: http://blog.tmcnet.com/blog/tom-keating/tag/video
Regular Search page: http://blog.tmcnet.com/blog/tom-keating/fastsearch?blogs=4&query=phone

Here's a screenshot of the 'video' tag page for those too lazy to click-through:
mt-tag-page-sample-search-with-images.jpg

Here's the code you need in your Fastsearch template:
<mt:entryassets type="image" limit="1"><img src="<mt:AssetThumbnailURL width="75" square="1" />" alt="<mt:assetlabel>" class="floatimgleft"/></mt:entryassets><br><a href="<$MTEntryPermalink$>"><$MTEntryTitle google_highlight="1"$></a>

The critical piece of code is <mt:entryassets type="image" limit="1"> which simply pulls 1 image per search result.

Note: This code above should work within Movable Type's regular search template & mt-search.cgi script, but it "may" be resource intensive, especially for tag pages, since it's calling a Perl .cgi script. Although I read that the latest MT search script does add pagination and performance improvements. You can try it and see.

If you found these template recipes & tips useful, need some help, or made any cool modifications, let me know by posting a comment. I'd also be interested in knowing of any Movable Type blogs that are using this, so please post a comment and let me know. Enjoy!


Related Articles to 'Related Entries with Images & Recent Assets Linked to Entries'
movable-type-logo.jpg
post-office-20-plugin-settings.jpg
memo-plugin-movable-type-setting.jpg
ckeditor-movabletype.jpg

Featured Events