changeset 2357a8c88505 in www.tryton.org:default
details: https://hg.tryton.org/www.tryton.org?cmd=changeset;node=2357a8c88505
description:
Lazy load background images with dominant color
diffstat:
app.py | 16 ++++++++++++++++
gulpfile.js | 3 ++-
js/lazy.js | 18 ++++++++++++++++++
requirements.txt | 1 +
templates/contribute.html | 4 ++--
templates/donate.html | 4 ++--
templates/download.html | 4 ++--
templates/forum.html | 4 ++--
templates/foundation.html | 4 ++--
templates/index.html | 2 +-
templates/layout.html | 2 +-
templates/not_found.html | 4 ++--
templates/presentations.html | 4 ++--
templates/service_providers_start.html | 4 ++--
templates/success_stories.html | 4 ++--
templates/success_stories/als-swiss.html | 2 +-
templates/success_stories/ammeba.html | 2 +-
templates/success_stories/blue-box-distribution.html | 2 +-
templates/success_stories/camir.html | 2 +-
templates/success_stories/expertise-vision.html | 2 +-
templates/success_stories/felber.html | 2 +-
templates/success_stories/gotsho-lims.html | 2 +-
templates/success_stories/grufesa.html | 2 +-
templates/success_stories/koolvet.html | 2 +-
templates/success_stories/layout.html | 8 ++++++--
templates/success_stories/revelle.html | 2 +-
templates/utils.html | 10 +++++++---
27 files changed, 80 insertions(+), 36 deletions(-)
diffs (457 lines):
diff -r 5373d0e05793 -r 2357a8c88505 app.py
--- a/app.py Tue Oct 15 10:32:31 2019 +0200
+++ b/app.py Tue Oct 15 12:09:06 2019 +0200
@@ -2,6 +2,7 @@
import ast
import datetime
import functools
+import glob
import hashlib
import logging
import os
@@ -17,6 +18,7 @@
from urllib.parse import urlparse
import requests
+from colorthief import ColorThief
from flask import (Flask, render_template, redirect, url_for, request,
make_response, abort)
from flask.logging import default_handler
@@ -213,6 +215,18 @@
return dict(url_for_canonical=url_for_canonical)
+@cache.memoize(timeout=365 * 24 * 60 * 60)
+def dominant_color(path):
+ color = ColorThief(
+ os.path.join(app.static_folder, path)).get_color(quality=1)
+ return '#%02x%02x%02x' % color
+
+
+@app.context_processor
+def inject_dominant_color():
+ return dict(dominant_color=dominant_color)
+
+
HEART = ('<span '
'class="material-icons beat" aria-hidden="true" '
'style="color:#d9534f; font-size: inherit; vertical-align: middle">'
@@ -757,6 +771,8 @@
hash, s='198', d=gravatar.default, r=gravatar.rating)
except Exception:
app.logger.warning('fail to fetch gravatar')
+ for path in glob.glob(os.path.join(app.static_folder, '**/*.jpg')):
+ dominant_color(os.path.relpath(path, app.static_folder))
return '', HTTPStatus.NO_CONTENT
diff -r 5373d0e05793 -r 2357a8c88505 gulpfile.js
--- a/gulpfile.js Tue Oct 15 10:32:31 2019 +0200
+++ b/gulpfile.js Tue Oct 15 12:09:06 2019 +0200
@@ -18,7 +18,8 @@
'node_modules/bootstrap/dist/js/bootstrap.js',
'node_modules/loading-attribute-polyfill/loading-attribute-polyfill.js',
'js/highlight.pack.js',
- 'js/highlight.js'])
+ 'js/highlight.js',
+ 'js/lazy.js'])
.pipe(sourcemaps.init())
.pipe(gulp.dest('static/js/'))
.pipe(concat('main.js'))
diff -r 5373d0e05793 -r 2357a8c88505 js/lazy.js
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/js/lazy.js Tue Oct 15 12:09:06 2019 +0200
@@ -0,0 +1,18 @@
+$(document).ready(function() {
+ if ("IntersectionObserver" in window) {
+ lazyElements = document.querySelectorAll(".lazy");
+ var lazyObserver = new IntersectionObserver(function(entries,
observer) {
+ entries.forEach(function(entry) {
+ if (entry.isIntersecting) {
+ var element = entry.target;
+ element.classList.remove("lazy");
+ lazyObserver.unobserve(element);
+ }
+ });
+ });
+
+ lazyElements.forEach(function(element) {
+ lazyObserver.observe(element);
+ });
+ }
+});
diff -r 5373d0e05793 -r 2357a8c88505 requirements.txt
--- a/requirements.txt Tue Oct 15 10:32:31 2019 +0200
+++ b/requirements.txt Tue Oct 15 12:09:06 2019 +0200
@@ -9,3 +9,4 @@
python-memcached
requests
werkzeug
+colorthief
diff -r 5373d0e05793 -r 2357a8c88505 templates/contribute.html
--- a/templates/contribute.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/contribute.html Tue Oct 15 12:09:06 2019 +0200
@@ -12,13 +12,13 @@
]
%}
{% extends "layout-toc.html" %}
-{% from "utils.html" import background %}
+{% from "utils.html" import background with context %}
{% block style %}
{{ super() }}
{{ background('banner-contribute') }}
{% endblock %}
{% block content %}
-<section class="section section-banner background-banner-contribute filter
filter-primary text-center">
+<section class="section section-banner background-banner-contribute filter
filter-primary text-center lazy">
<div class="container">
<h1 class="mb-0 text-white position-relative z-1">{{ title }}</h1>
</div>
diff -r 5373d0e05793 -r 2357a8c88505 templates/donate.html
--- a/templates/donate.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/donate.html Tue Oct 15 12:09:06 2019 +0200
@@ -12,13 +12,13 @@
]
%}
{% extends "layout-toc.html" %}
-{% from "utils.html" import background %}
+{% from "utils.html" import background with context %}
{% block style %}
{{ super() }}
{{ background('banner-donate') }}
{% endblock %}
{% block content %}
-<section class="section section-banner background-banner-donate filter
filter-primary text-center">
+<section class="section section-banner background-banner-donate filter
filter-primary text-center lazy">
<div class="container">
<h1 class="mb-0 text-white position-relative z-1">{{ heart | safe }}
{{ title }}</h1>
</div>
diff -r 5373d0e05793 -r 2357a8c88505 templates/download.html
--- a/templates/download.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/download.html Tue Oct 15 12:09:06 2019 +0200
@@ -13,13 +13,13 @@
]
%}
{% extends "layout-toc.html" %}
-{% from "utils.html" import background %}
+{% from "utils.html" import background with context %}
{% block style %}
{{ super() }}
{{ background('banner-download') }}
{% endblock %}
{% block content %}
-<div class="section section-banner background-banner-download filter
filter-primary text-center">
+<div class="section section-banner background-banner-download filter
filter-primary text-center lazy">
<div class="container">
<h1 class="mb-0 text-white position-relative z-1">{{ title }}</h1>
</div>
diff -r 5373d0e05793 -r 2357a8c88505 templates/forum.html
--- a/templates/forum.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/forum.html Tue Oct 15 12:09:06 2019 +0200
@@ -8,13 +8,13 @@
]
%}
{% extends "layout-toc.html" %}
-{% from "utils.html" import background %}
+{% from "utils.html" import background with context %}
{% block style %}
{{ super() }}
{{ background('banner-forum') }}
{% endblock %}
{% block content %}
-<section class="section section-banner background-banner-forum filter
filter-primary text-center">
+<section class="section section-banner background-banner-forum filter
filter-primary text-center lazy">
<div class="container">
<h1 class="mb-0 text-white position-relative z-1">{{ title }}</h1>
</div>
diff -r 5373d0e05793 -r 2357a8c88505 templates/foundation.html
--- a/templates/foundation.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/foundation.html Tue Oct 15 12:09:06 2019 +0200
@@ -2,14 +2,14 @@
{% set description = "The Tryton Foundation aims to protect, promote and
develop Tryton as Free Software" %}
{% set keywords = ["foundation", "board", "bylaws"] %}
{% extends "layout.html" %}
-{% from "utils.html" import background %}
+{% from "utils.html" import background with context %}
{% block style %}
{{ super() }}
{{ background('banner-foundation') }}
{% endblock %}
{% block content %}
{{ super() }}
-<section class="section section-banner background-banner-foundation filter
filter-primary text-center">
+<section class="section section-banner background-banner-foundation filter
filter-primary text-center lazy">
<div class="container">
<h1 class="mb-0 text-white position-relative z-1">Tryton
Foundation</h1>
</div>
diff -r 5373d0e05793 -r 2357a8c88505 templates/index.html
--- a/templates/index.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/index.html Tue Oct 15 12:09:06 2019 +0200
@@ -3,7 +3,7 @@
{% extends "layout.html" %}
{% macro slide_img(i) %}
<noscript class="loading-lazy">
- <img class="d-block w-100 img-fluid" src="{{ url_for('static',
filename='images/slide%i.jpg' % i) }}" sizes="100vw" srcset="{{
url_for('static', filename='images/slide%i.jpg' % i) }} 1920w, {{
url_for('static', filename='images/slide%i-800px.jpg' % i) }} 800w, {{
url_for('static', filename='images/slide%i-400px.jpg' % i) }} 400w" alt=""
loading="lazy">
+ <img class="d-block w-100 img-fluid" src="{{ url_for('static',
filename='images/slide%i.jpg' % i) }}" sizes="100vw" srcset="{{
url_for('static', filename='images/slide%i.jpg' % i) }} 1920w, {{
url_for('static', filename='images/slide%i-800px.jpg' % i) }} 800w, {{
url_for('static', filename='images/slide%i-400px.jpg' % i) }} 400w" alt=""
loading="lazy" style="background-color: {{ dominant_color('images/slide%i.jpg'
% i) }};">
</noscript>
{% endmacro %}
{% block head %}
diff -r 5373d0e05793 -r 2357a8c88505 templates/layout.html
--- a/templates/layout.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/layout.html Tue Oct 15 12:09:06 2019 +0200
@@ -89,7 +89,7 @@
<footer id="footer">
{% block footer %}
<noscript class="loading-lazy">
- <img class="img-fluid" src="{{ url_for('static',
filename='images/placeholder-large.jpg') }}" sizes="100vw" srcset="{{
url_for('static', filename='images/placeholder-large.jpg') }} 1920w, {{
url_for('static', filename='images/placeholder-large-800px.jpg') }} 800w, {{
url_for('static', filename='images/placeholder-large-400px.jpg') }} 400w"
alt="" loading="lazy"/>
+ <img class="img-fluid" src="{{ url_for('static',
filename='images/placeholder-large.jpg') }}" sizes="100vw" srcset="{{
url_for('static', filename='images/placeholder-large.jpg') }} 1920w, {{
url_for('static', filename='images/placeholder-large-800px.jpg') }} 800w, {{
url_for('static', filename='images/placeholder-large-400px.jpg') }} 400w"
alt="" loading="lazy" style="background-color: {{
dominant_color('images/placeholder-large.jpg') }};"/>
</noscript>
<section class="topfooter">
<div class="container">
diff -r 5373d0e05793 -r 2357a8c88505 templates/not_found.html
--- a/templates/not_found.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/not_found.html Tue Oct 15 12:09:06 2019 +0200
@@ -1,13 +1,13 @@
{% set title = "Whoops, that page isn't here!" %}
{% extends "layout.html" %}
-{% from "utils.html" import background %}
+{% from "utils.html" import background with context %}
{% block style %}
{{ super() }}
{{ background('banner-dead-end') }}
{% endblock style %}
{% block content %}
{{ super() }}
-<section class="section section-banner background-banner-dead-end filter
filter-primary text-center">
+<section class="section section-banner background-banner-dead-end filter
filter-primary text-center lazy">
<div class="container">
<h1 class="mb-0 text-white position-relative z-1">
<span class="material-icons">sentiment_dissatisfied</span>
diff -r 5373d0e05793 -r 2357a8c88505 templates/presentations.html
--- a/templates/presentations.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/presentations.html Tue Oct 15 12:09:06 2019 +0200
@@ -17,13 +17,13 @@
]
%}
{% extends "layout-toc.html" %}
-{% from "utils.html" import background %}
+{% from "utils.html" import background with context %}
{% block style %}
{{ super() }}
{{ background('banner-presentations') }}
{% endblock %}
{% block content %}
-<section class="section section-banner background-banner-presentations filter
filter-primary text-center">
+<section class="section section-banner background-banner-presentations filter
filter-primary text-center lazy">
<div class="container">
<h1 class="mb-0 text-white position-relative z-1">{{ title }}</h1>
</div>
diff -r 5373d0e05793 -r 2357a8c88505 templates/service_providers_start.html
--- a/templates/service_providers_start.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/service_providers_start.html Tue Oct 15 12:09:06 2019 +0200
@@ -9,7 +9,7 @@
]
%}
{% extends "layout-toc.html" %}
-{% from "utils.html" import background %}
+{% from "utils.html" import background with context %}
{% block style %}
{{ super() }}
<style>
@@ -24,7 +24,7 @@
{{ background('banner-service-providers-start') }}
{% endblock style %}
{% block content %}
-<section class="section section-banner
background-banner-service-providers-start filter filter-primary text-center">
+<section class="section section-banner
background-banner-service-providers-start filter filter-primary text-center
lazy">
<div class="container">
<h1 class="mb-0 text-white position-relative z-1">{{ title }}</h1>
</div>
diff -r 5373d0e05793 -r 2357a8c88505 templates/success_stories.html
--- a/templates/success_stories.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/success_stories.html Tue Oct 15 12:09:06 2019 +0200
@@ -2,14 +2,14 @@
{% set description = "List of Tryton's success stories" %}
{% set keywords = ["sucess story", "review", "case study" ] %}
{% extends "layout.html" %}
-{% from "utils.html" import background, case_card %}
+{% from "utils.html" import background, case_card with context %}
{% block style %}
{{ super() }}
{{ background('banner-success-stories') }}
{% endblock %}
{% block content %}
{{ super() }}
-<div class="section section-banner background-banner-success-stories filter
filter-primary text-center">
+<div class="section section-banner background-banner-success-stories filter
filter-primary text-center lazy">
<div class="container">
<h1 class="mb-0 text-white position-relative z-1">{{ title }}</h1>
</div>
diff -r 5373d0e05793 -r 2357a8c88505 templates/success_stories/als-swiss.html
--- a/templates/success_stories/als-swiss.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/success_stories/als-swiss.html Tue Oct 15 12:09:06 2019 +0200
@@ -1,7 +1,7 @@
{% set title = "ALS Swiss" %}
{% set description = "Success story of ALS Swiss implementing Tryton for
fundraising" %}
{% set keywords = ["success story", "review", "case study", "fundraising"] %}
-{% set banner = "als-swiss/banner.jpg" %}
+{% set banner = "als-swiss/banner" %}
{% set logo = "images/success-stories/als-swiss.jpg" %}
{% extends "success_stories/layout.html" %}
{% block customer %}
diff -r 5373d0e05793 -r 2357a8c88505 templates/success_stories/ammeba.html
--- a/templates/success_stories/ammeba.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/success_stories/ammeba.html Tue Oct 15 12:09:06 2019 +0200
@@ -1,7 +1,7 @@
{% set title = "AMMEBA" %}
{% set description = "Success story of AMMEBA implementing Tryton" %}
{% set keywords = ["success story", "review", "case study"] %}
-{% set banner = "ammeba/banner.jpg" %}
+{% set banner = "ammeba/banner" %}
{% set logo = "images/success-stories/ammeba.jpg" %}
{% extends "success_stories/layout.html" %}
{% block customer %}
diff -r 5373d0e05793 -r 2357a8c88505
templates/success_stories/blue-box-distribution.html
--- a/templates/success_stories/blue-box-distribution.html Tue Oct 15
10:32:31 2019 +0200
+++ b/templates/success_stories/blue-box-distribution.html Tue Oct 15
12:09:06 2019 +0200
@@ -1,7 +1,7 @@
{% set title = "Blue Box Distribution" %}
{% set description = "Success story of Blue Box Distribution implementing
Tryton" %}
{% set keywords = ["success story", "review", "case study"] %}
-{% set banner = "blue-box-distribution/banner.jpg" %}
+{% set banner = "blue-box-distribution/banner" %}
{% set logo = "images/success-stories/blue-box-distribution.jpg" %}
{% extends "success_stories/layout.html" %}
{% block customer %}
diff -r 5373d0e05793 -r 2357a8c88505 templates/success_stories/camir.html
--- a/templates/success_stories/camir.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/success_stories/camir.html Tue Oct 15 12:09:06 2019 +0200
@@ -1,7 +1,7 @@
{% set title = "CAMIR" %}
{% set description = "Success story of CAMIR implementing Tryton" %}
{% set keywords = ["success story", "review", "case study"] %}
-{% set banner = "camir/banner.jpg" %}
+{% set banner = "camir/banner" %}
{% set logo = "images/success-stories/camir.jpg" %}
{% extends "success_stories/layout.html" %}
{% block customer %}
diff -r 5373d0e05793 -r 2357a8c88505
templates/success_stories/expertise-vision.html
--- a/templates/success_stories/expertise-vision.html Tue Oct 15 10:32:31
2019 +0200
+++ b/templates/success_stories/expertise-vision.html Tue Oct 15 12:09:06
2019 +0200
@@ -1,7 +1,7 @@
{% set title = "Expertise Vision" %}
{% set description = "Success story of Expertise Vision implementing Tryton" %}
{% set keywords = ["success story", "review", "case study"] %}
-{% set banner = "expertise-vision/banner.jpg" %}
+{% set banner = "expertise-vision/banner" %}
{% set logo = "images/success-stories/expertise-vision.jpg" %}
{% extends "success_stories/layout.html" %}
{% block customer %}
diff -r 5373d0e05793 -r 2357a8c88505 templates/success_stories/felber.html
--- a/templates/success_stories/felber.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/success_stories/felber.html Tue Oct 15 12:09:06 2019 +0200
@@ -1,7 +1,7 @@
{% set title = "Felber" %}
{% set description = "Success story of Felber implementing Tryton" %}
{% set keywords = ["success story", "review", "case study"] %}
-{% set banner = "felber/banner.jpg" %}
+{% set banner = "felber/banner" %}
{% set logo = "images/success-stories/felber.jpg" %}
{% extends "success_stories/layout.html" %}
{% block customer %}
diff -r 5373d0e05793 -r 2357a8c88505 templates/success_stories/gotsho-lims.html
--- a/templates/success_stories/gotsho-lims.html Tue Oct 15 10:32:31
2019 +0200
+++ b/templates/success_stories/gotsho-lims.html Tue Oct 15 12:09:06
2019 +0200
@@ -1,7 +1,7 @@
{% set title = "GotSHO" %}
{% set description = "Success story of GotSHO developing LIMS with Tryton" %}
{% set keywords = ["success story", "review", "case study"] %}
-{% set banner = "gotsho-lims/banner.jpg" %}
+{% set banner = "gotsho-lims/banner" %}
{% set logo = "images/success-stories/gotsho-lims.jpg" %}
{% extends "success_stories/layout.html" %}
{% block customer %}
diff -r 5373d0e05793 -r 2357a8c88505 templates/success_stories/grufesa.html
--- a/templates/success_stories/grufesa.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/success_stories/grufesa.html Tue Oct 15 12:09:06 2019 +0200
@@ -1,7 +1,7 @@
{% set title = "Grufesa SAT" %}
{% set description = "Success story of Grufesa implementing Tryton" %}
{% set keywords = ["success story", "review", "case study", "agriculture"] %}
-{% set banner = "grufesa/banner.jpg" %}
+{% set banner = "grufesa/banner" %}
{% set logo = "images/success-stories/grufesa.jpg" %}
{% extends "success_stories/layout.html" %}
{% block customer %}
diff -r 5373d0e05793 -r 2357a8c88505 templates/success_stories/koolvet.html
--- a/templates/success_stories/koolvet.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/success_stories/koolvet.html Tue Oct 15 12:09:06 2019 +0200
@@ -1,7 +1,7 @@
{% set title = "Koolvet" %}
{% set description = "Success story of veterinary software based on Tryton" %}
{% set keywords = ["success story", "review", "case study", "veterinary"] %}
-{% set banner = "koolvet/banner.jpg" %}
+{% set banner = "koolvet/banner" %}
{% set logo = "images/success-stories/koolvet.jpg" %}
{% extends "success_stories/layout.html" %}
{% block customer %}
diff -r 5373d0e05793 -r 2357a8c88505 templates/success_stories/layout.html
--- a/templates/success_stories/layout.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/success_stories/layout.html Tue Oct 15 12:09:06 2019 +0200
@@ -1,12 +1,16 @@
{% extends "layout.html" %}
-{% from "utils.html" import case_card %}
+{% from "utils.html" import background, case_card with context %}
+{% block style %}
+{{ super() }}
+{{ background('success-stories/%s' % banner) }}
+{% endblock style %}
{% block head %}
{{ super() }}
<link rel="prefetch" href="{{ next_case.url }}"/>
{% endblock %}
{% block content %}
{{ super() }}
-<div class="section section-banner filter filter-primary text-center"
style="background-image:url({{ url_for('static',
filename='images/success-stories/%s' % banner) }});">
+<div class="section section-banner background-success-stories-{{ banner |
replace('/', '-') }} filter filter-primary text-center lazy">
<div class="container">
<h1 class="mb-0 text-white position-relative z-1">{{ title }}</h1>
</div>
diff -r 5373d0e05793 -r 2357a8c88505 templates/success_stories/revelle.html
--- a/templates/success_stories/revelle.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/success_stories/revelle.html Tue Oct 15 12:09:06 2019 +0200
@@ -1,7 +1,7 @@
{% set title = "Revelle Group" %}
{% set description = "Success story of Revelle Group implementing Tryton" %}
{% set keywords = ["success story", "review", "case study"] %}
-{% set banner = "revelle/banner.jpg" %}
+{% set banner = "revelle/banner" %}
{% set logo = "images/success-stories/revelle.jpg" %}
{% extends "success_stories/layout.html" %}
{% block customer %}
diff -r 5373d0e05793 -r 2357a8c88505 templates/utils.html
--- a/templates/utils.html Tue Oct 15 10:32:31 2019 +0200
+++ b/templates/utils.html Tue Oct 15 12:09:06 2019 +0200
@@ -1,15 +1,19 @@
{% macro background(name) %}
<style>
-.background-{{ name }} {
+.background-{{ name | replace('/', '-') }}.lazy {
+ background-image: none;
+ background-color: {{ dominant_color('images/%s.jpg' % name) }};
+}
+.background-{{ name | replace('/', '-') }} {
background-image: url('{{ url_for('static', filename='images/%s.jpg' %
name) }}');
}
@media (max-width: 800px) {
- .background-{{ name }} {
+ .background-{{ name | replace('/', '-') }} {
background-image: url('{{ url_for('static',
filename='images/%s-800px.jpg' % name) }}');
}
}
@media (max-width: 400px) {
- .background-{{ name }} {
+ .background-{{ name | replace('/', '-') }} {
background-image:url('{{ url_for('static',
filename='images/%s-400px.jpg' % name) }}');
}
}
