CODEWITHSUNDEEP
htmlimagephototumblrcss
Philip
Philip

Reputation: 1

Increase tumblr photo size

How do I edit this html so I can customize the width of a photo, tumblr doesn't seem to like changing the photo set size to anything bigger. I have looked up, but don't understand where a maxwidth:600px would fit in or if this is even the best way to do it.

Massive thanks to anyone who can help me out

{block:Photo}

  <div class="permalink">
    {block:IfNotDisqusShortname}<a href="{Permalink}">&rarr;</a>{block:IfNotDisqusShortname}
    {block:Date}{block:IfDisqusShortname}<a href="{Permalink}#disqus_thread"></a>{block:IfDisqusShortname}{/block:Date}
  </div>

  <div class="photo post">

    {LinkOpenTag}
      <img src="{PhotoURL-500}" alt="{PhotoAlt}"/>
    {LinkCloseTag}

    {block:Caption}
      <p>{Caption}</p>
    {/block:Caption}

    <div class="postmeta">{block:Date}<a href="{Permalink}">{TimeAgo}</a>&nbsp; {/block:Date}<a href="{Permalink}" style="text-transform:lowercase;">{lang:Notes} ({NoteCount})</a></div>

  </div>

  {block:PostNotes}
    <div>{PostNotes}</div>
  {/block:PostNotes}

{/block:Photo}

Upvotes: 0

Views: 22627

Answers (3)

user1593984
user1593984

Reputation: 31

Enlarging from 500px makes it blurrier. Tumblr does actually store a copy of your image wider than 500px. It's called HighRes, and it's (up to) 1280px.

In your theme HTML, Replace photoURL-500 with photo-HighRes, for example, and resize from that.

In my theme, I use it like so:

{block:PermalinkPage}<a href="{PhotoURL-HighRes}">{/block:PermalinkPage}
<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" {block:IndexPage}width="435px"
{/block:IndexPage}{block:PermalinkPage}width="900px"{/block:PermalinkPage}/>

It shrinks the 1280px down to 435px for the index and shrinks it to 900px for the permalink page, as seen here: http://phillypraxis.tumblr.com/tagged/images

Upvotes: 2

kant
kant

Reputation: 107

Check on the slidestheme.tumblr.com, on the source code for this line:

enter code herereplaceRawPhotoLinks: function() {
      $("article.photo div.media a[href*='/photo/1280']").each(function() {`enter code here`

Upvotes: -1

user1301428
user1301428

Reputation: 1783

If I understand your question, you could simply add width="600" before the alt attribute of the image tag:

<img src="{PhotoURL-500}" width="600" alt="{PhotoAlt}"/>

Upvotes: 0

Related Questions