Multi-Sized Posts Tutorial
Difficulty: ★★★☆☆ | A good understanding of HTML, CSS and Tumblr theme making is required.
This tutorial is aimed at theme makers and hence will be a basic outline of how to do it.
Tumblr uses the blocks {block:Post1} {/block:Post1} all the way through to {bloc:Post15} {/block:Post15}. This is the basic tool we need for making a multi-sized posts theme.
If you wanted to make every 5th image post in each set of posts twice the size of every other post, you could do something like this:
{block:Photo} <div class="photo"> {block:IndexPage} {block:Post1}<div class="littlefish"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:Post1} {block:post2}<div class="littlefish"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:post2} {block:post3}<div class="littlefish"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:post3} {block:post4}<div class="littlefish"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:post4} {block:post5}<div class="bigfish"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" /></div>{/block:post5} {block:post6}<div class="littlefish"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:post6} {block:post7}<div class="littlefish"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:post7} {block:post8}<div class="littlefish"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:post8} {block:post9}<div class="littlefish"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:post9} {block:post10}<div class="littlefish"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:post10} {block:post11}<div class="littlefish"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:post11} {block:post12}<div class="littlefish"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:post12} {block:post13}<div class="littlefish"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:post13} {block:post14}<div class="littlefish"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:post14} {block:post15}<div class="littlefish"><img src="{PhotoURL-500}" alt="{PhotoAlt}" /></div>{/block:post15} {/block:IndexPage} {block:PermalinkPage} {LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" /> {LinkCloseTag}<br> {block:Caption}{Caption}{/block:Caption} {/block:PermalinkPage} {/block:Photo}
And then for the CSS you just set the width for .bigfish as 2x the .littlefish width + margin-left + margin-right.
If you want it so every 5th POST (not just images) in each set of posts twice the size of every other post you would have to do the same thing for all other post types. (Yes, it is very time consuming).
Example here.
The other alternative is you can make all the photos different widths by giving each post a different class. This effect works best if you only do it for photos and make the sizes in a small range (maybe between 200 and 300px with one being 500px).
Example here.
—Chloe
