CODEWITHSUNDEEP
tumblr
petekp
petekp

Reputation: 61

Can you customize the format of a Tumblr post based on its tag?

Doing a custom Tumblr theme that will have a mix of the usual Tumblr post-types (text, pics, links, etc).

I'd also like to do a special post type once in awhile that'll feature my photography, but I don't want it to be resized, rather I'd like to feature the photo in high res at the full width of the theme (about 1140px wide).

I've read about {block:HighRes} {/block:HighRes} but it seems this is for having the 500px image click-through to the original.

Is there a way to disable this automatic re-sizing for these specific featured photography posts? Maybe a way to alter the behavior based on post tags? (e.g. if it has a "#photography" tag, display at full resolution - if not, go ahead and resize to 500px wide).

Here's a visual example of what I'm trying to do: https://i.sstatic.net/tw8Je.jpg

Upvotes: 4

Views: 2313

Answers (1)

Vladimir Starkov
Vladimir Starkov

Reputation: 19803

You can use {TagsAsClasses}

For example for this tumblr markup:

{block:Posts}
    <div class="entry {TagsAsClasses}">
     Post Content
    </div>
{/block:Posts}

and 3 posts which have this tags:

  1. photo, photo-hi-res
  2. photo, photo-low-res
  3. photo, photography

Tumblr outputs such html markup:

<div class="entry photo photo-hi-res">
 Post Content
</div>
<div class="entry photo photo-low-res">
 Post Content
</div>
<div class="entry photo photography">
 Post Content
</div>

and this markup can be handled with small css:

/* common for photo posts */
.entry.photo {}

/* `hi-res`-tag photo posts */
.entry.photo-hi-res {}

/* `low-res`-tag photo posts */
.entry.photo-low-res { width: 500px; }

/* `photography`-tag photo posts */
/* the rule you need */
.entry.photography { width: 900px; }
.entry.photography img { width: 100%; }

Upvotes: 7

Related Questions