cache des images resize
This commit is contained in:
parent
5ae12fdc14
commit
4bd30ff772
|
@ -6,6 +6,7 @@
|
|||
.cache
|
||||
dist
|
||||
public/api
|
||||
public/imgs
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
|
5
app.vue
5
app.vue
|
@ -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 |
|
@ -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>
|
|
@ -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>
|
|
@ -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: {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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 width = parseInt(size[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(destinationFile);
|
||||
await copyFile(destinationFile, path.join(outputFolder, key, file));
|
||||
} else {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
await image.clone().resize({ width }).toFile(`${sizeFolder}/${file}`);
|
||||
}
|
||||
}
|
||||
|
||||
// fs.rmSync('./.output/public/api/assets', { recursive: true, force: true });
|
||||
fs.rmSync('./.output/public/api/assets', { recursive: true, force: true });
|
||||
|
||||
console.log('Images resized and saved successfully.');
|
||||
console.log('Images resized and cached successfully.');
|
||||
}
|
Loading…
Reference in New Issue