Javascript Tumblr:photoUrl-（大小）-大小取决于类别？

我有一个标签，每个帖子的宽度由一个标签决定

如果一篇文章被标记为

#width200

，则会分配css类

.width200

问题是，尽管帖子的宽度不同，但它们都使用主题操作符加载相同大小的照片：

{{PhotoURL-500}

这是可行的，但对于较小的照片，这是对带宽的浪费。我可以使用主题操作符

{{PhotoUrl-250}

，但这会使较大的照片看起来很糟糕

---

有没有办法使用主题操作符或javascript来解决这个问题

这会根据散列标签动态创建图像（使用

#s0

，

#s1

，

#s2

而不是

#width200

，更容易）

当Javascript不可用时，默认为400px宽的图像（对于像Google和Facebook这样的机器人）

{block:Posts}
{块：照片}
（功能（）{
//选择当前脚本标记
var el=document.getElementById（“{PostID}-image”）；
//获取数据，这也适用于IE
var size=el.getAttribute（'data-images'）.split（'，'）；
var classes=el.getAttribute（'data-classes'）；
//弄清楚选择了哪一个。
//使用类似“#s1”的标签，
//其中1是数据图像中url的索引：
//0=250，1=400，2=500，3=highres
var imageIndex=classes.match（/\bs（\d）\b/）；
如果（！imageIndex）{
imageIndex=[0，“0”]；//未找到哈希标记，默认为最小图像大小
}
//创建图像并将其附加到脚本标记之后
var img=新图像（）；
img.src=尺寸[imageIndex[1]；
el.parentNode.insertBefore（img，el.nextSibling）；
} ());
{/block:Photo}
{/block:Posts}

---

我还没有测试过，但你知道了。如果您发现bug，请编辑/修复我的答案。

如果您不局限于使用客户端模板，我建议您使用它，因为它有帮助程序，这样您就可以使用javascript逻辑。注意：它还使用了胡须，所以你在使用它时不会遇到任何问题。谢谢你，维克多，我会研究一下，但我不确定如何实现它。。。只是想补充一点，我发现至少有一个博客以某种方式实现了我想做的事情，但我不知道如何做到：有趣的问题！遗憾的是，您将需要使用javascript和数据属性来传递一些替换URL，并进行测试，以确定适合的URL。祝你好运，这很管用！我错过了“{PostID}”的存在，所以我不知道如何插入代码。酷！谢谢你的修复。它们被社区拒绝了（…），所以我不得不手动重新应用它们。我很高兴它对你有用：）嗯，虽然这确实有效，但对于那些附加了。。。有什么想法吗？好的，我明白了，我需要在无限滚动代码中添加一个回调（不知何故）。但是为什么noscript回退不起作用呢？它出现在括号内，如下所示：

“

它看起来像jQuery.load（无限滚动所依赖的），所以

document.getElementById（“{PostID}-image”）

找不到它。您必须将此脚本打包到单独的函数中，并在完成infinitescroll加载时调用它<代码>仍然没有显示，因为浏览器中的javascript在技术上仍然处于启用状态。

{block:Posts}
    {block:Photo}
        <script id="{PostID}-image" data-images="{PhotoURL-250},{PhotoURL-400},{PhotoURL-500},{PhotoURL-HighRes}" data-classes="{TagsAsClasses}">
            (function () {
                //select current script tag
                var el = document.getElementById("{PostID}-image");

                //get data, this works in IE too
                var sizes = el.getAttribute('data-images').split(',');
                var classes = el.getAttribute('data-classes');

                //figure out which one is selected.
                //use hashtags like "#s1",
                //where 1 is the index of the url in data-images:
                //0 = 250, 1 = 400, 2 = 500, 3 = highres
                var imageIndex = classes.match(/\bs(\d)\b/);
                if (!imageIndex) {
                    imageIndex=[0,"0"];//no hashtag found, default to smallest image size
                }

                //create image and append it after the script tag
                var img = new Image();
                img.src = sizes[imageIndex[1]];
                el.parentNode.insertBefore(img, el.nextSibling);
            } ());
        </script>
        <noscript><img src="{PhotoURL-400}" alt=""></noscript>
    {/block:Photo}
{/block:Posts}