yann/liebling
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Load smaller pictures to make blogs faster

Browse source
This commit is contained in:
Eduardo Gomez 2019-10-29 10:20:52 +01:00
parent 6a93856930
commit 1995c51591
7 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.hbs
View file

@ -40,13 +40,13 @@ into the {body} of the default.hbs template --}}
{{/if}} {{/if}}
<div class="m-featured-article__picture"> <div class="m-featured-article__picture">
{{#if feature_image}} {{#if feature_image}}
<div class="lozad" data-background-image="{{feature_image}}"></div> <div class="lozad" data-background-image="{{img_url feature_image size="l"}}"></div>
{{/if}} {{/if}}
</div> </div>
<div class="m-featured-article__meta"> <div class="m-featured-article__meta">
<a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}"> <a href="{{primary_author.url}}" class="m-featured-article__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
{{#if primary_author.profile_image}} {{#if primary_author.profile_image}}
<div style="background-image: url({{primary_author.profile_image}});"></div> <div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
{{else}} {{else}}
<div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div> <div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
{{/if}} {{/if}}

2
package.json
View file

@ -54,5 +54,5 @@
"desktop": "assets/screenshot-desktop.jpg", "desktop": "assets/screenshot-desktop.jpg",
"mobile": "assets/screenshot-mobile.jpg" "mobile": "assets/screenshot-mobile.jpg"
}, },
"version": "0.5.6" "version": "0.5.7"
} }

2
page-authors.hbs
View file

@ -28,7 +28,7 @@ into the {body} of the default.hbs template --}}
{{#foreach authors}} {{#foreach authors}}
<article class="m-article-card as-author"> <article class="m-article-card as-author">
{{#if profile_image}} {{#if profile_image}}
<div class="m-article-card__picture lozad" data-background-image="{{profile_image}}"> <div class="m-article-card__picture lozad" data-background-image="{{img_url profile_image size="m"}}">
{{else}} {{else}}
<div class="m-article-card__picture lozad" data-background-image="{{asset "images/default-avatar-rectangle.jpg"}}"> <div class="m-article-card__picture lozad" data-background-image="{{asset "images/default-avatar-rectangle.jpg"}}">
{{/if}} {{/if}}

2
partials/header.hbs
View file

@ -65,7 +65,7 @@ This header template is shared across all the pages.
<a href="{{url}}" class="m-recent-article"> <a href="{{url}}" class="m-recent-article">
<div class="m-recent-article__picture"> <div class="m-recent-article__picture">
{{#if feature_image}} {{#if feature_image}}
<div class="lozad" data-background-image="{{img_url feature_image size="m"}}"></div> <div class="lozad" data-background-image="{{img_url feature_image size="s"}}"></div>
{{else}} {{else}}
<div class="no-image lozad" data-background-image="{{asset "images/no-image.png"}}"></div> <div class="no-image lozad" data-background-image="{{asset "images/no-image.png"}}"></div>
{{/if}} {{/if}}

4
partials/loop.hbs
View file

@ -6,7 +6,7 @@
{{/is}} {{/is}}
{{#if feature_image}} {{#if feature_image}}
<article class="m-article-card {{post_class}}"> <article class="m-article-card {{post_class}}">
<div class="m-article-card__picture lozad" data-background-image="{{feature_image}}"> <div class="m-article-card__picture lozad" data-background-image="{{img_url feature_image size="m"}}">
{{else}} {{else}}
<article class="m-article-card no-picture {{post_class}}"> <article class="m-article-card no-picture {{post_class}}">
<div class="m-article-card__picture"> <div class="m-article-card__picture">
@ -14,7 +14,7 @@
<a href="{{url}}" class="m-article-card__picture-link" aria-label="Article"></a> <a href="{{url}}" class="m-article-card__picture-link" aria-label="Article"></a>
<a href="{{primary_author.url}}" class="m-article-card__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}"> <a href="{{primary_author.url}}" class="m-article-card__author js-tooltip" aria-label="Authors" data-tippy-content="{{t "Posted by"}} {{primary_author.name}} {{authors autolink="false" from="2" prefix=(t "Among with") separator=" , "}}">
{{#if primary_author.profile_image}} {{#if primary_author.profile_image}}
<div style="background-image: url({{primary_author.profile_image}});"></div> <div style="background-image: url({{img_url primary_author.profile_image size="xs"}});"></div>
{{else}} {{else}}
<div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div> <div style="background-image: url({{asset "images/default-avatar-square-small.jpg"}});"></div>
{{/if}} {{/if}}

6
src/js/app.js
View file

@ -205,7 +205,11 @@ $(document).ready(() => {
$('[data-aos]').addClass('no-aos-animation') $('[data-aos]').addClass('no-aos-animation')
} }
const observer = lozad() const observer = lozad('.lozad', {
loaded: (el) => {
el.classList.add('loaded')
}
})
observer.observe() observer.observe()
tippy('.js-tooltip') tippy('.js-tooltip')

4
src/sass/common/_global.scss
View file

@ -59,8 +59,8 @@ fieldset {
z-index: 5; z-index: 5;
} }
div[data-loaded="true"], div.lozad.loaded,
img[data-loaded="true"] { img.lozad.loaded {
opacity: 0; opacity: 0;
@include animation('fadeIn 0.5s forwards'); @include animation('fadeIn 0.5s forwards');
@include keyframes(fadeIn) { @include keyframes(fadeIn) {