Responsive feature images not rendering properly

Themes
1

I am unable to display properly-sized responsive feature images on my posts and pages in my custom theme. I have added the necessary sizes to my package.json file as shown below.

        "image_sizes": {
            "xxs": {
                "width": 30
            },
            "xs": {
                "width": 100
            },
            "s": {
                "width": 300
            },
            "m": {
                "width": 600
            },
            "l": {
                "width": 1000
            },
            "xl": {
                "width": 2000
            }
        },

I am attempting to load the responsive feature images as shown below. Note that these images were uploaded to Ghost via the “feature image” upload utility within the page editor.

<img
        srcset="{{img_url page.feature_image size="xxs"}} 30w,
                     {{img_url page.feature_image size="xs"}} 100w,
                     {{img_url page.feature_image size="s"}} 300w,
                     {{img_url page.feature_image size="m"}} 600w,
                     {{img_url page.feature_image size="l"}} 1000w,
                     {{img_url page.feature_image size="xl"}} 2000w"
        sizes="(max-width: 400px) 300px,
                    (max-width: 800px) 600px,
                    (max-width: 1500px) 1000px,
                    2000px"
        src="{{img_url page.feature_image size="m"}}" />

However, the actual rendered page shows that all of the size-specific images are actually referencing the same root image path instead of the expected size-specific image paths.

<img
    srcset="/content/images/2022/12/MyImage.jpg 30w,
                 /content/images/2022/12/MyImage.jpg 100w,
                 /content/images/2022/12/MyImage.jpg 300w,
                 /content/images/2022/12/MyImage.jpg 600w,
                 /content/images/2022/12/MyImage.jpg 1000w,
                 /content/images/2022/12/MyImage.jpg 2000w"
    sizes="(max-width: 400px) 300px,
                (max-width: 800px) 600px,
                (max-width: 1500px) 1000px,
                2000px"
    src="/content/images/2022/12/MyImage.jpg">

I would expect the images to render with the path including the appropriate size such as:

/content/images/size/w600/2022/12/MyImage.jpg

Am I doing something wrong or is responsive image loading broken for feature images? Any help with this would be greatly appreciated. Also, please note that properly-sized responsive images within post content are being loaded.

2

Well… this was my silly mistake. My GitHub action used to deploy my theme was unintentionally excluding the theme’s package.json file. This was causing the Ghost server to fail to properly create the appropriately sized images since the image sizes were not being set. doh! Now that the package.json file is being deployed with the theme the correct images are being rendered.

3 Likes