keb/kesper
1
0
Fork 0
mirror of https://github.com/ZetaKebab/kesper.git synced 2025-07-03 02:17:38 +00:00
Code Issues Actions 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

51
partials/header.hbs Normal file
View File

@ -0,0 +1,51 @@
{{!--
Wow what the hell is going on in here even?
Ok so, several templates use this big header with a giant BG image. Nice idea, but big images
have a heavy impact on performance, so it's a good idea to make them responsive. Because we
can only get the image dynamically using Handlebars, and we can only set the image to properly
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.
--}}
{{#if background}}
<style type="text/css">
.responsive-header-img {
background-image: url({{img_url background size='xl'}});
}
@media(max-width: 1000px) {
.responsive-header-img {
background-image: url({{img_url background size='l'}});
background-image: -webkit-image-set(
url({{img_url background size='l'}}) 1x,
url({{img_url background size='xl'}}) 2x
);
background-image: image-set(
url({{img_url background size='l'}}) 1x,
url({{img_url background size='xl'}}) 2x
);
}
@media(max-width: 600px) {
.responsive-header-img {
background-image: url({{img_url background size='m'}});
background-image: -webkit-image-set(
url({{img_url background size='m'}}) 1x,
url({{img_url background size='l'}}) 2x
);
background-image: image-set(
url({{img_url background size='m'}}) 1x,
url({{img_url background size='l'}}) 2x
);
}
</style>
<header class="site-header outer responsive-header-img">
{{else}}
<header class="site-header outer no-image">
{{/if}}