GenZmeY/casper-i18n
1
0
Fork 0
mirror of https://github.com/GenZmeY/casper-i18n.git synced 2025-07-12 08:46:05 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki 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

19
post.hbs
View File

@ -28,7 +28,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}}
@ -82,10 +95,10 @@ into the {body} of the default.hbs template --}}
{{#if related_posts}}
<article class="read-next-card"
{{#if ../primary_tag.feature_image}}
style="background-image: url({{../primary_tag.feature_image}})"
style="background-image: url({{img_url ../primary_tag.feature_image size="m"}})"
{{else}}
{{#if @blog.cover_image}}
style="background-image: url({{@blog.cover_image}})"{{/if}}
style="background-image: url({{img_url @blog.cover_image size="m"}})"{{/if}}
{{/if}}
>
<header class="read-next-card-header">