Three Thesis Teasers A Row – Revisited and Improved

Three Teasers Per Row with Suppression of the Teaser Text

by Russell on January 24, 2010 · 0 comments

in how tos, thesis

Problems With Three Teasers Per Row

There are a number of issues with my original 3 teasers per row Thesis solution

  • You need to hack(improve) a couple of core Thesis Files
  • You need to hand craft the teaser/excerpt text precisely for the layout to be consistent

I have been able to address the second of these complaints – it is up to Chris Pearson to address the first by making the number of teasers per row much more flexible. For some reason the code quality of teasers is lower than other areas of Thesis: it is inefficient and inflexible however there is still some good functionality in there.

Thesis Automatic Teaser Creation

Thesis has the facility to build teasers automatically.

The teaser layout needs to look good when displayed three teasers per row as shown above and also when displayed one teaser per row as shown below

One Teaser per Row

In the solution given in the previous post I had to create very specific HTML for the teaser. It is simply too labor intensive to have to do this for every post.

In this improved solution I let Thesis work its magic.

Thesis Post Image and Thumbnail

I simply use the Post Image and Thumbnail and specify the vertical positioning as below headline. This builds me the teasers automatically exactly the way I want.

Using Post Image and Thumbnail

The only minor change I needed was to the CSS which was to made the teaser text invisible when displayed as three teasers per row.

.custom .teaser3 .format_teaser { display:none }

One last thing, when displaying the post title is a teaser, Thesis displays the whole title, which can be too long for the line and hence wrap, which causes the adjacent teasers to be misaligned. See the fix for this in the next post which describes how to prevent post titles wrapping in Thesis teasers

Leave a Comment

CommentLuv badge

Spam Protection by WP-SpamFree

Previous post:

Next post: