Updates on responsive images in posts?

Developer help
#1

Any update on actually having responsive images inside of posts?

This works fine but should not be needed.

For any blog heavy on images this is really important especially on mobile and/or low bandwidth.

#2

You can configure all the image sizes you want in the theme configuration:

These sizes can be accessed in the theme. Also any images uploaded to the content will have all these sizes added to the srcset attribute of the image. Hope this helps!

#3

Yep, I understand how to do it for the featured image but this does nothing for the majority of the images in posts.

Why is this template not used for the gallery images? Seems like that should be default or at least allow a partial to be created for the galleries so we can do it ourselves.

#4

Kevin did a pretty good job of answering that question in the thread you linked to :slight_smile:

#5

Yes, he did but that post is nearly a year old now.

Ghost’s own blog isn’t using responsive images correctly. Each url in the srcset is the same at 2000px.

I notice that if you put in a non-valid size it redirects to the full size image. Why not just make the config sizes the source of truth and fail fast? I’m not sure if the sizes are generated in advance or on the fly but either should be handled with new config changes?

2 Likes
#6

I feel a bit fooled by ghost, you say:

Ghost image sizes will be automatically generated for all images uploaded directly to Ghost, and will regenerated as needed automatically whenever you change an image, a list of sizes, or the theme being used. Unlike other platforms, there’s no manual work needed to manage image sizes, it’s all done in the background for you.

“All images” sounds for me like also images added to posts. However when uploading a 4000px image inside a post, it will also render only a 4000px image.

I updated the code by @b-m-f from here to work with the latest version and e.g. with localhost paths. But it will still load the full-size image, in addition to a scaled down version. So not optimal at all…

Any idea how to fix this? Also is there an ETA for implementing responsive images for post content? Or a plan to update the misleading doc/ comparison with WordPress*?
(*because my ghost blog is slower to load than previously on WordPress with ~30mb of images to load).

image
image1450×234 22.4 KB 

function generateResponsiveImage(url) {
  const urlSplit = url.split("content/images");
  const start = "/content/images/size/";
  const end = urlSplit[1];
  return `srcset="${start}w100${end} 100w,
            ${start}w300${end} 300w,
            ${start}w600${end} 600w,
            ${start}w1000${end} 1000w"
    sizes="(max-width: 1000px) 400px, 700px"
    src="${start}600w${end}"
    `;
}

function improvePostPerformance() {
  const contentSection = document.querySelector(".post-full-content");
  let content = contentSection.querySelector(".post-content").innerHTML;

  const images = content.match(/<figure.+?figure>/g);
  const updatedImages = images.map(image => {
    const src = /src="([^"]*)/.exec(image)[1];
    const regexURL = /^((?:http(?:s)?:\/\/)?)((?:www\.)?[a-zA-Z0-9@:%._\+~#=-]{2,256}(\.|\:)[a-z0-9]{2,6}\b)((?:\:\d+)?)((?:[-\w@:%\+.~#&/=]*)?)((?:\?[-\w%\+.~#&=]*)?)$/img;
    const relativeSrc = regexURL.exec(src)[5]
    if (relativeSrc.split("/")[1] === "content") {
      return image.replace(/src="[^"]*"/, generateResponsiveImage(relativeSrc));
    } else {
      return image;
    }
  });

  images.forEach((image, index) => {
    content = content.replace(image, updatedImages[index]);
  });

  contentSection.innerHTML = content;
}

improvePostPerformance();
#7

Hey @transclusion, thanks for sharing your thoughts. We agree that the wording in our docs are a little misleading, which is why we’ve updated it accordingly: https://ghost.org/docs/api/v3/handlebars-themes/responsive-images/#compatibility

However you mentioned that when you upload a 4000px wide image the same size image is being shown on your site, is that right? Ghost resizes images down to a more manageable 2000px wide, which leads me to wonder if your hosting setup is preventing your site from doing any image manipulation. Same for smaller images linked in your custom srcset code. All images uploaded directly to Ghost will have alternative sizes available as long as those sizes are defined in the package.json, it’s just the use of srcset that stops them appearing in post content.

Maybe we can help with your image sizing issues on your Ghost install :blush: