Skip to content

Instantly share code, notes, and snippets.

@Vortexmind

Vortexmind/feature-image.hbs

Created July 1, 2020 16:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Vortexmind/cc128ecc7d769e7da098e8e7b83f668c to your computer and use it in GitHub Desktop.
Save Vortexmind/cc128ecc7d769e7da098e8e7b83f668c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
feature-image.hbs
<figure class="post-full-image">
{{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img
srcset="https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_300,c_fit,q_auto,f_auto,dpr_auto/{{img_url feature_image size="s" absolute="true"}} 300w,
https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_600,c_fit,q_auto,f_auto,dpr_auto/{{img_url feature_image size="m" absolute="true"}} 600w,
https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_1000,c_fit,q_auto,f_auto,dpr_auto/{{img_url feature_image size="l" absolute="true"}} 1000w,
https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_2000,c_fit,q_auto,f_auto,dpr_auto/{{img_url feature_image size="xl" absolute="true"}} 2000w"
sizes="(max-width: 800px) 400px,
(max-width: 1170px) 1170px,
2000px"
src="https://res.cloudinary.com/<YOUR_USERNAME>/image/fetch/w_600,c_fit/{{img_url feature_image size="m" absolute="true"}}"
alt="{{title}}"
/>
</figure>
@Vortexmind
Copy link
Author

How to configure img_url in ghost. to serve images in HTTPS blogs. My domain is www.missfrankierose.com I cannot serve images when I converted my blog to HTTPS. Thanks in advance.

Hi nivashiot, img_url is a helper function of Ghost: see documentation here . Perhaps it would help seeing what the URL which is not working looks like. Cheers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment