Tumblr: Photourl-(size) - Size Depending On Class?

I have a Tumblr Site where the width of each post is determined by a tag. If a post is tagged with #width200, the css class .width200 is assigned. The problem is, though the posts

Solution 1:

This creates the images on the fly, depending on the hashtag (use #s0, #s1, #s2 instead of #width200, it's easier)

This defaults to a 400px-wide image when Javascript is not available (and for bots like Google and Facebook)

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

                //get data, this works in IE toovar 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 = highresvar 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 tagvar img = newImage();
                img.src = sizes[imageIndex[1]];
                el.parentNode.insertBefore(img, el.nextSibling);
            } ());
        </script><noscript><imgsrc="{PhotoURL-400}"alt=""></noscript>
    {/block:Photo}
{/block:Posts}

I haven't tested this, but you get the idea. If you find bugs, please edit/fix my answer.