Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h3>Overview</h3> <p>When you upload an image to Tumblr, multiple sizes (of the same image) are generated and stored across their network. </p> <p>Once uploaded, you can use <a href="http://www.tumblr.com/docs/en/custom_themes#photo-posts" rel="noreferrer">template tags</a> to request this image at the following sizes: <strong>75</strong>, <strong>100</strong>, <strong>250</strong>, <strong>400</strong>, <strong>500</strong> and <strong>1280</strong>.</p> <p>It's worth mentioning the following:</p> <ol> <li>The value in the template tag is the maximum size the requested image will be. Example: A <strong>400</strong> version of an image could be anywhere between <strong>251px</strong> and <strong>400px</strong> wide / high. </li> <li>There may not be a <strong>high res</strong> or <strong>1280</strong> version of an image available. If the original image is <strong>500px</strong> or less, a <strong>1280</strong> version isn't generated. </li> <li>Photosets don't produce a <strong>100</strong> version.</li> </ol> <h3>Image URL</h3> <p>The image URL will be either of the two below. The first URL seems to be associated with images upload more than 6 months ago (this is a guess), the second URL seems to be for newer images:</p> <pre><code>http://36.media.tumblr.com/tumblr_o4qxa0n2BP1r6ec7zo1_500.jpg </code></pre> <p>or</p> <pre><code>http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_500.jpg </code></pre> <h3>URL Schema</h3> <p>This can be split into three parts, two variables, one constant.</p> <ol> <li><code>http://36</code> </li> <li><code>.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1</code> </li> <li><code>_500.jpg</code></li> </ol> <p><em>1</em> This is a server number and can differ for each image size. <del>AFAIK there is no guarantee that an image size will be available on all servers. @Ally mentioned in the comments you can remove this part from the URL and the image will still be found.</del><br> <em>2</em> This is the Tumblr subdomain, directory (if applicable) and partial file name. This will be the same for all sizes.<br> <em>3</em> This is the requested size (which matches the template tag) and file extension. <br/></p> <h3>Generating URLs for all sizes available using template tags.</h3> <p>The only foolproof method I have found is to use the corresponding template tags and assign them to a <code>data-</code> attribute.</p> <p>Example Template Code:</p> <pre><code>&lt;img src="{PhotoURL-100}" data-250u="{PhotoURL-250}" data-400u="{PhotoURL-400}" data-500u="{PhotoURL-500}" data-1280u="{block:HighRes}{PhotoURL-HighRes}{/block:HighRes}" /&gt; </code></pre> <p>Example Rendered Code:</p> <pre><code>&lt;img src="http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_100.jpg" data-250u="http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_250.jpg" data-400u="http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_400.jpg" data-500u="http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_500.jpg" data-1280u="http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_1280.jpg" &gt; </code></pre> <p>With this method, you can be certain you have the correct URLs and you know what sizes are available.</p> <h3>Hacking all size URLs based on just one URL.</h3> <p>Using this information the URL would become:</p> <pre><code>http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_500.jpg </code></pre> <p>Below is a test to confirm we access all the available sizes: </p> <ul> <li><a href="http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_500.jpg" rel="noreferrer">http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_100.jpg</a></li> <li><a href="http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_250.jpg" rel="noreferrer">http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_250.jpg</a></li> <li><a href="http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_400.jpg" rel="noreferrer">http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_400.jpg</a></li> <li><a href="http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_500.jpg" rel="noreferrer">http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_500.jpg</a></li> <li><a href="http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_1280.jpg" rel="noreferrer">http://36.media.tumblr.com/83099a60d4e0cbeeb30d90394e222878/tumblr_o4qxa0n2BP1r6ec7zo1_1280.jpg</a></li> </ul> <p>You still wouldn't know if the 1280 size has been generated, but its a step closer. With this method you could replace the value (part 3) with an new size and you <strong>should</strong> be able to get the image.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload