Modify hero template to handle large unsplash images (#291)

This commit is contained in:
Dean P 2020-12-14 15:31:59 +02:00 committed by GitHub
parent 3428961009
commit 085a9f5e51
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 21 deletions

View file

@ -2,30 +2,23 @@
If the template in question has a background image, then we render responsive image 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. for it, and apply those styles to the <header> tag.
--}} --}}
{{!--
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.
--}}
{{#if background}} {{#if background}}
{{#contentFor "herobackground"}}
<style>
.m-hero__picture {
background-image: url({{img_url background size='xl'}});
}
@media(max-width: 1000px) {
.m-hero__picture {
background-image: url({{img_url background size='l'}});
}
}
@media(max-width: 600px) {
.m-hero__picture {
background-image: url({{img_url background size='m'}});
}
}
</style>
{{/contentFor}}
<section class="m-hero with-picture" data-aos="fade"> <section class="m-hero with-picture" data-aos="fade">
<div class="m-hero__picture {{#is "post"}}in-post{{/is}}"></div> <div class="m-hero__picture {{#is "post"}}in-post{{/is}}">
<img srcset="{{img_url background size="s"}} 300w,
{{img_url background size="m"}} 600w,
{{img_url background size="l"}} 1000w,
{{img_url background size="xl"}} 2000w"
sizes="(max-width: 600px) 600px, (max-width: 1000px) 1000px, 2000px"
src="{{img_url background size="l"}}"
alt="{{title}}"
/>
</div>
{{else}} {{else}}
<section class="m-hero no-picture {{#is "post"}}in-post{{/is}}" data-aos="fade"> <section class="m-hero no-picture {{#is "post"}}in-post{{/is}}" data-aos="fade">
{{/if}} {{/if}}

View file

@ -48,8 +48,17 @@
&.in-post { &.in-post {
opacity: 1; opacity: 1;
} }
display: flex;
align-items: center;
justify-content: center;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
} }
.m-hero__content { .m-hero__content {
position: relative; position: relative;
text-align: center; text-align: center;