cache des images resize
This commit is contained in:
parent
5ae12fdc14
commit
4bd30ff772
|
@ -6,6 +6,7 @@
|
||||||
.cache
|
.cache
|
||||||
dist
|
dist
|
||||||
public/api
|
public/api
|
||||||
|
public/imgs
|
||||||
|
|
||||||
# Node dependencies
|
# Node dependencies
|
||||||
node_modules
|
node_modules
|
||||||
|
|
5
app.vue
5
app.vue
|
@ -40,10 +40,13 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
font-family: 'Latitude', serif;
|
font-family: 'Latitude', serif;
|
||||||
font-size: 1.1rem;
|
font-size: 1rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #0e312f;
|
color: #0e312f;
|
||||||
|
@media screen and (min-width: 800px) {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
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;
|
width: 3rem;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
img {
|
img {
|
||||||
|
padding-top: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
transition: transform 0.3s ease-out;
|
transition: transform 0.3s ease-out;
|
||||||
|
@ -156,6 +157,9 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
> div > a > img {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<main>
|
||||||
<article v-for="content in contents" :key="content.id">
|
<article v-for="content in contents.slice().reverse()" :key="content.id">
|
||||||
<div>
|
<div>
|
||||||
<img
|
<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"
|
:alt="content.titre"
|
||||||
@click="displaySlider(content.id)"
|
@click="displaySlider(content.id)"
|
||||||
/>
|
/>
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
<swiper-slide v-for="content in contents" :key="content.id">
|
<swiper-slide v-for="content in contents" :key="content.id">
|
||||||
<div class="swiper-zoom-container">
|
<div class="swiper-zoom-container">
|
||||||
<img
|
<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"
|
:alt="content.titre"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -135,6 +135,14 @@ export default {
|
||||||
img{
|
img{
|
||||||
width: 60%;
|
width: 60%;
|
||||||
}
|
}
|
||||||
|
> .swiper-zoom-container {
|
||||||
|
> img {
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.swiper-slide-zoomed > .swiper-zoom-container > img {
|
||||||
|
cursor: move;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.swiper-button-prev,
|
.swiper-button-prev,
|
||||||
|
@ -189,9 +197,10 @@ export default {
|
||||||
width: 15vw;
|
width: 15vw;
|
||||||
}
|
}
|
||||||
.swiper .swiper-wrapper .swiper-slide img {
|
.swiper .swiper-wrapper .swiper-slide img {
|
||||||
width: 30%;
|
width: 60%;
|
||||||
|
padding-top: 2rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
|
@ -30,7 +30,11 @@ export default defineNuxtConfig({
|
||||||
},
|
},
|
||||||
hooks: {
|
hooks: {
|
||||||
'nitro:build:public-assets': async () => {
|
'nitro:build:public-assets': async () => {
|
||||||
await cacheImages();
|
const imageSizes = [
|
||||||
|
{ small: 750 },
|
||||||
|
{ large: 1920 },
|
||||||
|
];
|
||||||
|
await cacheImages(imageSizes);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
app: {
|
app: {
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<main id="contact">
|
<main id="contact">
|
||||||
<div>
|
<div>
|
||||||
<img
|
<img
|
||||||
:src="`/api/assets/${globalData.contact_image}.webp`"
|
:src="`/imgs/small/${globalData.contact_image}.webp`"
|
||||||
:alt="globalData.contact_image_titre"
|
:alt="globalData.contact_image_titre"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<main>
|
<main>
|
||||||
<div class="indexImg" v-for="image in itemsAccueil" :key="image.id">
|
<div class="indexImg" v-for="image in itemsAccueil" :key="image.id">
|
||||||
<img
|
<img
|
||||||
:src="`/api/assets/${image.image_accueil}.webp`"
|
:src="`/imgs/large/${image.image_accueil}.webp`"
|
||||||
:alt="image.titre"
|
:alt="image.titre"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { promisify } from 'util';
|
||||||
|
|
||||||
import { resizeImages } from '../ssg_hooks/resizeImages.js'
|
import { resizeImages } from '../ssg_hooks/resizeImages.js'
|
||||||
|
|
||||||
export async function cacheImages() {
|
export async function cacheImages(imageSizes) {
|
||||||
const sourceFolder = './.output/public/api/assets';
|
const sourceFolder = './.output/public/api/assets';
|
||||||
const destinationFolder = './public/api/assets';
|
const destinationFolder = './public/api/assets';
|
||||||
|
|
||||||
|
@ -57,11 +57,6 @@ export async function cacheImages() {
|
||||||
console.log('Files copied successfully.');
|
console.log('Files copied successfully.');
|
||||||
|
|
||||||
console.log('Start images resizing.');
|
console.log('Start images resizing.');
|
||||||
|
|
||||||
const imageSizes = [
|
|
||||||
{ small: 750 },
|
|
||||||
{ large: 1920 },
|
|
||||||
];
|
|
||||||
|
|
||||||
await resizeImages(imageSizes);
|
await resizeImages(imageSizes);
|
||||||
|
|
||||||
|
|
|
@ -1,35 +1,49 @@
|
||||||
import fs from 'fs';
|
import fs from 'fs';
|
||||||
|
import path from 'path';
|
||||||
import sharp from 'sharp';
|
import sharp from 'sharp';
|
||||||
|
import { promisify } from 'util';
|
||||||
|
|
||||||
export async function resizeImages(sizes) {
|
export async function resizeImages(sizes) {
|
||||||
|
const stat = promisify(fs.stat);
|
||||||
|
const copyFile = promisify(fs.copyFile);
|
||||||
|
|
||||||
const sourceFolder = './public/api/assets';
|
const sourceFolder = './public/api/assets';
|
||||||
const outputFolder = './.output/public';
|
const outputFolder = './.output/public/imgs';
|
||||||
|
const sizeCacheFolder = './public/imgs';
|
||||||
|
|
||||||
for (const size of sizes) {
|
for (const size of sizes) {
|
||||||
const key = Object.keys(size)[0];
|
const key = Object.keys(size)[0];
|
||||||
const sizeFolder = `${outputFolder}/${key}`;
|
const sizeFolder = `${outputFolder}/${key}`;
|
||||||
if (!fs.existsSync(sizeFolder)) {
|
if (!fs.existsSync(sizeFolder)) fs.mkdirSync(sizeFolder, { recursive: true });
|
||||||
fs.mkdirSync(sizeFolder, { recursive: true });
|
const cacheSizeFolder = `${sizeCacheFolder}/${key}`;
|
||||||
}
|
if (!fs.existsSync(cacheSizeFolder)) fs.mkdirSync(cacheSizeFolder, { recursive: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
const files = fs.readdirSync(sourceFolder);
|
const files = fs.readdirSync(sourceFolder);
|
||||||
|
|
||||||
for (const file of files) {
|
for (const file of files) {
|
||||||
const filePath = `${sourceFolder}/${file}`;
|
const filePath = `${sourceFolder}/${file}`;
|
||||||
|
|
||||||
const image = sharp(filePath);
|
const image = sharp(filePath);
|
||||||
|
|
||||||
for (const size of sizes) {
|
for (const size of sizes) {
|
||||||
const key = Object.keys(size)[0];
|
const key = Object.keys(size)[0];
|
||||||
const sizeFolder = `${outputFolder}/${key}`;
|
const destinationFile = path.join(sizeCacheFolder, key, file);
|
||||||
const width = parseInt(size[key]);
|
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