Damillora
/
Yuika
mirror of https://github.com/Damillora/Yuika
1
0
Fork 0
Code Issues Releases Wiki Activity

feat: responsive post thumbnail images

This commit is contained in:
Damillora 2021-04-20 16:04:39 +07:00
parent 69d3041171
commit 8bf1119b0b
1 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
partials/post-background.hbs
View File

@ -8,14 +8,19 @@ be a background image using CSS, we end up with a handful of inline styles.
If the template in question has a background image, then we render responsive image styles
for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
with a `no-image` class so we can style it accordingly.
--}}
<div>
<div class="post-card__image">
{{#if feature_image}}
<img src="{{img_url feature_image size='m'}}" alt="{{title}}">
{{else}}
<img src="{{img_url @site.cover_image size='m'}}" alt="{{title}}">
{{/if}}
</div>
</div>
with a `no-image` class so we can style it accordingly.
--}}
<div>
<div class="post-card__image">
{{#if feature_image}}
<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: 1000px) 400px, 700px" src="{{img_url feature_image size=" m"}}" alt="{{title}}">
{{else}}
<img srcset="{{img_url @site.cover_image size=" s"}} 300w, {{img_url @site.cover_image size="m" }} 600w,
{{img_url @site.cover_image size="l" }} 1000w, {{img_url @site.cover_image size="xl" }} 2000w"
sizes="(max-width: 1000px) 400px, 700px" src="{{img_url @site.cover_image size=" m"}}"
alt="{{title}}">
{{/if}}
</div>
</div>