Search code examples
iframetumblr

How to get the URL of a Tumblr photoset iframe

I am customizing my tumblr template and I need to access the URL of the iframe that contains my photoset. When I look at the html of my tumbler page, I see:

<figure class="photoset with-caption">
  <div id="photoset_66130132457" class="html_photoset">
    <iframe id="photoset_iframe_66130132457" class="photoset" style="border:0px; background-color:transparent; overflow:hidden;" src="http://blog.kazoova.com/post/66130132457/photoset_iframe/kazoova/tumblr_mvtbtjxyAt1t05bsz/0/false" frameborder="0" height="535" scrolling="no" width="100%">  
    </iframe>
   </div>
</figure>

How do I get the value of src in the iframe using tumblr variables?

I can get the URLs of individual images using the following code, but this is not what I am looking for:

{block:Photoset}
  {block:Photos}
    {PhotoURL-500}
  {/block:Photos}
{/block:Photoset}

I am hoping there is a variable for photoset that is similar to {PhotoURL-500} like {PhotosetURL-500}.

Please help!

Solution

  • How to get a Photosets iframe src

    Sadly, there isn't a theme operator that gives us the src as a string, the only option we have is to use {Photoset-500} as OP states. However, it is possible to work the iframe src out with the theme operators we have.

    Breakdown of the iframe src

    http://mikedidthis-pierre.tumblr.com/post/37187983482/photoset_iframe/mikedidthis-pierre/tumblr_meih4y5SDi1rkq61e/700/false

    We can break this down into 7 parts:

    1. http://mikedidthis-pierre.tumblr.com/post/
    2. 37187983482/
    3. photoset_iframe/
    4. mikedidthis-pierre/
    5. tumblr_meih4y5SDi1rkq61e/
    6. 700/
    7. /false

    1 The URL of the Tumblr blog, prefixed with post/. 1 and 2 should be used in tandum.
    2 Unique Post ID.
    3 A generic, consistant sub directory.
    4 At first glance looks like the Tumblr username. I wouldn't say its the Tumblr URL due to custom domains. However, it seems like it can be changed to anything, as long at it contains a character.
    5 A unique Tumblr generated ID. Think reblog keys. This is the part we really need and there are no theme operators to generate this.
    6 The size, in width of the iframe.
    7 Shadow mode. I believe turning this to true adds drop shadows to each of the photos in a photoset.

    How much of this can we replicate?

    So using the available theme operators like so:

    {BlogURL}/post/{PostID}/photoset_iframe/x/ * missing 5 * /700/false

    We can almost generate the full src!

    http://mikedidthis-pierre.tumblr.com/post/37187983482/photoset_iframe/x/ * missing 5 * /700/false

    Finding 5

    The bad news is, we are going to need javascript. I am not going to cover that, but I will explain how we can get the missing information. If you use the theme operators for a photoset, that just give use the image urls `{PhotoURL-500}:

    http://25.media.tumblr.com/tumblr_meih4y5SDi1rkq61eo4_500.jpg

    Can you see 5? Lets break it down:

    1. http://25.media.tumblr.com/
    2. tumblr_meih4y5SDi1rkq61e
    3. o4
    4. _500
    5. .jpg

    1 Address for the Tumblr server the image is hosted on.
    2 The missing data 5.
    3 This is the number of the image in the photoset, so 4th. However, I think this relates to upload order, rather than display order.
    4 Size of the image.
    5 File extension.

    So now what?

    So to get the complete iframe src, you are going to need to use javscript to find the data for part 5 and then combining that with the data we already have from the available theme operators.

    OP hasn't stated why they need the iframe URL. I would presume for delaying the loading, maybe to do with responsive.

    Hope it helps!

    Proof of concept:

    Image based Photoset: Example.

    Iframe based Photoset using information from above: Example.