GuerillaStudio/vanillalist
GuerillaStudio/vanillalist
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/vanillalist.git synced 2024-12-21 08:31:55 +00:00
Code Issues Activity

Put back png thumbnails as fallback

Browse source
This commit is contained in:
Tixie 2022-02-10 21:04:24 +01:00
parent 07ac97761c
commit d1674d369b
3 changed files with 35 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/_includes/plugin.js
View file

@ -15,9 +15,18 @@ module.exports = function (plugin) {
<a class="plugin__visual" href="${visualLink}?ref=vanillalist" target="_blank" rel="noopener">
<picture>
<source
type="image/webp"
media="(max-width: 559px)"
srcset="${plugin.image92} 1x,
${plugin.image184} 2x">
srcset="${plugin.imageWebp.image92} 1x,
${plugin.imageWebp.image184} 2x">
<source
type="image/webp"
srcset="${plugin.imageWebp.image308} 1x,
${plugin.imageWebp.image616} 2x">
<source
media="(max-width: 559px)"
srcset="${plugin.imagePng.image92} 1x,
${plugin.imagePng.image184} 2x">
<img
src="${plugin.image308}" alt="${plugin.title}"
srcset="${plugin.image616} 2x"

16
src/api.11ty.js
View file

@ -9,10 +9,18 @@ class Main {
const list = (await Promise.all(data.collections.plugins.map(async plugin => {
return {
...plugin,
image92: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))),
image184: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 184, height: 116 }))),
image308: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 308, height: 195 }))),
image616: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 616, height: 390 })))
imageWebp: {
image92: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))),
image184: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 184, height: 116 }))),
image308: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 308, height: 195 }))),
image616: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 616, height: 390 })))
},
imagePng: {
image92: await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))),
image184: await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 184, height: 116 }))),
image308: await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 308, height: 195 }))),
image616: await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 616, height: 390 })))
}
}
})));

16
src/index.11ty.js
View file

@ -18,10 +18,18 @@ class Main {
const list = (await Promise.all(data.plugins.map(async plugin => {
return card({
...plugin,
image92: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))),
image184: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 184, height: 116 }))),
image308: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 308, height: 195 }))),
image616: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 616, height: 390 })))
imageWebp: {
image92: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))),
image184: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 184, height: 116 }))),
image308: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 308, height: 195 }))),
image616: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 616, height: 390 })))
},
imagePng: {
image92: await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))),
image184: await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 184, height: 116 }))),
image308: await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 308, height: 195 }))),
image616: await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 616, height: 390 })))
}
})
}))).join('');