cache des images resize

This commit is contained in:
Valentin 2024-04-16 14:19:14 +02:00
parent 5ae12fdc14
commit 4bd30ff772
10 changed files with 55 additions and 25 deletions

1
.gitignore vendored
View File

@ -6,6 +6,7 @@
.cache
dist
public/api
public/imgs
# Node dependencies
node_modules

View File

@ -40,10 +40,13 @@
margin: 0;
box-sizing: border-box;
font-family: 'Latitude', serif;
font-size: 1.1rem;
font-size: 1rem;
font-weight: normal;
text-decoration: none;
color: #0e312f;
@media screen and (min-width: 800px) {
font-size: 1.1rem;
}
}
body {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 28 KiB

View File

@ -131,6 +131,7 @@ export default {
width: 3rem;
z-index: 1;
img {
padding-top: 10px;
width: 100%;
transform: rotate(0deg);
transition: transform 0.3s ease-out;
@ -156,6 +157,9 @@ export default {
}
}
}
> div > a > img {
padding: 10px;
}
}
}
</style>

View File

@ -1,9 +1,9 @@
<template>
<main>
<article v-for="content in contents" :key="content.id">
<article v-for="content in contents.slice().reverse()" :key="content.id">
<div>
<img
:src="`/small/${content.image ? content.image : content.shop_image}.webp`"
:src="`/imgs/small/${content.image ? content.image : content.shop_image}.webp`"
:alt="content.titre"
@click="displaySlider(content.id)"
/>
@ -28,7 +28,7 @@
<swiper-slide v-for="content in contents" :key="content.id">
<div class="swiper-zoom-container">
<img
:src="`/large/${content.image ? content.image : content.shop_image}.webp`"
:src="`/imgs/large/${content.image ? content.image : content.shop_image}.webp`"
:alt="content.titre"
/>
</div>
@ -135,6 +135,14 @@ export default {
img{
width: 60%;
}
> .swiper-zoom-container {
> img {
cursor: zoom-in;
}
}
}
.swiper-slide-zoomed > .swiper-zoom-container > img {
cursor: move;
}
}
.swiper-button-prev,
@ -189,9 +197,10 @@ export default {
width: 15vw;
}
.swiper .swiper-wrapper .swiper-slide img {
width: 30%;
width: 60%;
padding-top: 2rem;
padding-bottom: 2rem;
}
}
}
</style>

View File

@ -30,7 +30,11 @@ export default defineNuxtConfig({
},
hooks: {
'nitro:build:public-assets': async () => {
await cacheImages();
const imageSizes = [
{ small: 750 },
{ large: 1920 },
];
await cacheImages(imageSizes);
}
},
app: {

View File

@ -2,7 +2,7 @@
<main id="contact">
<div>
<img
:src="`/api/assets/${globalData.contact_image}.webp`"
:src="`/imgs/small/${globalData.contact_image}.webp`"
:alt="globalData.contact_image_titre"
/>
</div>

View File

@ -2,7 +2,7 @@
<main>
<div class="indexImg" v-for="image in itemsAccueil" :key="image.id">
<img
:src="`/api/assets/${image.image_accueil}.webp`"
:src="`/imgs/large/${image.image_accueil}.webp`"
:alt="image.titre"
/>
</div>

View File

@ -4,7 +4,7 @@ import { promisify } from 'util';
import { resizeImages } from '../ssg_hooks/resizeImages.js'
export async function cacheImages() {
export async function cacheImages(imageSizes) {
const sourceFolder = './.output/public/api/assets';
const destinationFolder = './public/api/assets';
@ -58,11 +58,6 @@ export async function cacheImages() {
console.log('Start images resizing.');
const imageSizes = [
{ small: 750 },
{ large: 1920 },
];
await resizeImages(imageSizes);
} catch (error) {

View File

@ -1,35 +1,49 @@
import fs from 'fs';
import path from 'path';
import sharp from 'sharp';
import { promisify } from 'util';
export async function resizeImages(sizes) {
const stat = promisify(fs.stat);
const copyFile = promisify(fs.copyFile);
const sourceFolder = './public/api/assets';
const outputFolder = './.output/public';
const outputFolder = './.output/public/imgs';
const sizeCacheFolder = './public/imgs';
for (const size of sizes) {
const key = Object.keys(size)[0];
const sizeFolder = `${outputFolder}/${key}`;
if (!fs.existsSync(sizeFolder)) {
fs.mkdirSync(sizeFolder, { recursive: true });
}
if (!fs.existsSync(sizeFolder)) fs.mkdirSync(sizeFolder, { recursive: true });
const cacheSizeFolder = `${sizeCacheFolder}/${key}`;
if (!fs.existsSync(cacheSizeFolder)) fs.mkdirSync(cacheSizeFolder, { recursive: true });
}
const files = fs.readdirSync(sourceFolder);
for (const file of files) {
const filePath = `${sourceFolder}/${file}`;
const image = sharp(filePath);
for (const size of sizes) {
const key = Object.keys(size)[0];
const sizeFolder = `${outputFolder}/${key}`;
const destinationFile = path.join(sizeCacheFolder, key, file);
try {
const destinationFileStat = await stat(destinationFile);
} catch (error) {
if (error.code === 'ENOENT') {
const width = parseInt(size[key]);
await image.clone().resize({ width }).toFile(`${sizeFolder}/${file}`);
await image.clone().resize({ width }).toFile(destinationFile);
await copyFile(destinationFile, path.join(outputFolder, key, file));
} else {
throw error;
}
}
// fs.rmSync('./.output/public/api/assets', { recursive: true, force: true });
console.log('Images resized and saved successfully.');
}
}
fs.rmSync('./.output/public/api/assets', { recursive: true, force: true });
console.log('Images resized and cached successfully.');
}