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
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
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)
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);
});
}
Replacing your current URL with another version from s2048x3072
to s250x400
should be working:
I hope this helps!