Search code examples
jquerytumblr

How to use high resolution photos in text posts in Tumblr?


I'm trying to use high resolution in Tumblr Text posts. When I upload a photo into a Text post, Tumblr resizes it to 500px

Image Displayed:

<img src="http://41.media.tumblr.com/d8ceea903cb5cd667e416877bf4a8a70/tumblr_inline_nxihvl2VdX1r5y5rv_500.jpg" alt="image" data-orig-width="2640" data-orig-height="3960" width="500" height="750">

If I change 500 to the data-orig-width value doesn't give me the original image, but I just want a 1280 image. If I change 500 to 1280, it gives me a 1280 image

500px: http://41.media.tumblr.com/d8ceea903cb5cd667e416877bf4a8a70/tumblr_inline_nxihvl2VdX1r5y5rv_500.jpg

1280px: http://41.media.tumblr.com/d8ceea903cb5cd667e416877bf4a8a70/tumblr_inline_nxihvl2VdX1r5y5rv_1280.jpg

I have tried changing the attributes of the image from 500 to 1280 and it works, but only if the post contains one uploaded image , it doesn't change the images that are posted with the html editor. If the posts contains 2 images that were uploaded from the editor, the jQuery code will display the first image in 1280 twice, but it doesn't display the second image.

jQuery Code:

//Retrieve image src path
var img_url = $('.tmblr-full img').attr("src");
//Retrieve the width at which the image is displayed, 500px
var normal_width = parseInt($('.tmblr-full img').attr("width"));
//Replace 500px with the original image width or 1280
var new_url = img_url.replace(normal_width, 1280);
//Assign new widths to the src and to the width attributes
$(".tmblr-full img").attr( "width", 1280);
$(".tmblr-full img").attr( "src", new_url);

I have tried changing

var img_url = $('.tmblr-full img').attr("src");

to

var img_url = $(this).find('.tmblr-full img').attr("src");

But it doesn't do anything


Solution

  • Use {block:Posts inlineMediaWidth="1280"} and {/block:Posts} instead of {block:Posts} and {/block:Posts} to get "1280px" wide images (when available) inside Text post body and Captions of other posts. The width you set also affects things like videos.

    The reason you code did not work for inline images added via "HTML" editor; most probably because the class tmblr-full is only given to the figure containing the image uploaded via "Rich text" editor, Tumblr does that.

    Note: You did not post the complete HTML of your posts. Here I am assuming the reason you are trying jQuery is because you are not aware of what I just said above.

    Tumblr Theme Documentation