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

微笑、不失礼 提交于 2019-12-05 02:26:01

问题


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: http://i.imgur.com/23p09.jpg


回答1:


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%; }


来源:https://stackoverflow.com/questions/8106397/can-you-customize-the-format-of-a-tumblr-post-based-on-its-tag

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!