Help with thumbnail archive!

By vittali13 on Jun 26, 2009 at 9:35 AM 7 Vote 0 Votes

I am trying to generate category archive pages which output thumbnails in a table-like grid, ex: 4 thumbnails per row. However, it's not working. What am I doing wrong?

http://www.elenajatia.com/jody/archives.html



<mt:Entries>

<table>

<mt:EntryAssets lastn="300" type="image" assets_per_row="4"><br />

<mt:AssetIsFirstInRow><tr></mt:AssetIsFirstInRow>

<mt:AssetsHeader>

</mt:AssetsHeader> 

<td><ul style="padding:0; margin:8px 0;> 

<li style="padding:0; margin:8px 0; list-style-type: none; align: left; border: 2px;"><a href="<$mt:EntryPermalink$>" title="<$MTEntryTitle remove_html="1" encode_xml="1"$>"><img src="<$mt:AssetThumbnailURL square="1" height="100" width="100"$>" alt="<$mt:AssetLabel$>" title="<$mt:AssetLabel$>" /></a></li></ul></td>

<mt:AssetsFooter>

</mt:AssetsFooter>

<mt:AssetIsLastInRow></tr></mt:AssetIsLastInRow>

</mt:EntryAssets>

</table>

</mt:Entries>

Reported on Movable Type 4.2

7 Replies

| Add a Reply

shenews | June 26, 2009 2:09 PM | Reply

This came up earlier in the week. Here's one approach: Assets tag

vittali13 replied to shenews | June 27, 2009 4:00 PM | Reply

So I used the code your provided in the post "Assets tag" (below):

<mt:IfNonZero tag="AssetCount">
<mt:Assets type="image" lastn="30">
<mt:AssetsHeader>

<div class="widget-content" align="center">

</mt:AssetsHeader> 

<ul style="padding: 0; margin: 8px 4px; list-style-type: none; display: inline; line-height:10em;"> 

<li style="padding: 0; margin: 8px 4px; list-style-type: none; display: inline; border: 4px 4px;"><a class="asset-image" href="<$mt:AssetURL$>"><img src="<$mt:AssetThumbnailURL width="120"$>" class="asset-img-thumb" vspace="20" align="top" alt="<$mt:AssetLabel$>" title="<$mt:AssetLabel$>" /></a></li>

<mt:AssetsFooter>

</ul>

</div>

</mt:AssetsFooter>

</mt:Assets>

</mt:IfNonZero>

But I'm trying to find a way to have the thumbnail link to the post. I tried replacing this:



href="<$mt:AssetURL$>"

with this:



href="<$mt:EntryPermalink$>"

Nothing appears. I understand that mt:Entries was not used, that's why it would not appear. Is there a solution with the code that you provided that would allow me to link the thumbnails with its entry post?

Thank you for all your help!!!

shenews | June 28, 2009 7:11 AM | Reply

That stymied me last summer when I worked this out, because I couldn't give it a context -- which entries to get the assets from. I just figured it out -- use multiblog to include "this blog." This works for me:

<mt:setvarblock name="thisblog"><$MTBlogID$></mt:setvarblock>
<mt:multiblog include_blogs="$thisblog">

<mt:Entries>
<mt:EntryAssets lastn="32" type="image"><br />
<mt:AssetsHeader>

<div class="widget-content" align="center">
</mt:AssetsHeader>

<ul style="padding: 0; margin: 8px 4px; list-style-type: none; display: inline; line-height:10em;">
<li style="padding: 0; margin: 8px 4px; list-style-type: none; display: inline; border: 4px 4px;"><a class="asset-image"
href="<$mt:EntryPermalink$>" title="<$MTEntryTitle
remove_html="1" encode_xml="1"$>"><img src="<$mt:AssetThumbnailURL width="120"$>" class="asset-img-thumb" vspace="20" align="top" alt="<$mt:AssetLabel$>" title="<$mt:AssetLabel$>" /></a></li>

<mt:AssetsFooter>

</ul>
</div>
</mt:AssetsFooter>
</mt:Assets>
</mt:EntryAssets>
</mt:Entries>

</mt:multiblog>
shenews | June 28, 2009 7:18 AM | Reply

Sorry, that CSS is displaying one long row, but I'll have to fix it later.
shenews | June 28, 2009 1:36 PM | Reply

Coding out loud:
Okay, everything needed to switch to the mt:Entries context. I'm not happy with this yet, because this leaves me tapping the number of entries rather than a specific number of images. (EntryAssets doesn't seem to recognize a lastn or limit)

If that doesn't matter to you, this works. I want to look at it from another angle when I don't have a houseful of people. There's probably a more elegant solution.

<mt:setvarblock name="thisblog"><$MTBlogID$></mt:setvarblock>
<mt:multiblog include_blogs="$thisblog">

<mt:Entries lastn="50">
<mt:EntriesHeader>
<div class="widget-content">
</mt:EntriesHeader>

<mt:EntryAssets type="image">
<ul style="padding: 0; margin: 8px 4px; list-style-type: none; display: inline; line-height:10em;">
<li style="padding: 0; margin: 8px 4px; list-style-type: none; display: inline; border: 4px 4px;">
<a class="asset-image" href="<$mt:EntryPermalink$>" title="<$MTEntryTitle
remove_html="1" encode_xml="1"$>"><img src="<$mt:AssetThumbnailURL width="120"$>" class="asset-img-thumb" vspace="20" align="top" alt="<$mt:AssetLabel$>" title="<$mt:AssetLabel$>" /></a>
</li>
</mt:EntryAssets>
<mt:EntriesFooter>

</ul>
</div>
</mt:EntriesFooter>
</mt:Entries>
</mt:multiblog>
vittali13 | June 29, 2009 7:47 AM | Reply

It seems to work! Thank you!

Still a few kinks. Please refer to the archive page I've set up: http://www.elenajatia.com/jody/archives.html

With the code you have provided above, it continues to display the thumbnails in an uneven order, instead of evenly distributing in rows and columns.

I also could not find the CSS for "widget-content", "asset-image" and "asset-img-thumb" in the motion.css file. Could this be causing the problem then?

In the "Mt:Entries" tag I am also trying to restrict it to a certain category within my blog. So, I added " label="sports" " but still displays all the images from all categories.
shenews | June 29, 2009 8:29 AM | Reply

I see they're linked to entries now, at least. Fwiw, I use a standalone index template for this (http://shenews.projo.com/photos.html), not an archive index. That may matter.

Your category restriction should be category="sports" rather than "label."

I am not using Motion, so my stylesheet is different. One example in the template tags reference actually does this with a simple table: mt:AssetIsFirstInRow. If I were starting from scratch, I'd probably just do it that way and save a lot of time.

CSS is not my expertise, but if you search this forum for "gallery" you'll see other ways. Good luck.