[about] ️ | Converti les images des anciennes versions
All checks were successful
continuous-integration/drone Build is passing

This commit is contained in:
Kazhnuz 2024-12-06 18:24:42 +01:00
parent 84040512d0
commit 065abb3b40
3 changed files with 28 additions and 3 deletions

View file

@ -7,8 +7,9 @@ layout: layouts/base.njk
<h1>{{oldVersion.key}} - {{oldVersion.yearStart}}</h1>
{{ content | safe }}
<p><em>Propulsé à cette époque par {{ oldVersion.engine }}</em></p>
<img src="/img/articles/old/{{oldVersion.img}}" alt="{{oldVersion.alt}}">
<p>( Vous pouvez affichez l'image en plus grand en l'ouvrant dans un nouvel onglet )</p>
{%- set thumb = "../../public/img/articles/old/" + oldVersion.img -%}
<a href="/img/articles/old/{{oldVersion.img}}" target="_blank">{%- image thumb, "", [800] -%}</a>
<p>( Vous pouvez affichez l'image en plus grand en cliquant dessus, l'image complète s'ouvrira dans un nouvel onglet )</p>
</article>
{% renderFile "./_includes/footer.md" %}
</main>

View file

@ -62,7 +62,10 @@ Jai pour but de faire pas mal dautres petits sites suivant mes intérêts
<a href="{{ post.url }}" class="preview-link">
<h1 class="card-header"> {{ post.data.oldVersion.key }} </h1>
<div class="preview-content">
<div class="preview-exerpt" aria-hidden="true"><p class="p-img"><img class="preview-img" src="/img/articles/old/{{ post.data.oldVersion.img }}" /></p></div>
<div class="preview-exerpt" aria-hidden="true"><p class="p-img">
{%- set thumb = "../../public/img/articles/old/" + post.data.oldVersion.img -%}
{%- thumbnail thumb, "" -%}
</p></div>
<div class="preview-overlay">
<div class="preview-metadata">
<div class="metadata-pills">

View file

@ -31,4 +31,25 @@ module.exports = eleventyConfig => {
};
return eleventyImage.generateHTML(metadata, imageAttributes);
});
eleventyConfig.addAsyncShortcode("thumbnail", async function imageShortcode(src, alt, widths, sizes) {
// Full list of formats here: https://www.11ty.dev/docs/plugins/image/#output-formats
// Warning: Avif can be resource-intensive so take care!
let formats = ["avif", "webp", "auto"];
let file = relativeToInputPath(this.page.inputPath, src);
let metadata = await eleventyImage(file, {
widths: [360],
formats,
outputDir: path.join(eleventyConfig.dir.output, "img"), // Advanced usage note: `eleventyConfig.dir` works here because were using addPlugin.
});
// TODO loading=eager and fetchpriority=high
let imageAttributes = {
alt,
sizes,
loading: "lazy",
decoding: "async",
};
return eleventyImage.generateHTML(metadata, imageAttributes);
});
};