mirror of
https://github.com/Damillora/Yuika
synced 2024-11-22 09:17:33 +00:00
feat: responsive post thumbnail images
This commit is contained in:
parent
69d3041171
commit
8bf1119b0b
@ -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>
|
Loading…
Reference in New Issue
Block a user