Skip to content

P
Philippe
Commit 2789b669 by PLN (Algolia)
Options

feat: Placeholders

parent f8ab3567
Showing with 68 additions and 103 deletions
components/BackHome.js
import Image from 'next/image'
import Image from "next/image";
import { Text, Flex } from "@chakra-ui/react";
function BackHome() {
return {
return (
<Flex px="1rem" justify="center" align="center">
<Link href={`/`}>
<Button
......@@ -16,7 +17,7 @@ function BackHome() {
</Button>
</Link>
</Flex>
}
);
}
export default BackHome
export default BackHome;
next.config.js
// next.config.js
module.exports = {
const { withPlaiceholder } = require("@plaiceholder/next");
module.exports = withPlaiceholder({
// your Next.js config
images: {
domains: [
'res.cloudinary.com'
],
domains: ["res.cloudinary.com"],
},
}
});
package.json
......@@ -12,11 +12,18 @@
"@chakra-ui/react": "^1.6.3",
"@emotion/react": "^11.4.0",
"@emotion/styled": "^11.3.0",
"@plaiceholder/next": "^2.1.0",
"framer-motion": "^4.1.17",
"image-size": "^1.0.0",
"next": "10.2.3",
"next": "^11.0.0",
"next-images": "^1.7.0",
"react": "17.0.2",
"react-dom": "17.0.2"
"plaiceholder": "^2.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sharp": "^0.28.3"
},
"devDependencies": {
"eslint": "^7.29.0",
"eslint-config-next": "^11.0.0"
}
}
pages/index.js
......@@ -4,19 +4,31 @@ import React, { useState } from "react";
import { Box, Container, Text, Wrap, WrapItem } from "@chakra-ui/react";
import Image from "next/image";
import { getAllPhotos } from "../lib/utils";
import { Img } from "@chakra-ui/react";
import Link from "next/link";
import { getPlaiceholder } from "plaiceholder";
export async function getStaticProps() {
let data = await getAllPhotos();
let data = await getAllPhotos().slice(0, 10);
let placeholders = {};
data.forEach((photo) => {
try {
getPlaiceholder(photo.path).then(({ base64 }) => {
placeholders[photo.id] = base64;
});
} catch (err) {
err;
}
});
return {
props: {
data,
placeholders,
},
};
}
export default function Home({ data }) {
export default function Home({ data, placeholders }) {
const [photos, setPhotos] = useState(data);
// TODO: Fallback with random flowers? fallbackSrc
return (
......@@ -63,16 +75,27 @@ export default function Home({ data }) {
width="80px"
color="gray.700"
/>*/}
<Img
key={"img-" + photo.path}
src={photo.path}
height="240px"
width="240px"
objectFit="cover"
placeholder="img/Diaporama/f5b1d804-3860-4073-b280-69e54985c66f.jpg"
color="gray.700"
quality={100}
/>
<Image
key={photo.path}
src={photo.path}
width={240}
height={240}
objectFit="cover"
placeholder="blur"
priority
blurDataURL={`${placeholders[photo.id]}`}
/>
{/*<Image
key={"img-" + photo.path}
src={photo.path}
height="240px"
width="240px"
objectFit="cover"
placeholder="img/Diaporama/f5b1d804-3860-4073-b280-69e54985c66f.jpg"
color="gray.700"
quality={50}
/>*/}
</Link>
</WrapItem>
))}
......
pages/photos/[id].js
......@@ -11,13 +11,8 @@ import {
import Image from "next/image";
import Head from "next/head";
import Link from "next/link";
<<<<<<< HEAD
import BackHome from "../../components/BackHome";
=======
import BackHome from "components/Back";
>>>>>>> ad87045 (feat: Credits, BackHome wip)
import { InfoIcon, AtSignIcon } from "@chakra-ui/icons";
// import { getPlaiceholder } `from "plaiceholder";
// import { getPlaiceholder } from "plaiceholder";
export async function getStaticPaths() {
const photos = await getAllPhotos();
......@@ -34,7 +29,6 @@ export async function getStaticPaths() {
}
export async function getStaticProps({ params }) {
<<<<<<< HEAD
const photo = await getPhotoById(params.id);
let placeholder = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mPkqgcAAJkAi3T5YcEAAAAASUVORK5CYII=";
......@@ -55,21 +49,18 @@ export async function getStaticProps({ params }) {
photo.dimensions.width /= 2;
photo.dimensions.height /= 2;
console.log("Resized: ", photo.dimensions.width, photo.dimensions.height);
=======
const pic = await getPhotoById(params.id);
// Fix dimensions if really big picture
console.log("Pic dims: ", pic.dimensions.width, pic.dimensions.height);
if (pic.dimensions.widths > 1000 || pic.dimensions.heigth > 1000) {
pic.dimensions.width /= 2;
pic.dimensions.height = 2;
console.log("Resized: ", pic.dimensions.width, pic.dimensions.height);
console.log("Pic dims: ", photo.dimensions.width, photo.dimensions.height);
if (photo.dimensions.widths > 1000 || photo.dimensions.heigth > 1000) {
photo.dimensions.width /= 2;
photo.dimensions.height = 2;
console.log("Resized:", photo.dimensions.width, photo.dimensions.height);
}
if (pic.dimensions.width > 1000 || pic.dimensions.heigth > 1000) {
pic.dimensions.width /= 2;
pic.dimensions.height /= 2;
console.log("Resized: ", pic.dimensions.width, pic.dimensions.height);
>>>>>>> 54109d5 (feat: Modulated Links)
if (photo.dimensions.width > 1000 || photo.dimensions.heigth > 1000) {
photo.dimensions.width /= 2;
photo.dimensions.height /= 2;
console.log("Resized 2:", photo.dimensions.width, photo.dimensions.height);
}
return {
props: {
......@@ -87,8 +78,6 @@ export default function Photos({ photo, placeholder }) {
<link rel="icon" href="/favicon.ico" />
</Head>
<<<<<<< HEAD
<<<<<<< HEAD
<BackHome />
<Divider my="1rem" />
......@@ -106,61 +95,12 @@ export default function Photos({ photo, placeholder }) {
loading="eager"
/>
</a>
=======
<Flex px="1rem" justify="center" align="center">
<Link href={`/`}>
<Button
as="a"
borderRadius="full"
colorScheme="gray"
fontSize="lg"
size="lg"
cursor="pointer"
>
<a>🏠 Retour à la Galerie</a>
</Button>
</Link>
</Flex>
<Divider my="1rem" />
<Center>
<Image
src={pic.path}
width={pic.dimensions.width || 480}
height={pic.dimensions.height || 480}
// objectFit="cover"
quality={80}
priority
loading="eager"
/>
>>>>>>> 54109d5 (feat: Modulated Links)
=======
<BackHome />
<Divider my="1rem" />
<Center>
<a href={pic.path}>
<Image
src={pic.path}
width={pic.dimensions.width || 480}
height={pic.dimensions.height || 480}
// objectFit="cover"
quality={80}
priority
loading="eager"
/>
</a>
>>>>>>> ad87045 (feat: Credits, BackHome wip)
</Center>
<Divider my="1rem" />
<Center>
<Box p="6">
<<<<<<< HEAD
<Link href={"/photos/" + photo.prev}>
=======
<Link href={"/photos/" + pic.prev}>
>>>>>>> 54109d5 (feat: Modulated Links)
<Button
as="a"
borderRadius="full"
......@@ -173,11 +113,7 @@ export default function Photos({ photo, placeholder }) {
⟸ Précédente
</Button>
</Link>
<<<<<<< HEAD
<Link href={"/photos/" + photo.next} m="15px">
=======
<Link href={"/photos/" + pic.next} m="15px">
>>>>>>> 54109d5 (feat: Modulated Links)
<Button
as="a"
borderRadius="full"
......@@ -187,13 +123,9 @@ export default function Photos({ photo, placeholder }) {
cursor="pointer"
m="15px"
>
<<<<<<< HEAD
<p m="1">
{photo.next != 1 ? "Suivante " : "Retour au début "}
</p>
=======
<p m="1">{pic.next != 1 ? "Suivante " : "Retour au début "}</p>
>>>>>>> 54109d5 (feat: Modulated Links)
<p>⟹</p>
</Button>
</Link>
......
yarn.lock
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment