Question

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

如果帖子标有#width200，则会分配css类.width200。

问题是，虽然帖子的宽度不同，但它们都使用主题操作符加载相同大小的照片：{{PhotoURL-500}}。

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

有没有办法使用主题运算符或javascript？

Answer 1

这会动态创建图片，具体取决于主题标签（使用#s0，#s1，#s2代替#width200，这样更容易）< / p>

当Javascript不可用时（以及谷歌和Facebook等机器人）默认为400px宽的图像

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

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

Tumblr：photoUrl-（尺寸） - 尺寸取决于班级？

1 个答案: