Skip to content
Snippets Groups Projects
Commit 399944f221a1 authored by Cédric Krier's avatar Cédric Krier :atom:
Browse files

Use lazy loading on some images

parent 43b78d783beb
No related branches found
No related tags found
No related merge requests found
Showing
with 59 additions and 19 deletions
......@@ -18,6 +18,7 @@
'node_modules/bootstrap/dist/js/bootstrap.js',
'node_modules/wowjs/dist/wow.js',
'node_modules/leaflet/dist/leaflet.js',
'node_modules/loading-attribute-polyfill/loading-attribute-polyfill.js',
'js/wow.js',
'js/highlight.pack.js',
'js/highlight.js',
......
......@@ -19,6 +19,7 @@
"gulp-uglify": "^3.0.2",
"jquery": "^3.4.1",
"leaflet": "^1.5.1",
"loading-attribute-polyfill": "^1.1.0",
"material-icons": "^0.3.1",
"popper.js": "^1.15.0",
"wowjs": "^1.1.3"
......
......@@ -60,7 +60,9 @@
{% for profile in event.profiles %}
<div class="h-card vcard d-flex flex-wrap justify-content-start align-items-start">
<a class="u-url url" href="//www.gravatar.com/{{ profile.gravatar }}">
<img class="img-thumbnail u-photo photo" src="//www.gravatar.com/avatar/{{ profile.gravatar }}?=48" alt="Avatar of {{ profile.name }}"/>
<noscript class="loading-lazy">
<img class="img-thumbnail u-photo photo" src="//www.gravatar.com/avatar/{{ profile.gravatar }}?=48" alt="Avatar of {{ profile.name }}" loading="lazy"/>
</noscript>
</a>
<span class="p-name fn m-1">{{ profile.name }}{% if profile.company %},<br/><a class="p-org org" href="{{ profile.url }}">{{ profile.company }}</a>{% endif %}</span>
</div>
......
......@@ -136,6 +136,8 @@
</div>
<p>With the support of:</p>
<a href="http://www.emd-management.fr/">
<img class="img-thumbnail" src="{{ url_for('static', filename='images/events/tum2019-emd.jpg') }}" alt="École de Commerce et de Management"/>
<noscript class="loading-lazy">
<img class="img-thumbnail" src="{{ url_for('static', filename='images/events/tum2019-emd.jpg') }}" alt="École de Commerce et de Management" loading="lazy"/>
</noscript>
</a>
<a href="http://www.libertis.org/">
......@@ -140,6 +142,8 @@
</a>
<a href="http://www.libertis.org/">
<img class="img-thumbnail" src="{{ url_for('static', filename='images/events/tum2019-libertis.jpg') }}" alt="Libertis"/>
<noscript class="loading-lazy">
<img class="img-thumbnail" src="{{ url_for('static', filename='images/events/tum2019-libertis.jpg') }}" alt="Libertis" loading="lazy"/>
</noscript>
</a>
</div>
</section>
......
......@@ -2,7 +2,9 @@
{% set description = "TRYTON is business software, ideal for companies of any size, easy to use, complete and 100% Open Source." %}
{% extends "layout.html" %}
{% macro slide_img(i) %}
<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="">
<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">
</noscript>
{% endmacro %}
{% block head %}
{{ super() }}
......
......@@ -82,7 +82,9 @@
<footer id="footer">
{% block footer %}
<img class="img-fluid wow fadeIn" 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=""/>
<noscript class="loading-lazy">
<img class="img-fluid wow fadeIn" 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"/>
</noscript>
<section class="topfooter">
<div class="container">
<div class="row">
......@@ -106,7 +108,9 @@
</div>
<div class="offset-lg-1 col-md-5 col-lg-4">
<div class="footer-right">
<img class="img-fluid wow fadeIn" src="{{ url_for('static', filename='images/tryton-white.png') }}" width="110" height="32" alt="Tryton" />
<noscript class="loading-lazy">
<img class="img-fluid wow fadeIn" src="{{ url_for('static', filename='images/tryton-white.png') }}" width="110" height="32" alt="Tryton" loading="lazy"/>
</noscript>
<hr/>
<p class="lead">Modularity, scalability & security for your business</p>
<p>
......
......@@ -2,7 +2,9 @@
<div class="card mx-auto shadow d-flex flex-colum" style="width: 24rem; height: 100%">
<a href="{{ website }}" style="height: 240px">
{% if img %}
<img class="card-img-top text-center d-block" src="{{ img }}" alt="{{ name }}"/>
<noscript class="loading-lazy">
<img class="card-img-top text-center d-block" src="{{ img }}" alt="{{ name }}" loading="lazy"/>
</noscript>
{% endif %}
</a>
<div class="card-body">
......
......@@ -8,7 +8,9 @@
{{ super() }}
<p class="lead">The <a href="https://www.als-schweiz.ch/">ALS society in Switzerland</a> helps and cares for people suffering from amyotrophic lateral sclerosis.
The society also provides support for relatives and friends of people suffering from this progressive life-limiting illness.</p>
<img src="{{ url_for('static', filename='images/success-stories/als-swiss/banner.jpg') }}" class="img-fluid" alt="">
<noscript class="loading-lazy">
<img src="{{ url_for('static', filename='images/success-stories/als-swiss/banner.jpg') }}" class="img-fluid" alt="" loading="lazy">
</noscript>
{% endblock customer %}
{% block challenge %}
{{ super() }}
......
......@@ -8,7 +8,9 @@
{{ super() }}
<p class="lead"><a href="https://www.blueboxag.ch/">BLUE BOX</a> is an international distributor of hair care products based in Switzerland and Germany, selling products from great international brands.
Customers are mainly hair stylists who then use and sell the products to their customers.</p>
<img src="{{ url_for('static', filename='images/success-stories/blue-box-distribution/banner.jpg') }}" class="img-fluid" alt="">
<noscript class="loading-lazy">
<img src="{{ url_for('static', filename='images/success-stories/blue-box-distribution/banner.jpg') }}" class="img-fluid" alt="" loading="lazy">
</noscript>
{% endblock customer %}
{% block challenge %}
{{ super() }}
......
......@@ -7,7 +7,9 @@
{% block customer %}
{{ super() }}
<p class="lead">
<img src="{{ url_for('static', filename='images/success-stories/camir/warehouse1.jpg') }}" class="mx-auto my-4 d-block mx-md-4 my-md-0 float-md-left" alt="Zone C of CAMIR's warehouse">
<noscript class="loading-lazy">
<img src="{{ url_for('static', filename='images/success-stories/camir/warehouse1.jpg') }}" class="mx-auto my-4 d-block mx-md-4 my-md-0 float-md-left" alt="Zone C of CAMIR's warehouse" loading="lazy">
</noscript>
<a href="http://www.camirperu.com/">CAMIR</a>, is a company whose main activities are the commercialization of industrial products and the manufacture of metal parts at the business to business level, one of its main clients is the largest brewery factory in Peru.</p>
<p>It started operations in 1991 and is located in the JR. HELIO NRO. 5624 URB. INDUSTRIAL INFANTAS - LOS OLIVOS - LIMA - PERU.</p>
<p>It has <a href="https://www.iso.org/standard/62085.html">ISO 9001-2015</a> certification since April-2018, a process initiated in parallel with the implementation of Tryton as its ERP in 2017.</p>
......@@ -32,7 +34,9 @@
<p>In response to the problems identified during the analytical phase, we defined the scope of the changes that were required.
From this we were able to work out what Tryton modules were needed to support all of the businesses processes.</p>
<p>
<img src="{{ url_for('static', filename='images/success-stories/camir/warehouse2.jpg') }}" class="mx-auto my-4 d-block mx-md-4 my-md-0 float-md-right" alt="Zone B of CAMIR's warehouse">
<noscript class="loading-lazy">
<img src="{{ url_for('static', filename='images/success-stories/camir/warehouse2.jpg') }}" class="mx-auto my-4 d-block mx-md-4 my-md-0 float-md-right" alt="Zone B of CAMIR's warehouse" loading="lazy">
</noscript>
The modules that were needed were the following:</p>
<ul>
<li>Purchase</li>
......@@ -63,7 +67,9 @@
This reduces costs, saves time, and improves procedural agility.</p>
<p>The Purchase and Sales Register at the end of each month is generated in 3 clicks of the mouse and this makes the accountants very happy.</p>
<p>The implementation started its testing phase in June 2018, and entered production on January 1, 2019.</p>
<img src="{{ url_for('static', filename='images/success-stories/camir/manufacturer.jpg') }}" class="img-fluid" alt="Manufacturer">
<noscript class="loading-lazy">
<img src="{{ url_for('static', filename='images/success-stories/camir/manufacturer.jpg') }}" class="img-fluid" alt="Manufacturer" loading="lazy">
</noscript>
{% endblock implementation %}
{% block results %}
{{ super() }}
......
......@@ -8,7 +8,9 @@
{{ super() }}
<p class="lead"><a href="http://www.expertisevision.fr/">Expertise-Vision</a> is a French company producing vision based systems for inspecting and gauging.
They use hardware and software in order to invent, design and implement turnkey solutions for quality control and process automation.</p>
<img src="{{ url_for('static', filename='images/success-stories/expertise-vision/expert.jpg') }}" class="img-fluid" alt="Expert">
<noscript class="loading-lazy">
<img src="{{ url_for('static', filename='images/success-stories/expertise-vision/expert.jpg') }}" class="img-fluid" alt="Expert" loading="lazy">
</noscript>
{% endblock customer %}
{% block challenge %}
{{ super() }}
......
......@@ -8,7 +8,9 @@
{{ super() }}
<p class="lead"><a href="https://www.felber-ag.ch/">Felber</a> is a local producer and service provider for label stamps and signalisation products.
It is a small company with only 4 employees.</p>
<img src="{{ url_for('static', filename='images/success-stories/felber/banner.jpg') }}" class="img-fluid" alt="">
<noscript class="loading-lazy">
<img src="{{ url_for('static', filename='images/success-stories/felber/banner.jpg') }}" class="img-fluid" alt="" loading="lazy">
</noscript>
{% endblock customer %}
{% block challenge %}
{{ super() }}
......
......@@ -7,7 +7,9 @@
{% block customer %}
{{ super() }}
<p class="lead">
<img src="{{ url_for('static', filename='images/success-stories/grufesa/grufesa.jpg') }}" class="mx-4 float-right" alt="strawberries">
<noscript class="loading-lazy">
<img src="{{ url_for('static', filename='images/success-stories/grufesa/grufesa.jpg') }}" class="mx-4 float-right" alt="strawberries" loading="lazy">
</noscript>
<a href="http://grufesa.com/">Grufesa SAT</a> is one of the biggest berry exporters in Europe.
Over the last 35 years millions of people from across Europe, Russia and America have consumed strawberries they have produced.
</p>
......
......@@ -7,7 +7,9 @@
{% block customer %}
{{ super() }}
<p class="lead">
<img src="{{ url_for('static', filename='images/success-stories/koolvet/cat.jpg') }}" class="mx-4 float-right" alt="cat with veterinary">
<noscript class="loading-lazy">
<img src="{{ url_for('static', filename='images/success-stories/koolvet/cat.jpg') }}" class="mx-4 float-right" alt="cat with veterinary" loading="lazy">
</noscript>
<a href="https://www.koolvet.com/">Koolvet</a> is a young company based in Spain but expanding to South America.
It offers veterinary software for the management of clinics, veterinary offices, universities and ambulant veterinarians.
</p>
......@@ -60,7 +62,9 @@
{% block results %}
{{ super() }}
<p>
<img src="{{ url_for('static', filename='images/success-stories/koolvet/results.jpg') }}" class="mx-4 float-left" alt="computer with koolvet software">
<noscript class="loading-lazy">
<img src="{{ url_for('static', filename='images/success-stories/koolvet/results.jpg') }}" class="mx-4 float-left" alt="computer with koolvet software" loading="lazy">
</noscript>
Our customers are extremely happy with koolvet: They can access their information from anywhere using any device.
All the team members always have easy access to information that is always up to date, and their processes have been streamlined making them simpler and less error prone.
</p>
......
......@@ -20,7 +20,9 @@
{% set roundup = roundup_url(supporter) %}
<div class="col mb-gutter">
<div class="card mx-auto shadow" style="width: 200px">
<img class="card-img-top" src="{{ supporter['email'] | gravatar(198) }}" width="198" height="198" alt=""/>
<noscript class="loading-lazy">
<img class="card-img-top" src="{{ supporter['email'] | gravatar(198) }}" width="198" height="198" alt="" loading="lazy"/>
</noscript>
<div class="card-body">
<h2 class="h6 card-title">{{ supporter['name'] }}</h2>
{% if discuss %}
......
......@@ -19,7 +19,9 @@
{% macro case_card(case) %}
<div class="card mx-auto shadow d-flex flex-column" style="width: 18rem; height: 100%">
{% if case.logo %}
<img class="card-img-top" src="{{ url_for('static', filename=case.logo) }}" style="height: 180px" alt=""/>
<noscript class="loading-lazy">
<img class="card-img-top" src="{{ url_for('static', filename=case.logo) }}" style="height: 180px" alt="" loading="lazy"/>
</noscript>
{% endif %}
<div class="card-body">
<h2 class="h5 card-title">{{ case.title }}</h2>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment