如何获取 Tumblr 照片集 iframe 的 URL

Question

我正在自定义我的 tumblr 模板，我需要访问包含我的照片集的 iframe 的 URL。当我查看我的不倒翁页面的 html 时，我看到：

<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>

如何使用 tumblr 变量获取 iframe 中 src 的值？

我可以使用以下代码获取单个图像的 URL，但这不是我想要的：

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

我希望 photoset 有一个类似于 {PhotoURL-500} 的变量，例如 {PhotosetURL-500}。

请帮忙！

Answer 1

如何获取 Photosets iframe src

遗憾的是，没有 theme operator 可以将 src 作为字符串提供给我们，我们唯一的选择是使用 {Photoset-500} 作为 OP 状态。但是，可以使用我们拥有的theme operators 来处理 iframe src。

iframe src 分解

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

我们可以将其分解为 7 个部分：

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

1 Tumblr 博客的 URL，前缀为 post/。 1 和 2 应串联使用。
2 唯一的帖子 ID。
3 一个通用的、一致的子目录。
4 乍一看像是 Tumblr 用户名。由于自定义域，我不会说它是 Tumblr URL。但是，它似乎可以更改为任何内容，只要它包含一个字符。
5 Tumblr 生成的唯一 ID。想想转发键。这是我们真正需要的部分，没有theme operators 来生成它。
6 iframe 的大小，以宽度为单位。
7 阴影模式。我相信将其设置为 true 会为照片集中的每张照片添加阴影。

我们可以复制多少？

所以像这样使用可用的主题运算符：

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

我们几乎可以生成完整的src！

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

发现 5

坏消息是，我们将需要 javascript。我不会对此进行介绍，但我将解释我们如何获得缺失的信息。如果您将theme operators 用于照片集，则只需使用图片网址`{PhotoURL-500}：

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

你能看到 5 吗？让我们分解一下：

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

1 图片所在的 Tumblr 服务器的地址。
2 缺失的数据 5.
3 这个是照片集中图像的编号，所以第 4 个。但是，我认为这与上传顺序有关，而不是显示顺序。
4 图片大小。
5 文件扩展名。

那么现在呢？

因此，要获得完整的 iframe src，您将需要使用 javscript 查找第 5 部分的数据，然后将其与我们已经从可用的 theme operators 中获得的数据结合起来。

OP 没有说明他们为什么需要 iframe URL。我假设延迟加载，可能与响应有关。

希望对你有帮助！

概念证明：

基于图像的 Photoset：Example.

使用上述信息的基于 iframe 的 Photoset：Example。

Answer 2

我有一个类似的问题 - 我想链接照片集“标题”（我们设置的标题），以便所有帖子标题都是链接并且工作/看起来相同。

我发现@mikedidthis 的回答很有帮助。但我玩了一下，我认为从头开始重建 iframe src 是多余的。

我开始用更多的类更新我的标记并使用以下 Javascript -

$('.top.media.photoset.no-link').each(function(){
    $set = $(this);
    var url = $set.find('iframe').attr('src');
    // console.log(url);
    $set.find('.cont').find('a').attr('href',url).end().end().removeClass('no-link');                           
}); 

由于我有延迟加载，我想要一种方法只为每个链接设置一次 href，我在类中添加了 no-link 以用于选择器特异性（我也可以搜索 href != 的链接我想也是“#”）。