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
This came up earlier in the week. Here's one approach: Assets tag
So I used the code your provided in the post "Assets tag" (below):
But I'm trying to find a way to have the thumbnail link to the post. I tried replacing this:
with this:
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!!!
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>
Sorry, that CSS is displaying one long row, but I'll have to fix it later.
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>
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.
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.