Search code examples
javascripthtmllazy-loadingtumblrtumblr-themes

Image sizes when uploading to Tumblr. Pages showing different rules than for Posts. How to lazyload Post images

I am working with a pretty customised Tumblr account. I have a mixture of pages and posts where I want to access content and assets (mainly images to use in other posts and/or pages).

When I upload a file to a page, the default image size is 500px as per part of the image url. However as I know all the images I am uploading are large I have written a basic lazy load function to fetch the 1280px version of the file once it is in the view port.

For example:

500px: https://64.media.tumblr.com/e833cfdd76698ce60459a05e4501cf3d/tumblr_inline_s8e723yQER1r2a01g_500.jpg

1280px https://64.media.tumblr.com/e833cfdd76698ce60459a05e4501cf3d/tumblr_inline_s8e723yQER1r2a01g_1280.jpg

That code looks like this:

const setImageSource = () => {
    images = document.querySelectorAll('#posts img');
    images.forEach(item => {
        const newSrc = item.src.replace('500', '1280');
        item.setAttribute('data-src', newSrc);
    });
    observeImages();
};

This works and I have no issue with it.

However when I add images to a post they are being output with a default large url. For example: https://64.media.tumblr.com/8bb2edad047e9fbe8fcd2484064ddcfb/c16d798313ac9970-1e/s2048x3072/a422c651ec6c093d3a5ae0634bc84f91e7793b24.jpg

I don't recognise this format, and wonder if it was introduced as part of the NPF (or some other development).

My question, are there smaller versions of the images uploaded to Tumblr that I can access. How do I derive the file url.The only thing I can see in the new url format that might help is /s2048x3072/

TIA

Solution

  • I believe we can access different versions of the images uploaded in a post! I also think it's how an NPF—Neue Post Format—post is rendered (referring to your question regarding the URL output).

    Here is the comparison from the same image:

    Legacy, taken from demo:

    NPF, taken from my test blog

    When inspecting the image element on the blog network (e.g https://yourblog.tumblr.com/) in an NPF post, additional image sizes should be visible by default in the img tag. These sizes are indicated by the srcset attribute, which contains various image sources.

    (This assumes you're using the base code provided by Tumblr, where the NPF image is generated from the {Body} variable to display content)

    enter image description here

    Here is a simple script to print out various image sizes via console:

    const imgElements = document.querySelectorAll('.tmblr-full img');

if (imgElements.length > 0) {
    imgElements.forEach(imgElement => {
        const srcset = imgElement.getAttribute('srcset');
        const srcsetArray = srcset.split(',').map(item => item.trim());
        
        const imageUrls = srcsetArray.map(item => {
            const [url, width] = item.split(' ');
            return { url, width: parseInt(width, 10) };
        });
        
        console.log(imageUrls);
    });
}

    enter image description here

    From the screenshot above, the smaller versions of the images should be:

    • s75x75
    • s100x200
    • s250x400

    Replacing your current URL with another version from s2048x3072 to s250x400 should be working:

    https://64.media.tumblr.com/8bb2edad047e9fbe8fcd2484064ddcfb/c16d798313ac9970-1e/s250x400/a422c651ec6c093d3a5ae0634bc84f91e7793b24.jpg

    I hope this helps!