Marc Johns
Open Table

Weekend Project: Grid-style Posts Layout

This weekend's project is inspired by Rachael Herron's blog Yarn-A-Go-Go. Specifically, Rachael has set up her Books section to use a grid format for the book covers and blog post title. Each post then has a detailed synopsis, links to purchase the books, and reviews.

Yarn-A-Go-Go

If you would like to display your posts in an easy-on-the-eyes grid format, and you're using Advanced Templates for your blog, read on!

First, you'll need to decide where you want your grid to display. Rachael created a special blog just for her books, which makes that content especially easy to find from the main page of her blog. You could add the grid to the main page of your blog to display all of your new posts, create a separate index just for posts in a specific category, or update your archive indexes to use grids for your older content. The basic code structure for any of these will be the same.

<MTEntries>
<MTEntryPhoto><a href="<$MTEntryPermalink$>"><img src="<$MTGalleryPhotoURL$>" alt="<$MTEntryTitle remove_html="1" generate="1"$>" /></a></MTEntryPhoto>
<a href="<$MTEntryPermalink$>"><$MTEntryTitle remove_html="1" generate="1"$></a>
</MTEntries>

To show a specific number of posts, update <MTEntries> to <MTEntries lastn="4">. To pull posts from a specific category, you can use <MTEntries category="Category Name">.

You can add more tags to pull more information about the post, like the date, an excerpt, or even the full post body. See our Knowledge Base article about Post Tags for more information.

Next, you'll add your CSS classes for style and positioning. Here's an example:

<MTEntries>
<div class="post-grid">

<MTEntryPhoto>
<div class="thumbnail"><a href="<$MTEntryPermalink$>"><img src="<$MTGalleryPhotoURL$>" alt="<$MTEntryTitle remove_html="1" generate="1"$>" /></a></div>
</MTEntryPhoto>

<div class="post-title">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle remove_html="1" generate="1"$></a>
</div>

</div>
</MTEntries>

If you'd like your grid to resemble Rachael's, with the image centered over the post title, go to your stylesheet template and add code like this:

.post-grid {
height: auto;
float: left;
text-align: center;
}  

.thumbnail img {
display: inline;
}

.post-title {
text-align: center;
width: 200px;
margin: 0 3px 3px 3px;
}

That will give you the basic positioning for each image plus post title. You can add additional CSS for borders, padding, colors, etc. Have fun and be creative! We'd love to see how you've used this tutorial on your own blog.

comments powered by Disqus