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

Question

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

Gab

I think maybe you need to wrap your function in a jquery each() function. Something like $('.tumblr-full img').each(function(){ $(this).attr("width")... }); difficult to test without a link to your tumblr – Lanielanier

Also parseInt($('.tmblr-full img').attr("width")); wont work if the code reads "500px" as the px part will make the whole thing NaN. But I don't think you need to worry about this, just replace the image width with 1280 if you want to. – Lanielanier

Answer 1

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

Commonplace

Thanks, that is a much simpler solution. – Gab

You are welcome! Check the documentation when you are in doubt about some features. – Commonplace

Answer 2

OK I think I have something working (although it is slightly hacky).

I am using this function:

var fullImg = $('.post img');
fullImg.each(function(){
    var img_url = $(this).attr("src");
    var normal_width = parseInt($(this).attr("width"));
    var new_url = img_url.replace(400, 1280);
    $(this).attr( "width", 1280);
    $(this).attr( "src", new_url);
});

I tested this in jsfiddle using my own tumblr, so I had to change and tweak a few things.

Explanation.

Firstly as we are calling the same selector several times I have cached mine in a variable which I can refer to later (quicker and more maintainable).

var fullImg = $('.post img');

Use a similar variable for your selector $('.tmblr-full img').

Then the each function iterates over every instance of .post img rather than replacing the content for the first one with the same image.

Also I am not using a hard coded width or height property in my theme, so I cannot get the image width property. Mine are resized to 400px, so I am passing that as the parameter to replace, but ideally this should be caught in a variable. I did try to do this on the src but I could not get it to work (using split and substring).

You also need to keep in mind that if no version of the 1280px image exists, this function will still run and attempt to replace the code, so you may need some sort of test in place to check the src attribute first. Something like

if(img_url.match('400')){ // then execute the function ...

Here is a jsfiddle: https://jsfiddle.net/lharby/pwgqgvac/

EDIT:

I've managed to store the image size in a variable so it should not matter if it is a different number.

var fullImg = $('.post img');
fullImg.each(function(){
    var img_url = $(this).attr("src");
    var normal_width = parseInt($(this).attr("width"));
    var url_removed = img_url.split(".")[3]; // split the url at the "." and get the 3rd index
    url_removed = url_removed.substr(length -3); // get the last 3 chars eg 400
    var new_url = img_url.replace(url_removed, 1280);
    $(this).attr( "width", 1280);
    $(this).attr( "src", new_url);
});

I have updated the fiddle

Lanielanier

The first answer seems to be working fine. I tested the JsFiddle and it seems to work, but when I put the code in the Tumblr theme editor, it throws images URLs like this: 40.media.tumblr.c1280.png . I will use the first answer, Thanks – Gab