[about] ⚡️ | Converti les images des anciennes versions
All checks were successful
continuous-integration/drone Build is passing
All checks were successful
continuous-integration/drone Build is passing
This commit is contained in:
parent
84040512d0
commit
065abb3b40
3 changed files with 28 additions and 3 deletions
|
@ -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>
|
||||
|
|
|
@ -62,7 +62,10 @@ J’ai pour but de faire pas mal d’autres 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">
|
||||
|
|
|
@ -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 we’re using addPlugin.
|
||||
});
|
||||
|
||||
// TODO loading=eager and fetchpriority=high
|
||||
let imageAttributes = {
|
||||
alt,
|
||||
sizes,
|
||||
loading: "lazy",
|
||||
decoding: "async",
|
||||
};
|
||||
return eleventyImage.generateHTML(metadata, imageAttributes);
|
||||
});
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue