javascript - Tumblr:photoUrl-(size) - size depending on class？

Question

我有一个 Tumblr Site每个帖子的宽度由标签决定。

如果一篇文章被标记为 #width200，CSS 类 .width200 被分配。

问题是，虽然帖子的宽度不同，但它们都使用主题运算符加载相同尺寸的照片:{{PhotoURL-500}}。

这可行，但对于较小的照片，这是一种带宽浪费。我可以使用主题运算符 {{PhotoUrl-250}} 但这会使较大的照片看起来很糟糕。

有没有办法使用主题运算符或 javascript 来解决这个问题？

Answer 1

这会根据主题标签动态创建图像(使用 #s0、#s1、#s2 而不是 #width200，更简单)

当 Javascript 不可用时(以及对于像 Google 和 Facebook 这样的机器人)，这默认为 400 像素宽的图像

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

我还没有测试过这个，但你明白了。如果您发现错误，请编辑/修复我的答案。