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
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.