Responsive images (#505)

This commit is contained in:
John O'Nolan 2018-12-17 12:25:57 +00:00 committed by GitHub
parent a22dda9694
commit 79ebbd50a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 170 additions and 41 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -411,10 +411,10 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
} }
.post-card-image { .post-card-image {
width: auto; width: 100%;
height: 200px; height: 200px;
background: var(--lightgrey) no-repeat center center; background: var(--lightgrey) no-repeat center center;
background-size: cover; object-fit: cover;
} }
.post-card-content-link { .post-card-content-link {
@ -595,46 +595,48 @@ The knock-on effect of this is ugly browser-scroll bars at the bottom, so 80px o
/* Special Styling for home page grid (below): /* Special Styling for home page grid (below):
The first (most recent) post in the list is styled to be bigger than the others and take over the full width of the grid to give it more emphasis. Wrapped in a media query to make sure this only happens on large viewports / desktop-ish devices. The first post in the list is styled to be bigger than the others and take over
the full width of the grid to give it more emphasis. Wrapped in a media query to
make sure this only happens on large viewports / desktop-ish devices.
*/ */
@media (min-width: 795px) { @media (min-width: 795px) {
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) { .post-card-large {
flex: 1 1 100%; flex: 1 1 100%;
flex-direction: row; flex-direction: row;
} }
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image-link { .post-card-large .post-card-image-link {
position: relative; position: relative;
flex: 1 1 auto; flex: 1 1 auto;
border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;
} }
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-image { .post-card-large .post-card-image {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content { .post-card-large .post-card-content {
flex: 0 1 357px; flex: 0 1 357px;
} }
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) h2 { .post-card-large h2 {
font-size: 2.6rem; font-size: 2.6rem;
} }
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) p { .post-card-large p {
font-size: 1.8rem; font-size: 1.8rem;
line-height: 1.55em; line-height: 1.55em;
} }
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-content-link { .post-card-large .post-card-content-link {
padding: 30px 40px 0; padding: 30px 40px 0;
} }
.home-template .post-feed .post-card:nth-child(6n+1):not(.no-image) .post-card-meta { .post-card-large .post-card-meta {
padding: 0 40px 30px; padding: 0 40px 30px;
} }
} }
@ -709,22 +711,29 @@ The first (most recent) post in the list is styled to be bigger than the others
.post-full-image { .post-full-image {
margin: 0 -10vw -165px; margin: 0 -10vw -165px;
height: 800px;
background: var(--lightgrey) center center; background: var(--lightgrey) center center;
background-size: cover;
border-radius: 5px; border-radius: 5px;
overflow: hidden;
}
.post-full-image img {
width: 100%;
height: 800px;
object-fit: cover;
} }
@media (max-width: 1170px) { @media (max-width: 1170px) {
.post-full-image { .post-full-image {
margin: 0 -4vw -100px; margin: 0 -4vw -100px;
height: 600px;
border-radius: 0; border-radius: 0;
} }
.post-full-image img {
height: 600px;
}
} }
@media (max-width: 800px) { @media (max-width: 800px) {
.post-full-image { .post-full-image img {
height: 400px; height: 400px;
} }
} }

View File

@ -3,7 +3,9 @@
{{#author}} {{#author}}
{{!-- Everything inside the #author tags pulls data from the author --}} {{!-- Everything inside the #author tags pulls data from the author --}}
<header class="site-header outer {{#if cover_image}}" style="background-image: url({{cover_image}}){{else}}no-cover{{/if}}">
{{> header background=feature_image}} {{!--Special header.hbs partial to generate the <header> tag--}}
<div class="inner"> <div class="inner">
{{> "site-nav"}} {{> "site-nav"}}
<div class="site-header-content"> <div class="site-header-content">

View File

@ -20,7 +20,7 @@ It's a good idea to keep this template as minimal as possible in terms of both f
<div class="inner"> <div class="inner">
<nav class="site-nav-center"> <nav class="site-nav-center">
{{#if @blog.logo}} {{#if @blog.logo}}
<a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a> <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{img_url @blog.logo size="xs"}}" alt="{{@blog.title}}" /></a>
{{else}} {{else}}
<a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a> <a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
{{/if}} {{/if}}

View File

@ -21,7 +21,7 @@ You'll notice that we *don't* use any JavsScript, or ghost_head / ghost_foot in
<div class="inner"> <div class="inner">
<nav class="site-nav-center"> <nav class="site-nav-center">
{{#if @blog.logo}} {{#if @blog.logo}}
<a class="site-nav-logo" href="{{@blog.url}}"><img src="{{@blog.logo}}" alt="{{@blog.title}}" /></a> <a class="site-nav-logo" href="{{@blog.url}}"><img src="{{img_url @blog.logo size="xs"}}" alt="{{@blog.title}}" /></a>
{{else}} {{else}}
<a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a> <a class="site-nav-logo" href="{{@blog.url}}">{{@blog.title}}</a>
{{/if}} {{/if}}

View File

@ -2,13 +2,12 @@
{{!-- The tag above means: insert everything in this file {{!-- The tag above means: insert everything in this file
into the {body} of the default.hbs template --}} into the {body} of the default.hbs template --}}
{{!-- The big featured header, it uses blog cover image as a BG if available --}} {{> header background=@blog.cover_image}} {{!--Special header.hbs partial to generate the <header> tag--}}
<header class="site-header outer {{#if @blog.cover_image}}" style="background-image: url({{@blog.cover_image}}){{else}}no-cover{{/if}}">
<div class="inner"> <div class="inner">
<div class="site-header-content"> <div class="site-header-content">
<h1 class="site-title"> <h1 class="site-title">
{{#if @blog.logo}} {{#if @blog.logo}}
<img class="site-logo" src="{{@blog.logo}}" alt="{{@blog.title}}" /> <img class="site-logo" src="{{img_url @blog.logo size="s"}}" alt="{{@blog.title}}" />
{{else}} {{else}}
{{@blog.title}} {{@blog.title}}
{{/if}} {{/if}}

View File

@ -57,6 +57,26 @@
"gulp-uglify": "3.0.1" "gulp-uglify": "3.0.1"
}, },
"config": { "config": {
"posts_per_page": 25 "posts_per_page": 25,
"image_sizes": {
"xxs": {
"width": 30
},
"xs": {
"width": 100
},
"s": {
"width": 300
},
"m": {
"width": 600
},
"l": {
"width": 1000
},
"xl": {
"width": 2000
}
}
} }
} }

View File

@ -22,7 +22,20 @@ into the {body} of the default.hbs template --}}
</header> </header>
{{#if feature_image}} {{#if feature_image}}
<figure class="post-full-image" style="background-image: url({{feature_image}})"> <figure class="post-full-image">
{{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<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: 800px) 400px,
(max-width: 1170px) 700px,
1400px"
src="{{img_url feature_image size="xl"}}"
alt="{{title}}"
/>
</figure> </figure>
{{/if}} {{/if}}

View File

@ -12,7 +12,7 @@
<div class="author-card"> <div class="author-card">
<div class="basic-info"> <div class="basic-info">
{{#if profile_image}} {{#if profile_image}}
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /> <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
{{else}} {{else}}
<div class="author-profile-image">{{> "icons/avatar"}}</div> <div class="author-profile-image">{{> "icons/avatar"}}</div>
{{/if}} {{/if}}
@ -29,7 +29,9 @@
</div> </div>
{{#if profile_image}} {{#if profile_image}}
<a href="{{url}}" class="moving-avatar"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></a> <a href="{{url}}" class="moving-avatar">
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
</a>
{{else}} {{else}}
<a href="{{url}}" class="moving-avatar author-profile-image">{{> "icons/avatar"}}</a> <a href="{{url}}" class="moving-avatar author-profile-image">{{> "icons/avatar"}}</a>
{{/if}} {{/if}}

View File

@ -3,7 +3,7 @@
<section class="author-card"> <section class="author-card">
{{#if profile_image}} {{#if profile_image}}
<img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /> <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
{{else}} {{else}}
<span class="avatar-wrapper">{{> "icons/avatar"}}</span> <span class="avatar-wrapper">{{> "icons/avatar"}}</span>
{{/if}} {{/if}}

View File

@ -2,7 +2,7 @@
<div class="floating-header-logo"> <div class="floating-header-logo">
<a href="{{@blog.url}}"> <a href="{{@blog.url}}">
{{#if @blog.icon}} {{#if @blog.icon}}
<img src="{{@blog.icon}}" alt="{{@blog.title}} icon" /> <img src="{{img_url @blog.icon size="xxs"}}" alt="{{@blog.title}} icon" />
{{/if}} {{/if}}
<span>{{@blog.title}}</span> <span>{{@blog.title}}</span>
</a> </a>

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}}

View File

@ -1,21 +1,38 @@
<article class="post-card {{post_class}}{{#unless feature_image}} no-image{{/unless}}"> <article class="post-card {{post_class}} {{#unless feature_image}}no-image{{else}}{{#is "home"}}{{#has index="nth:6"}}post-card-large{{/has}}{{/is}}{{/unless}}">
{{#if feature_image}} {{#if feature_image}}
<a class="post-card-image-link" href="{{url}}"> <a class="post-card-image-link" href="{{url}}">
<div class="post-card-image" style="background-image: url({{feature_image}})"></div> {{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<img class="post-card-image"
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}}"
/>
</a> </a>
{{/if}} {{/if}}
<div class="post-card-content"> <div class="post-card-content">
<a class="post-card-content-link" href="{{url}}"> <a class="post-card-content-link" href="{{url}}">
<header class="post-card-header"> <header class="post-card-header">
{{#if primary_tag}} {{#if primary_tag}}
<span class="post-card-tags">{{primary_tag.name}}</span> <span class="post-card-tags">{{primary_tag.name}}</span>
{{/if}} {{/if}}
<h2 class="post-card-title">{{title}}</h2> <h2 class="post-card-title">{{title}}</h2>
</header> </header>
<section class="post-card-excerpt"> <section class="post-card-excerpt">
<p>{{excerpt words="33"}}</p> <p>{{excerpt words="33"}}</p>
</section> </section>
</a> </a>
<footer class="post-card-meta"> <footer class="post-card-meta">
<ul class="author-list"> <ul class="author-list">
@ -27,7 +44,9 @@
</div> </div>
{{#if profile_image}} {{#if profile_image}}
<a href="{{url}}" class="static-avatar"><img class="author-profile-image" src="{{profile_image}}" alt="{{name}}" /></a> <a href="{{url}}" class="static-avatar">
<img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
</a>
{{else}} {{else}}
<a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a> <a href="{{url}}" class="static-avatar author-profile-image">{{> "icons/avatar"}}</a>
{{/if}} {{/if}}
@ -38,5 +57,7 @@
<span class="reading-time">{{reading_time}}</span> <span class="reading-time">{{reading_time}}</span>
</footer> </footer>
</div>
</div>{{!--/.post-card-content--}}
</article> </article>

View File

@ -28,7 +28,20 @@ into the {body} of the default.hbs template --}}
</header> </header>
{{#if feature_image}} {{#if feature_image}}
<figure class="post-full-image" style="background-image: url({{feature_image}})"> <figure class="post-full-image">
{{!-- This is a responsive image, it loads different sizes depending on device
https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
<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: 800px) 400px,
(max-width: 1170px) 700px,
1400px"
src="{{img_url feature_image size="xl"}}"
alt="{{title}}"
/>
</figure> </figure>
{{/if}} {{/if}}
@ -82,10 +95,10 @@ into the {body} of the default.hbs template --}}
{{#if related_posts}} {{#if related_posts}}
<article class="read-next-card" <article class="read-next-card"
{{#if ../primary_tag.feature_image}} {{#if ../primary_tag.feature_image}}
style="background-image: url({{../primary_tag.feature_image}})" style="background-image: url({{img_url ../primary_tag.feature_image size="m"}})"
{{else}} {{else}}
{{#if @blog.cover_image}} {{#if @blog.cover_image}}
style="background-image: url({{@blog.cover_image}})"{{/if}} style="background-image: url({{img_url @blog.cover_image size="m"}})"{{/if}}
{{/if}} {{/if}}
> >
<header class="read-next-card-header"> <header class="read-next-card-header">

View File

@ -1,9 +1,8 @@
{{!< default}} {{!< default}}
{{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}} {{!-- The tag above means - insert everything in this file into the {body} of the default.hbs template --}}
{{!-- The big featured header, it uses blog cover image as a BG if available --}}
{{#tag}} {{#tag}}
<header class="site-header outer {{#if feature_image}}" style="background-image: url({{feature_image}}){{else}}no-cover{{/if}}"> {{> header background=feature_image}} {{!--Special header.hbs partial to generate the <header> tag--}}
<div class="inner"> <div class="inner">
{{> "site-nav"}} {{> "site-nav"}}
<div class="site-header-content"> <div class="site-header-content">