Unverified Commit 64efcfbd authored by Stuart Robson's avatar Stuart Robson Committed by GitHub
Browse files

馃帹 The one that adds the `loading` attribute to component images (#1088)

* adds loading='lazy' to image

* adds loading attribute to all component images

* cha-cha-cha-changelog
parent 5fad14cc
Pipeline #95868 passed with stages
in 5 minutes and 11 seconds
### 1.1.0
- adds loading="lazy" to the img element for better performance
### 1.0.1
- removes word-spacing: 100vw so names wrap
......
......@@ -5,7 +5,7 @@
</p>
<a class="vf-author--avatar__link | vf-link" href="{{ meta__url }}">
<!-- wrapping the avatar in a link is optional -->
<img class="vf-author--avatar" src="{{ author__avatar }}" alt="FirstName Surname" />
<img class="vf-author--avatar" src="{{ author__avatar }}" alt="FirstName Surname" loading="lazy"/>
</a>
</div>
<div class="vf-meta__details">
......
......@@ -2,6 +2,7 @@
- fixes issue with `vf-card__image` height in safari.
- adds `object-position: center` for image.
- adds loading="lazy" to the img element for better performance
### 2.1.1
......
......@@ -29,7 +29,7 @@
">
{% if card_image -%}
<img src="{{ card_image }}" alt="{{ card_image__alt }}" class="vf-card__image">
<img src="{{ card_image }}" alt="{{ card_image__alt }}" class="vf-card__image" loading="lazy">
{%- endif %}
<div class="vf-card__content">
......
### 1.2.0
- adds loading="lazy" to the img element for better performance
### 1.1.9
- dependency bump
......
......@@ -69,7 +69,7 @@
<p>EMBL is Europe鈥檚 flagship laboratory for the life sciences. We are an intergovernmental organisation established in 1974 and are supported by over 20 member states.</p>
<p>EMBL performs fundamental research in molecular biology, studying the story of life. We offer services to the scientific community; train the next generation of scientists and strive to integrate the life sciences across Europe.</p>
<figure class="vf-figure | vf-figure--float vf-figure--float-inline-end">
<img class="vf-figure__image" src="../../assets/vf-figure/assets/figure-example.png" alt="hello alt text">
<img class="vf-figure__image" src="../../assets/vf-figure/assets/figure-example.png" alt="hello alt text" loading="lazy">
<figcaption class="vf-figure__caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus quasi dolorem eos ratione voluptatum omnis, voluptates adipisci, soluta beatae quo, excepturi, quas id libero rem suscipit! Numquam repellendus consectetur, velit.</figcaption>
</figure>
<p>We are international, innovative and interdisciplinary. We are more than 1600 people, from over 80 countries, operating across six sites in Barcelona (Spain), Cambridge (UK), Grenoble (France), Hamburg (Germany), Heidelberg (Germany), and Rome (Italy). Our scientists work in independent groups and conduct research and offer services in all areas of molecular biology.</p>
......@@ -98,7 +98,7 @@
</blockquote>
<figure>
<img src="https://news.embl.de/wp-content/uploads/2019/11/Anastasia-Vlasiuk.jpg" alt="Anastasia Vlasiuk in the lab">
<img src="https://news.embl.de/wp-content/uploads/2019/11/Anastasia-Vlasiuk.jpg" alt="Anastasia Vlasiuk in the lab" loading="lazy">
<figcaption>Anastasiia Vlasiuk, PhD student in the Asari group, recording the visual responses of an isolated retina. PHOTO: Marietta Schupp/EMBL</figcaption>
</figure>
......
### 1.0.0
- adds loading="lazy" to the img element for better performance
### 1.0.0-alpha.8
- Version bump only for package @visual-framework/vf-discussion
......
......@@ -5,7 +5,7 @@
{% for item in discussions %}
<li class="vf-discussion__item">
<div class="vf-discussion__meta">
<img class="vf-discussion__author-avatar" src="{{item.imageUrl | path }}" alt="">
<img class="vf-discussion__author-avatar" src="{{item.imageUrl | path }}" alt="" loading="lazy">
<cite class="vf-discussion__author">{{item.name}}</cite><span> says:</span>
<p class="vf-discussion__date">{{item.date}}</p>
</div>
......@@ -22,7 +22,7 @@
{% for item in item.nested %}
<li class="vf-discussion__item">
<div class="vf-discussion__meta">
<img class="vf-discussion__author-avatar" src="{{item.imageUrl | path }}" alt="">
<img class="vf-discussion__author-avatar" src="{{item.imageUrl | path }}" alt="" loading="lazy">
<cite class="vf-discussion__author">{{item.name}}</cite><span> says:</span>
<p class="vf-discussion__date">{{item.date}}</p>
</div>
......
### 1.3.0
- adds loading="lazy" to the img element for better performance
### 1.2.0
- Changes structure of nunjuck to add the ability to make use of props.
......
......@@ -10,7 +10,7 @@
{%- if override_class %} | {{override_class}}{% endif -%}"
>
<img class="vf-figure__image" src="{{imageUrl}}" alt="{{alttext}}">
<img class="vf-figure__image" src="{{imageUrl}}" alt="{{alttext}}" loading="lazy">
<figcaption class="vf-figure__caption">
{{- html | safe if html else text -}}
......
### 1.6.0
- adds loading="lazy" to the img element for better performance
### 1.5.0
- makes theme variant naming and decisions consistent.
......
......@@ -53,7 +53,7 @@
<section class="vf-hero vf-hero--extreme">
<div class="vf-hero__image">
<img src="{{ '../../assets/vf-hero/assets/vf-intro-group.png' | path }}" alt="">
<img src="{{ '../../assets/vf-hero/assets/vf-intro-group.png' | path }}" alt="" loading="lazy">
</div>
<div class="vf-hero__content">
......
### 1.3.0
- adds loading="eager" to the img element for better performance
### 1.2.0
- adds 'context' for the logo
......
......@@ -9,7 +9,7 @@
{% if id %} id="{{-id-}}"{% endif %}
class="vf-logo{%- if logo_text %} | vf-logo--has-text{% endif -%}
{%- if override_class %} | {{override_class}}{% endif -%}">
<img class="vf-logo__image" src="{{ image }}" alt="{{ logo_text }}">
<img class="vf-logo__image" src="{{ image }}" alt="{{ logo_text }}" loading="eager">
{% if logo_text %}
<span class="vf-logo__text{% if hidden_text %} vf-u-sr-only{% endif %}">{{logo_text}}</span>
{% endif %}
......
### 1.2.0
- adds loading="lazy" to the img element for better performance
### 1.1.0
- makes theme variant naming and decisions consistent.
......
......@@ -42,7 +42,7 @@
{%- if layout == block %} vf-profile--block{%- else %} vf-profile--inline{%- endif -%}
">
{% if hide_profile__image == true %}{% else %}
<img class="vf-profile__image" src="{{ profile__image }}" alt="{{ profile__image_alt }}">
<img class="vf-profile__image" src="{{ profile__image }}" alt="{{ profile__image_alt }}" loading="lazy">
{% endif %}
{% if hide_profile__title == true %}{% else %}
......
### 1.3.0
- adds loading="lazy" to the img element for better performance
### 1.2.0
- makes theme variant naming and decisions consistent.
......
<article class="vf-summary vf-summary--has-image">
<a href="{{ summary__href }}" class="vf-summary__link">
<img class="vf-summary__image vf-summary__image--thumbnail" src="https://www.ebi.ac.uk/biosamples/images/logo_biosamples.png" alt="BioSamples">
<img class="vf-summary__image vf-summary__image--thumbnail" src="https://www.ebi.ac.uk/biosamples/images/logo_biosamples.png" alt="BioSamples" loading="lazy">
</a>
<h3 class="vf-summary__title">
<a href="{{ summary__href }}" class="vf-summary__link">
......
<article class="vf-summary vf-summary--news">
<span class="vf-summary__date">22 June 2018</span>
<img class="vf-summary__image" src="{{ '../../assets/vf-summary/assets/vf-summary--news-has-image.jpg' | path }}" alt="">
<img class="vf-summary__image" src="{{ '../../assets/vf-summary/assets/vf-summary--news-has-image.jpg' | path }}" alt="" loading="lazy">
<h3 class="vf-summary__title">
<a href="{{ summary__href }}" class="vf-summary__link">
{{ summary__title }}
......
<article class="vf-summary vf-summary--profile">
<img class="vf-summary__image vf-summary__image--avatar" src="{{image}}" alt="">
<img class="vf-summary__image vf-summary__image--avatar" src="{{image}}" alt="" loading="lazy">
<h3 class="vf-summary__title">
<a href="{{ summary__href }}" class="vf-summary__link">{{name}}</a>
</h3>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment