photoset fixed

Support 500px and 540px Photosets in Your Theme

Intermediate HTML/CSS knowledge required. Some javascript knowledge may help.

This is a fix for photosets on themes until tumblr fixes it on their end. (For photos, see this post.) If tumblr make changes to their photoset code, this script may break, so use at your own risk! This code is THEME-DEPENDENT, as your theme must be designed to display both 500px and 540px width posts.

What this script actually does: It will take the highest resolution images available and shove it into the photoset. 500px photosets will stay 500px wide. 540px photosets will be 540px. If the photoset images are larger than 540px, it will scale down to 540px. There may be flickers, as the images load. This script may lag on pages with many photosets, so you may want to restrict this script to permalink pages.

Why you should do this even if you’re using custom user styles: this makes your blog prettier for everyone else, too!

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
  /* questions? ask oddhour.tumblr.com */
     var updatePhotosetCss = "<style id='updatePhotosetStyle'>  .photoset .photoset_row img { display: block; } .photoset .photoset_row.photoset_row_1 img { max-width: 540px; } .photoset .photoset_row.photoset_row_2 img { max-width: 268px; } .photoset .photoset_row.photoset_row_3 img { max-width: 177px; } .photoset .photoset_row .photoset_photo { margin-left: 4px; } .photoset .photoset_row { text-align: center; width: 540px; } .photoset { width: 540px; }</style>";
   function updatePhotoset() {
        
        $(".photoset:not(.540-resized)").each( function (i, e) {
            if($(this.contentDocument).find("#updatePhotosetStyle").size() <= 0) 
                $(this.contentDocument).find("head").append(updatePhotosetCss);
        	var photoset = $(this.contentDocument).find(".photoset");
        	var photosetRows = photoset.find(".photoset_row");  
            photoset.find(".photoset_photo")
                .each(function () {
                    var hiResSrc = $(this).attr("href");
                    var img = $(this).find('img');
                    img.attr("src", hiResSrc );
                    img.attr("style", "");
                });
    	    photosetRows.attr("style", "");
    	    photoset.attr("style","");
    	    photoset.addClass("540-resized");
    	    $(this).height($(this.contentDocument.body).height());
        });
    }
    
    updatePhotoset();

    var photosetTimer = setInterval(updatePhotoset, 1500);
    $(window).on('load', function () { setTimeout(function() {clearInterval(photosetTimer)}, 2000); })
</script>
    

How to use:

  1. Add this script either before your end body tag (</body>) or in the head section (<head></head>). If you already have jquery on your theme, you don’t need to add that first line; just paste the rest after your jquery library. If you have no idea what I’m talking about, it’s probably best not to change anything.
  2. Update your theme. Your theme must be using the responsive photoset tag i.e. {Photoset}, not {Photoset-250} or any of the numbered variants.
  3. If your photosets display at the correct size but appear cut off, your theme’s post containers are probably designed to hold 500px width posts. You must update your theme so the post containers and columns are at least 540px wide. Themes vary, so you must understand HTML/CSS for this last step.

Note: if you want to just have all photosets at 540px (stretching photosets made for 500px), use {Photoset} and make your container 540px width.

(6/8/17 - updated styling due to tumblr updates - permalink for the latest updates)

6

Swap and Swapfell!!

im still trying to figure out how tf to draw these boys lmao

theSE ALL TURNED OUT SO CUTE THO AHHHHHH

im still indecisive af on what sf!sans’ color scheme is rip

10

I know who I am, my dear

I’m a wanted man

But the world I see looks good from here

Right from where I stand