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

Jolene Ann Rusk

I would be interested in having a separate grid-page like this for the books I have read and another page grid-page for the ones I'm currently reading... How do I add a page and once added do I use the last script

div.thumb {
margin: 3px;
border: 0px solid #A0ACC0;
height: auto;
float: left;
text-align: center;
}
.thumb img{
display: inline;
margin: 5px;
border: 1px solid #A0ACC0;
}
.thumb a:hover img {border: 1px solid black;}

.phototitle {
text-align: center;
font-weight: normal;
width: 200px;
margin: 0 3px 3px 3px;
}


Anywhere?

Colleen

If you want to link to the books on Amazon or another retailer, I would just create a Page and insert the images and links there. The above tutorial is more useful if you're using the grid to link to posts within your own blog.

The comments to this entry are closed.