gcch/haiku-atelier-2024
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fonc(twig) créé une macro pour la génération d'une balise img multi-formats

Browse source
This commit is contained in:
gcch 2024-10-24 16:39:47 +02:00
commit 5e1f1e03e7
6 changed files with 89 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

3
web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css
View file

@ -35,6 +35,9 @@
visibility: hidden;
opacity: 0;
}
#page-accueil .storytelling__image picture {
max-height: inherit;
}
#page-accueil .storytelling__image img {
scale: 0.9;
max-height: inherit;

2
web/app/themes/haiku-atelier-2024/assets/css/pages/page-accueil.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":"AAEA;AACE;EACA;AAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"page-accueil.css"}
{"version":3,"sourceRoot":"","sources":["../../../src/sass/pages/page-accueil.scss"],"names":[],"mappings":"AAEA;AACE;EACA;AAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA","file":"page-accueil.css"}

4
web/app/themes/haiku-atelier-2024/src/sass/pages/page-accueil.scss
View file

@ -41,6 +41,10 @@
opacity: 0;
}
picture {
max-height: inherit;
}
img {
scale: 0.9;
max-height: inherit;

23
web/app/themes/haiku-atelier-2024/views/a-propos.twig
View file

@ -1,28 +1,13 @@
{% extends "base.twig" %}
{% import "macros/images.twig" as images %}
{% block contenu %}
<main id="page-a-propos">
<div class="storytelling">
<div class="storytelling__conteneur">
<img
alt=""
decoding="sync"
height="4127"
id="image-1"
loading="lazy"
src="{{ site.theme.link }}/assets/img/about/tool11.png"
width="3828"
/>
<img
alt=""
decoding="sync"
height="1080"
id="image-2"
loading="lazy"
src="{{ site.theme.link }}/assets/img/about/pic1.png"
width="903"
/>
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/tool11", "", 3828, 4127) }}
{{ images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/about/pic1", "", 903, 1080) }}
</div>
</div>
</main>

156
web/app/themes/haiku-atelier-2024/views/accueil.twig
View file

@ -1,4 +1,5 @@
{% extends "base.twig" %}
{% import "macros/images.twig" as images %}
{% block contenu %}
<main id="page-accueil">
@ -8,194 +9,141 @@
class="storytelling__image"
data-index="1"
>
<img
alt=""
decoding="sync"
height="1080"
loading="lazy"
src="{{ site.theme.link }}/assets/img/storytelling/scroll1.jpg"
width="903"
/>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll1", "", 753, 900)
}}
</div>
<div
aria-hidden
class="storytelling__image"
data-cache
data-index="2"
>
<img
alt=""
decoding="sync"
height="1080"
loading="lazy"
src="{{ site.theme.link }}/assets/img/storytelling/scroll2.jpg"
width="903"
/>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll2", "", 753, 900)
}}
</div>
<div
aria-hidden
class="storytelling__image"
data-cache
data-index="3"
>
<img
alt=""
decoding="sync"
height="1080"
loading="lazy"
src="{{ site.theme.link }}/assets/img/storytelling/scroll3.jpg"
width="903"
/>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll3", "", 753, 900)
}}
</div>
<div
aria-hidden
class="storytelling__image"
data-cache
data-index="4"
>
<img
alt=""
decoding="sync"
height="1080"
loading="lazy"
src="{{ site.theme.link }}/assets/img/storytelling/scroll4.jpg"
width="903"
/>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll4", "", 753, 900)
}}
</div>
<div
aria-hidden
class="storytelling__image"
data-cache
data-index="5"
>
<img
alt=""
decoding="sync"
height="1080"
loading="lazy"
src="{{ site.theme.link }}/assets/img/storytelling/scroll5.jpg"
width="903"
/>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll5", "", 753, 900)
}}
</div>
<div
aria-hidden
class="storytelling__image"
data-cache
data-index="6"
>
<img
alt=""
decoding="sync"
height="1080"
loading="lazy"
src="{{ site.theme.link }}/assets/img/storytelling/scroll6.jpg"
width="903"
/>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll6", "", 753, 900)
}}
</div>
<div
aria-hidden
class="storytelling__image"
data-cache
data-index="7"
>
<img
alt=""
decoding="sync"
height="1080"
loading="lazy"
src="{{ site.theme.link }}/assets/img/storytelling/scroll7.jpg"
width="903"
/>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll7", "", 753, 900)
}}
</div>
<div
aria-hidden
class="storytelling__image"
data-cache
data-index="8"
>
<img
alt=""
decoding="sync"
height="1080"
loading="lazy"
src="{{ site.theme.link }}/assets/img/storytelling/scroll8.jpg"
width="903"
/>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll8", "", 753, 900)
}}
</div>
<div
aria-hidden
class="storytelling__image"
data-cache
data-index="9"
>
<img
alt=""
decoding="sync"
height="1080"
loading="lazy"
src="{{ site.theme.link }}/assets/img/storytelling/scroll9.jpg"
width="903"
/>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll9", "", 753, 900)
}}
</div>
<div
aria-hidden
class="storytelling__image"
data-cache
data-index="10"
>
<img
alt=""
decoding="sync"
height="1080"
loading="lazy"
src="{{ site.theme.link }}/assets/img/storytelling/scroll10.jpg"
width="903"
/>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll10", "", 753, 900)
}}
</div>
<div
aria-hidden
class="storytelling__image"
data-cache
data-index="11"
>
<img
alt=""
decoding="sync"
height="1080"
loading="lazy"
src="{{ site.theme.link }}/assets/img/storytelling/scroll11.jpg"
width="903"
/>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll11", "", 753, 900)
}}
</div>
<div
aria-hidden
class="storytelling__image"
data-cache
data-index="12"
>
<img
alt=""
decoding="sync"
height="1080"
loading="lazy"
src="{{ site.theme.link }}/assets/img/storytelling/scroll12.jpg"
width="903"
/>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll12", "", 753, 900)
}}
</div>
<div
aria-hidden
class="storytelling__image"
data-cache
data-index="13"
>
<img
alt=""
decoding="sync"
height="1080"
loading="lazy"
src="{{ site.theme.link }}/assets/img/storytelling/scroll13.jpg"
width="903"
/>
{{
images.genere_source_img_multi_formats("#{ site.theme.link }/assets/img/storytelling/scroll13", "", 753, 900)
}}
</div>
</div>
</div>

25
web/app/themes/haiku-atelier-2024/views/macros/images.twig Normal file
View file

@ -0,0 +1,25 @@
{% macro genere_source_img_multi_formats(rel_url, alt="", width, height) %}
<picture>
<source
srcset="{{ rel_url }}.avif"
type="image/avif"
/>
<source
srcset="{{ rel_url }}.jxl"
type="image/jxl"
/>
<source
srcset="{{ rel_url }}.webp"
type="image/webp"
/>
<img
alt="{{ alt }}"
decoding="sync"
height="{{ height }}"
loading="eager"
src="{{ rel_url }}.jpg"
width="{{ width }}"
/>
</picture>
{% endmacro %}