GuerillaStudio/vanillalist
GuerillaStudio/vanillalist
1
0
Fork 0
mirror of https://github.com/GuerillaStudio/vanillalist.git synced 2024-10-22 17:37:29 +00:00
Code Issues Activity

Optimize images

Browse source
This commit is contained in:
Tixie 2021-03-01 10:08:53 +01:00
parent 2a415686f4
commit 18f9492662
3 changed files with 18 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/_includes/plugin.js
View file

@ -13,7 +13,16 @@ module.exports = function (plugin) {
return ` return `
<div class="plugin"> <div class="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">
<img srcset="${plugin.image} 1x, ${plugin.image2x} 2x" alt="${plugin.title}" width="308" height="195"> <picture>
<source
media="(max-width: 559px)"
srcset="${plugin.image92} 1x,
${plugin.image184} 2x">
<img
src="${plugin.image308}" alt="${plugin.title}"
srcset="${plugin.image616} 2x"
width="308" height="195">
</picture>
</a> </a>
<h2 class="plugin__name">${plugin.title}</h2> <h2 class="plugin__name">${plugin.title}</h2>
<p class="plugin__about">${plugin.description}</p> <p class="plugin__about">${plugin.description}</p>

6
src/api.11ty.js
View file

@ -9,8 +9,10 @@ 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,
image: await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 425, height: 270 }))), image92: await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))),
image2x: await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 616, height: 390 }))) 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 })))
} }
}))); })));

6
src/index.11ty.js
View file

@ -18,8 +18,10 @@ 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,
image: await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 308, height: 195 }))), image92: await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 92, height: 58 }))),
image2x: await this.getUrl(this.png(this.resize('./uploads/' + plugin.image, { width: 616, height: 390 }))) 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('');