Feature image srcset is not loading correct size

Developer help
1

My screen is 1080p (width = 1920). But my blog (aba-blog.xyz) loads the w1000 versions of the images for the cover images, making them look ugly. Why doesn’t it use w2000 images (which are actually available and accessible via the corresponding URL)?

How can I fix this?

2

I don’t know how you’re generating your srcset (it looks like there’s some extra processing being done outside of Ghost due to the index.html url and ../ image urls) but it’s not valid.

srcset="../content/images/size/w300/2021/11/z_p25-Carl.jpg25-Carl.jpg 300w../content/images/size/w600/2021/11/z_p25-Carl.jpgp25-Carl.jpg 600../content/images/size/w1000/2021/11/z_p25-Carl.jpg_p25-Carl.jpg 100../content/images/size/w2000/2021/11/z_p25-Carl.jpgz_p25-Carl.jpg 2000w

Each image there should be separated with , like z_p25-Carl.jpg25-Carl.jpg 300w, ../content rather than what you have at the moment which is z_p25-Carl.jpg25-Carl.jpg 300w../content.

3

I use liebling theme. I build my site with gatsby and host it via Github pages.

In the content/themes/liebling-master directory, inside the hbs files, I don’t see the word srcset. Any help would be appreciated.

4

If you’re building your site with Gatsby then the theme has no effect and you won’t be able to fix it from there. It sounds like there’s an issue in your Gatsby build/templates.

6

Alright. I managed to fix it. The issue was a bug (?) in wget -k option.

My workflow:

  • I have ghost 4 and gatsby installed on WSL2 Linux of my local Windows machine.
  • I open the terminal, navigate to my local folder, and ghost start to start ghost on localhost:2368
  • I write my posts, change theme…etc. to update my blog.
  • In the terminal, I navigate into the gastby directory, do a wget as follows to copy all the static files from localhost into docs.
wget -r -nH -P ./docs -E -T 2 -np -k http://localhost:2368/
  • The gatsby directory is fully git-tracked. I add . , commit and push into my public repo.
  • My public repo is hosted via github pages, and connected to my domain aba-blog.xyz. So after few minutes, the changes are available on my public blog.

Problem:

srcset for the feature image is defined in partials/hero.hbs of my theme as follows:

<div class="m-hero__picture {{#is "post"}}in-post{{/is}}">
      <img
        srcset="
          {{img_url background size="s"}} 300w,
          {{img_url background size="m"}} 600w,
          {{img_url background size="l"}} 1000w,
          {{img_url background size="xl"}} 2000w
        "
        sizes="(max-width: 600px) 600px, (max-width: 1000px) 1000px, 2000px"
        src="{{img_url background size="l"}}"
        alt=""
      />
    </div>

The -k option of wget is supposed to modify the links found in the static pages (HTML, CSS) with appropriate local paths. But it instead produces buggy code, turning image URL extensions into pngpng.

Solution
I updated the hbs file to put the entire <img … /> in the same line as follows. That prevented the wget -k bug from messing up the links.

<img srcset="{{img_url feature_image size="s"}} 300w, {{img_url feature_image size="m"}} 600w, {{img_url feature_image size="l"}} 1000w, {{img_url feature_image size="xl"}} 2000w" sizes="(max-width: 800px) 400px, (max-width: 1170px) 1170px, 2000px" src="{{img_url feature_image size="xl"}}" alt="{{title}}" />

Note:

My setup isn’t ideal. It is a pain to run wget every time. But this is the cheapest way I found. I’m only paying for my domain name (3$ a year) and nothing else. If any of you know of any easier method, please let me know. I would also love to have the whole ghost setup hosted online, so I can edit my blog from any computer without the fear of data getting corrupted.