davejansen/Ghost-Theme-Casper
1
0
Fork 0
Code Issues Pull Requests Activity

Responsive images (#505)

Browse Source
This commit is contained in:
John O'Nolan
2018-12-17 12:25:57 +00:00
committed by GitHub
parent a22dda9694
commit 79ebbd50a3
17 changed files with 170 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
page.hbs
View File

@@ -22,7 +22,20 @@ into the {body} of the default.hbs template --}}
</header>
{{#if feature_image}}
<figure class="post-full-image" style="background-image: url({{feature_image}})">
<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="{{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) 700px,
1400px"
src="{{img_url feature_image size="xl"}}"
alt="{{title}}"
/>
</figure>
{{/if}}