L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Créer une galerie d'images avec Next.js et KendoReact
Dans cet article, nous allons créer une galerie d'images avec Next.js. Nous allons construire cette application avec des composants d'interface utilisateur de la bibliothèque KendoReact et apporter nos images de Cloudinary. . En un mot, nous allons construire notre application Next.js avec des composants de la bibliothèque KendoReact et apporter nos ressources d'image à partir de Cloudinary.
Cet article suppose que vous connaissez les bases de JavaScript et de React.
Prérequis
Pour suivre cet article, je vous recommande d'avoir les éléments suivants :
Configuration Cloudinary
Si vous n'avez pas de compte Cloudinary, vous pouvez vous inscrire gratuitement Compte. Connectez-vous après avoir créé votre compte et sur votre page de tableau de bord, vous devriez voir toutes vos informations d'identification (nom du cloud, etc.).
Nous utiliserons le type de livraison de liste de Cloudinary pour générer une liste JSON des images que nous utiliserons dans ce projet. Cloudinary nous permet de répertorier les ressources côté client en fonction de leurs balises. Nous devons donc ajouter des balises de ressources aux ressources (images) que nous souhaitons utiliser dans notre galerie.
Lorsque vous attribuez des balises aux ressources, vous pouvez effectuer actions de groupe sur eux. Cloudinary générera un extrait JSON contenant toutes les images avec cette balise spécifiée. Des informations telles que son format, son type, ses dimensions, ses métadonnées contextuelles et ses métadonnées structurées seront renvoyées pour chaque image. Suivez les étapes ci-dessous pour ajouter des balises à vos images :
- Tout d'abord, vous devez télécharger toutes vos images sur votre Cloudinary Bibliothèque multimédia.
- Passez la souris sur l'une de vos images, cliquez sur le menu plus d'options (…) icône dans la liste des actions.
- Cliquez sur le lien Modifier.
- Cliquez sur le lien Ajouter une balise et saisissez au nom de votre choix. J'utiliserai "ville".
- Répétez ces étapes pour ajouter des balises à d'autres images.
La syntaxe de l'URL devrait ressembler à ceci :
https://res.cloudinary.com/
Nous allons ensuite interroger l'URL pour récupérer une liste JSON de toutes nos images partageant la balise spécifiée. Cliquez ici pour en savoir plus sur l'ajout de balises aux actifs.
Nous devons également activer le type de livraison de la liste d'images car il est restreint par défaut. Pour l'activer, cliquez sur l'icône Paramètres de sécurité sur votre console Cloudinary. Cliquez sur le lien Paramètres sur la page de sécurité et décochez l'option Liste des ressources sous Types de supports restreints.
Configuration du projet
Exécutez les commandes suivantes pour configurer un projet Next.js dans un dossier appelé image-gallery :
npx create-next-app image-gallery
Pour accéder au répertoire de votre application et lancer l'application, exécutez la commande suivante :
cd kendo-cloudinary-gallery
npm run dev
Cela devrait démarrer votre projet sur votre navigateur à localhost : 3000.
Configuration de la clé de licence KendoReact
KendoReact est distribué sous une licence commerciale. La version que j'utilise (v4.10) prend en charge l'utilisation des composants KendoReact sans avoir ou activer une clé de licence uniquement pour le développement, mais cela échoue lors de la construction. Les étapes de configuration de votre clé de licence sont les mêmes pour les membres payants et ceux utilisant la licence d'essai de 30 jours.
Connectez-vous à votre compte et suivez les étapes ici pour télécharger votre clé de licence. Copiez le fichier de clé de licence kendo-ui-license.txt que vous venez de télécharger à la racine de votre projet.
Enfin, nous devons installer la licence KendoReact en tant que dépendance du projet et l'activer. Exécutez la commande suivante dans votre terminal pour ce faire :
npm install @progress/kendo-licensing
npx installer kendo-ui-license activer
Installer le thème KendoReact
KendoReact fournit des thèmes que nous pouvons utiliser pour styliser notre application, et il propose actuellement cinq thèmes. Chaque thème comprend un fichier CSS dist/all.css précompilé qui contient les styles de tous les composants KendoReact. Nous utiliserons le thème par défaut dans ce projet, alors exécutez la commande suivante dans votre terminal pour installer son package :
npm install --save @progress/kendo-theme-default
Nous devons également inclure le thème dans notre projet en référençant le dist/all.css dans notre fichier App.js comme suit :
import " @progress/kendo-theme-default/dist/all.css";
Bien que nous devions inclure l'un de ces thèmes, les composants de l'interface utilisateur de KendoReact sont conçus pour nous permettre de modifier l'apparence de votre thème en mettant à jour un fichier Sass ou CSS, et nous pouvons également ajouter des styles personnalisés à un fichier CSS.[19659003]Mettons à jour le fichier Home.module.css avec ce qui suit :
//styles/Home.modules.css
.container {
margin -top : 10rem ;
min-height : 100vh ;
rembourrage
rembourrage
]0 0,5rem ;
}
.grid {
margin-top : 4[44]re90043 ];
affichage : grille ;
grille-modèle-colonnes : répéter(ajustement automatique, [1945[9052]min 19659037](350px, 1fr));
}
@media[19659071](max-width : 600px) {
.grid {
largeur
]100 % ;
}
}
KendoReact est une bibliothèque de plus de 100 composants d'interface utilisateur publiés sous la forme de plusieurs packages npm récupérés sur @progress. Nous devons installer différents packages pour les composants que nous utiliserons dans notre projet. Exécutez la commande suivante dans votre terminal :
npm install @progress/kendo-react-buttons @progress/kendo-react-common @progress/kendo-react-layout @progress/kendo-react-dialogs
De retour au répertoire des pages, mettons à jour notre fichier index.js avec ce qui suit :
import Head from "next/head" ;
importer styles de "../styles/Home.module.css";
importer CloudAssets de "../ composants/CloudAssets" ;
import { Typographie } from "@progress/kendo-react-common" ;
export[19659097]fonction par défaut Accueil({ resData }) {
retour[19459071]( ( div className={styles.container}>
<Head>09<4904]title >KendoUI Gallary </title>
<meta name="de inscription" />
<lien rel="icon" href="/favicon.ico" / >
</Tête>
<main className="wrap k-align-items-center">
<Typographie.h2 textAlign={"center"} fontWeight= "gras"}>
Galerie géniale
</Typographie.h2>
<Typographie.p
textAlign={"center"}
themeColor={"inverse"}
fontWeight={"léger"}
>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam Ducimus
eos consequatur, <br /> rem ratione nesciunt quisquam dolorem,
repudiandae officia totam amet corporis illum <br /> moins fugit
incidunt magnam deserunt veniam dignissimos.
</Typographie.p>
<Données CloudAssets résDonnées} />
</main>
</div[1945]/div[1945] ]);
}
exporter fonction asynchrone getStaticProps(contexte) { {[1965910] = attendre récupérer(
`https://res.cloudinary.com/ifeomaimoh/image/list/v1633911053/city.json`
)[19659037];
const resData = attendre res.json();;;;;;; (!resData) {
retour {
introuvable : vrai,
} ;
}
retour {
accessoires : { données de résolution },
} ;
}
Dans le code ci-dessus, nous exportons également getStaticProps() dans le même fichier que le composant HomePageet il renvoie un objet avec des accessoires. Nous récupérons nos données dans la fonction getStaticProps() à partir de l'URL que nous avons obtenue de Cloudinary après avoir balisé nos images, et la réponse est renvoyée dans l'objet propsqui sera transmis au composant Home en tant qu'accessoires.
Vous pouvez également voir comment nous utilisons et stylisons différentes variantes du composant Typography inclus dans le package KendoReact Common pour afficher notre contenu.
Exécutez cette commande pour démarrer votre serveur de développement et accédez à http://localhost:3000/ dans votre navigateur.
npm run dev
Créer un composant d'image de carte
Affichez maintenant les données que nous avons extraites de Cloudinary. Créez un dossier à la racine de votre projet appelé composants. Créez un fichier appelé CloudAssets.js dans le dossier et ajoutez-y ce qui suit :
components/CloudAssets.js
importer styles de "../styles/Home.module.css";
importer {
Carte,
En-tête de carte,
CarteImage,
Titre de la carte,
Corps de carte,
Avatar,
} de "@progress/kendo-react-layout";
const CloudAssets = ({ données }) => {
const baseUrl = "https://res.cloudinary.com/ifeomaimoh/image ";
retour (
<>
<div className={styles.. }>
{données &&
données.ressources.carte((élément) => {
590[19]590[19] format, public_id, version, type } = article;[1965] ](
<div
style={{ remplissage : "10px" }}
clé={version}
>
<Carte>
<CardHeader className=9 k-hbox">
<Type d'avatar="icône" taille="petit" forme=[19659117]"cercle">
<img
src="https://a.storyblok.com/f/51376/x/da286b5766/cloudinary.svg"
alt="avatar"
largeur="45px"
hauteur="45px"
/>
</Avatar>
<CardTitle
style={{
marginBottom : "4px",
}}>
Quelque part à Londres
< / Cardtitle >
< / / > > [19459283] < Carte de carte >
<CarteImage
src={`${baseUrl}/${type}0[149061]}0 19659117]/v${version}/${public_id}[19659117[8965{92].$ format}`}
alt="premier du nuage.."
largeur="420px"
hauteur="300px"
/>
</Corps de carte>
</[4]Card90[9]54] >
</div>
);
})}
</[1945]>
</>
) ;
} ;
exporter par défaut CloudAssets
Dans le code ci-dessus, nous extrayons également les données que nous n'avons pas encore transmises comme accessoires à ce composant—CloudAssets. Vous souvenez-vous de la réponse renvoyée dans l'objet props lorsque nous avons utilisé la fonction getStaticProps() pour récupérer nos données depuis Cloudinary ? Ces données sont disponibles sous forme d'accessoires et seront transmises à ce composant CloudAssets. Nous mappons les données et utilisons le composant KendoReact Card et son contenu, qui font partie du package KendoReact Layout, pour afficher nos images.
Nous générons également des URL Cloudinary pour nos images. et en les transmettant à l'attribut src du composant CardImage.
Importons maintenant notre composant CloudAssets dans notre index.js déposer. Ajoutez ce qui suit à votre fichier index.js :
import CloudAssets from "../components/CloudAssets";
Nous pouvons maintenant afficher le composant CloudAssets dans notre composant Home. Ajoutez ce qui suit à votre composant Accueil :
<main className="wrap k-align-items-center">
...
<Typographie.p
textAlign={"center"}
themeColor={"inverse"}
fontWeight={"léger"}
>
... incidunt magnam deserunt veniam dignissimos.
</Typographie.p>
<Données CloudAssets resData} />
</main> ;
Si vous vérifiez votre navigateur, votre application devrait ressembler à ceci :
Notre application a déjà fière allure, et ce n'est que la pointe de l'iceberg par rapport à tout ce que vous pouvez accomplir avec Cloudinary et KendoReact.
Cela étant dit, ajoutons une autre fonction à notre application.Agrandissons nos images, en affichant une image plus grande et une description chaque fois qu'un utilisateur clique sur n'importe lequel d'entre eux.
Créer un composant modal
Pour y parvenir, créons un autre fichier dans le dossier components appelé Modal.js et ajoutons-y ce qui suit :[19659035]importer { Bouton } de "@progress/kendo-react-buttons" ;
importer { Boîte de dialogue590 ], DialogActionsBar } from "@progress/kendo-react-dialogs";
import[19659071]{ Typographie } de "@progress/kendo-react-common" ;
import {
Carte,
En-tête de carte,
Titre de la carte,
Corps de carte,
Actions de carte,
CarteImage,
Avatar,
} de "@progress/kendo-react-layout";
fonction Modal({ baseUrl , données, setIsOpen }) {
const { format public_id,[159]50 ], version, type } = données ;
const closeDialog =[196(59071) => {
setIsOpen(false);
};
retour[196(59071] dialogue osclose = { {} } = = } } hauteur = [19659037]{720}>
<Carte>
<En-tête de carte
style={{
afficher : "flex",
justifieContent : "espace entre",
}}
>
<Type d'avatar="icône"[1945] ] taille="moyen" forme="cercle">
<img
src={`${baseUrl}/${type}0[149061]}0 19659117]/v${version}/${public_id}[19659117[8965{92].$ format}`}
alt="avatar de dialogue"
largeur="45px"
hauteur="45px"
/>
</Avatar>
<CardTitleCardTitle[1945904]CardTitle[1945904] Quelque part à Londres</CardTitle>
<CardActions>
=45ton primary[154]=45ton primary[154] {true} look="contour" onClick={9closeDialog
X
< / >
> / [19459112] / >
>
< / CarteHeader > [19659114]<Corps de carte>
<Image de carte
src={`${baseUrl}/${type}0[149061]}0 19659117]/v${version}/${public_id}[19659117[8965{92].$ format}`}
alt="image de dialogue"
largeur="550"
hauteur="450"
/>
</Corps de carte>
</ >
<DialogActionsBar>
<Typographie.h3 margin={"xlarge" ] rembourrage={5}>
Détails : Cette image est de{" "}
<span>
<a
href="https://res.cloudinary.com/kizmelvin"
cible="_blank"
rel="sans référence"
>
Cloudinaire
</a>
</étendue>
</Typographie[45]. ]h3>
<Typographie.marge h3={"xlarge"}>[194590]
Crédits :{" "}
<span>
<a href="https /unsplash.com/" target="_blank" rel="noreferrer">
Unsplash
</a>
</étendue>
</Typographie[45]. ]h3>
</DialogActionsBar>
</Dialog>
)[37]6590;
exporter par défaut Modal ;
Nous utilisons le composant KendoReact Dialog dans le code ci-dessus, qui fait partie du package KendoReact Dialogs, pour afficher une plus grande taille de nos images et afficher des informations supplémentaires. Il nous fournit une fenêtre modale, donc chaque fois qu'un utilisateur clique sur une carte image, notre composant Modal reçoit les propriétés de cette image en tant qu'accessoires et l'affiche. Nous utilisons également les propriétés de l'image pour générer l'URL de l'image.
La fonction closeDialog()comme son nom l'indique, est utilisée pour fermer le modal lorsqu'un utilisateur clique sur le bouton de fermeture.
Mettons maintenant à jour notre fichier CloudAssets.js pour afficher le modal que nous venons de créer. Remplacez tout ce qui se trouve dans votre fichier CloudAssets.js par ce qui suit :
import { useState } from "react" ;[19659089]import styles from "../styles/Home.module.css";
import Modal from "./Modal" ;
importer {
Carte,
En-tête de carte,
CarteImage,
Titre de la carte,
Corps de carte,
Avatar,
} de "@progress/kendo-react-layout";
const CloudAssets = ({ données }) => {
const [isOpen, setIsOpen][19]=6 19659063] Usestate () ; Const [ Setmodaldata ] = useState(null);
const baseUrl = "https://res.cloudinary.com/ifeomaimoh/image" ;
retour (
<>
<div className={styles.590 grille590 >
{données &&
données.ressources.carte((élément) => {
590[19]590[19] format, public_id, version, type } = article;[1965] ](
<div
style={{ remplissage : "10px" }}
clé={version}
onClick={() => {
setIsOpen(true)) (item) ;
}}
>
<Carte>
Header Class
<
<
="k-hbox">
<Type d'avatar="icône" taille="petit"[19459] ] forme="cercle">
<img
src="https://a.storyblok.com/f/51376/x/da286b5766/cloudinary.svg"
alt="avatar"
largeur="45px"
hauteur="45px"
/>
</Avatar>
<CardTitle
style={{
marginBottom : "4px",
}}
>
Quelque part à Londres
< / Cardtitle >
< / [19459112] / CarteHeader >
< Carte de carte >
<CarteImage
src={`${baseUrl}/${type}0[149061]}0 19659117]/v${version}/${public_id}[19659117[8965{92].$ format}`}
alt="premier du nuage.."
largeur="420px"
hauteur="300px"
/>
</CardBody>
</[49459004]Card90[9]54] >
</div>
);
})}
</[1945]>
{ Isopen && (
< < = = {} Données ={modalData} setIsOpen={setIsOpen} />>>>>[7]65969
</>
) ;
} ;
exporter par défaut CloudAssets ;[1945]
Nous avons importé le composant Modal et créé deux variables d'état, isOpen et modalDataen utilisant le crochet useState() pour conserver piste dont l'image est cliquée. Initialement, la valeur de isOpen est définie sur false. Dans la div contenant chaque carte image, nous avons ajouté un gestionnaire onClick pour définir la valeur de isOpen sur true à l'aide de la fonction setIsOpen lorsque un utilisateur clique sur une carte.
Lors d'un clic, nous appelons également la fonction setModalData pour définir la valeur de modalData sur les propriétés de l'image sur laquelle on a cliqué. Ensuite, nous rendons conditionnellement le composant Modal uniquement lorsque la valeur ou isOpen est égal à true.
Résumé
Dans cet article, nous ont réussi à configurer KendoReact et Cloudinary et ont montré comment les utiliser pour créer une galerie d'images avec Next.js. Avec Cloudinary, nous avons vu à quel point il est facile d'obtenir nos ressources multimédias et de les utiliser dans notre application. Nous avons également vu à quel point il est facile d'intégrer les composants de KendoReact dans notre application sans se soucier d'écrire de longues lignes de code CSS. Vous pouvez consulter la documentation KendoReact pour une liste complète des composants étonnants que vous pouvez utiliser pour créer votre application.
Source link