1
0
mirror of https://github.com/Damillora/Yuika synced 2024-11-14 05:57:33 +00:00
Yuika/partials/post-background.hbs

28 lines
960 B
Handlebars

{{!--
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 feature_image}}
<style type="text/css">
.responsive-{{slug}}-img {
background-image: url({{img_url feature_image size='m'}});
}
</style>
<div class="post-background responsive-{{slug}}-img bg-cover bg-center bg-yuika-blue-500">
{{else}}
<div class="post-background no-image">
{{/if}}