Featured Item Missing Image

Themes
1

I am using a modified version of Dawn on Ghost v5. Today, I tried featuring a few stories and got empty image placeholders for each post. I assume that Ghost “auto” generates different size images associated with my posts? Assuming that’s correct it appears to maybe not be doing that for me.

Here’s what files the featured image seems to be requesting when index.hbs renders my homepage with a featured story:

<img class="u-object-fit" srcset="/content/images/size/w400/2023/09/IMG_5041-1-jpeg400w, /content/images/size/w750/2023/09/IMG_5041-1. jpeg 750w, /content/images/size/w960/2023/09/IMG_5041-1.jpeg 960w, /content/images/size/w1140/2023/09/IMG_5041-1.jpeg1140w" sizes=" (min-width: 992px) calc((92vw - 60px) / 3), (min-width: 768px) calc((92vw - 30px) / 2), 92vw" src="/content/ images/size/w750/2023/09/IMG_5041-1. jpeg">

When I navigated to my server /var/www/ghost/content/images/size/ I see the following directories:
w1000 w1140 w1200 w150 w1600 w2400 w256h256 w600

Since the only folder I have on my server that matches any of the URL structures above is w1140 I navigated to /var/www/ghost/content/images/size/w1140/2023 but the only folder in it is /08/

Any thoughts on what might be going on and why this might not be working for me? Thanks!

2

tldr i figured out how to get images to load locally but having issues on my server. I thought this was some sorta file directory permission issue and created the missing folders and gave them ghost ownership sudo chown -R ghost:ghost w1920 w400 w750 w960 but no luck

any ideas why I am still seeing empty images?

I added this to my index.hbs

                        {{#if feature_image}}
                        <div class="post-card-image">
                            <img class="post-image"
                                srcset="{{img_url feature_image size="xs"}} 150w,
                                        {{img_url feature_image size="s"}} 400w,
                                        {{img_url feature_image size="m"}} 750w,
                                        {{img_url feature_image size="l"}} 960w,
                                        {{img_url feature_image size="xl"}} 1140w,
                                        {{img_url feature_image size="xxl"}} 1920w"
                                sizes="(max-width: 960px) 400px, 750px"
                                src="{{img_url feature_image size="m"}}"
                                alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                            />
                        </div>
                        {{/if}}

and I added this to my feed.css

.post-card-image img {
    width: auto;
    height: 200px;  /* or any desired fixed height */
    object-fit: cover;  /* this will cover the container without stretching */
}
3

is there an error message in the browser console? (F12 and then look for the console tab.)

4

Yep, I have a load of errors - here are just a few:

Failed to load resource: the server responded with a status of 404 ()
image-1.jpeg:1     Failed to load resource: the server responded with a status of 404 ()
1696014743687.jpeg:1     Failed to load resource: the server responded with a status of 404 ()
image-2.png:1     Failed to load resource: the server responded with a status of 404 ()
IMG_5041-1.jpeg:1     Failed to load resource: the server responded with a status of 404 ()

The source files exist but it appears that the files are not being generated. I dunno if they get generated at time of upload or adhoc when they are first called. But, they definitely don’t exist on the server.

I just tried to create the missing subdirectories (eg mkdir -p /w400/2023/10/) and assign them ghost ownership (sudo chown -R ghost:ghost w400/2023/10) but that didn’t change anything. When I load the page on the server it’s still shows an empty image. Runs fine locally…I have to believe there’s some strange permission issue somewhere.

5

Solved and posted the nginx config change I made here