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"> <a class="plugin__visual" href="${visualLink}?ref=vanillalist" target="_blank" rel="noopener">
<picture> <picture>
<source <source
type="image/webp"
media="(max-width: 559px)" media="(max-width: 559px)"
srcset="${plugin.image92} 1x, srcset="${plugin.imageWebp.image92} 1x,
${plugin.image184} 2x"> ${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 <img
src="${plugin.image308}" alt="${plugin.title}" src="${plugin.image308}" alt="${plugin.title}"
srcset="${plugin.image616} 2x" srcset="${plugin.image616} 2x"

8
src/api.11ty.js
View file

@ -9,10 +9,18 @@ class Main {
const list = (await Promise.all(data.collections.plugins.map(async plugin => { const list = (await Promise.all(data.collections.plugins.map(async plugin => {
return { return {
...plugin, ...plugin,
imageWebp: {
image92: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))), 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 }))), 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 }))), 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 }))) 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 })))
}
} }
}))); })));

8
src/index.11ty.js
View file

@ -18,10 +18,18 @@ class Main {
const list = (await Promise.all(data.plugins.map(async plugin => { const list = (await Promise.all(data.plugins.map(async plugin => {
return card({ return card({
...plugin, ...plugin,
imageWebp: {
image92: await this.getUrl(this.webp(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))), 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 }))), 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 }))), 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 }))) 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(''); }))).join('');