#Lets Talk

4 messages · Page 1 of 1 (latest)

cobalt spindleBOT
#

Hi @zealous tulip. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Pour gérer plusieurs images pour vos produits dans Astro Content Collections, vous avez plusieurs options. Voici comment vous pouvez modifier votre schéma :

Option 1: Utiliser un tableau d'URLs

La solution la plus simple est de modifier votre schéma pour accepter un tableau d'URLs d'images au lieu d'une seule URL :

import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const products = defineCollection({
    loader: glob({
        pattern: '**/*.json',
        base: "./src/content/products",
    }),

    schema: z.object({
        images: z.array(z.string().url()),  // Tableau d'URLs d'images
        name: z.string(),
        description: z.string(),
        price: z.number(),
        category: z.enum(['Électronique', 'Mode', 'Maison & Jardin', 'Beauté & Santé', 'Sport', 'Jeux & Jouets', 'Alimentation & Boissons']),
        status: z.enum(['En stock', 'Indisponible', 'Disponible fournisseur']),
        variations: z.array(
            z.object({ title: z.string(), value: z.array(z.string()) })
        ).optional(),
    }),
});

export const collections = { products };

Option 2: Utiliser des images locales avec le helper image()

Si vous préférez utiliser des images locales stockées dans votre projet, vous pouvez utiliser le helper image() d'Astro pour les valider :

import { defineCollection, z } from 'astro:content';
import { glob } from 'astro/loaders';

const products = defineCollection({
    loader: glob({
        pattern: '**/*.json',
        base: "./src/content/products",
    }),
#

schema: ({ image }) => z.object({
mainImage: image(), // Image principale
additionalImages: z.array(image()).optional(), // Images supplémentaires
name: z.string(),
description: z.string(),
price: z.number(),
category: z.enum(['Électronique', 'Mode', 'Maison & Jardin', 'Beauté & Santé', 'Sport', 'Jeux & Jouets', 'Alimentation & Boissons']),
status: z.enum(['En stock', 'Indisponible', 'Disponible fournisseur']),
variations: z.array(
z.object({ title: z.string(), value: z.array(z.string()) })
).optional(),
}),
});

export const collections = { products };


Avec cette approche, vos fichiers JSON de produits pourraient ressembler à ceci :

```json
{
  "mainImage": "./images/product-main.jpg",
  "additionalImages": [
    "./images/product-angle1.jpg",
    "./images/product-angle2.jpg"
  ],
  "name": "Nom du produit",
  "description": "Description du produit",
  "price": 99.99,
  "category": "Électronique",
  "status": "En stock"
}

Les chemins d'images sont relatifs à l'emplacement de votre fichier JSON de produit, et Astro s'occupera de l'optimisation des images et de la validation des chemins Images in Content Collections.

Vous pourrez ensuite utiliser ces images dans vos composants avec le composant <Image /> d'Astro :

---
import { Image } from 'astro:assets';
import { getCollection } from 'astro:content';

const products = await getCollection('products');
---
#

{products.map((product) => (
<div>
<Image src={product.data.mainImage} alt={product.data.name} />

{product.data.additionalImages && (
  <div class="additional-images">
    {product.data.additionalImages.map((img) => (
      <Image src={img} alt={`Vue supplémentaire de ${product.data.name}`} />
    ))}
  </div>
)}

<h2>{product.data.name}</h2>
<p>{product.data.price} €</p>

</div>
))}


Cette approche vous donne l'avantage de l'optimisation automatique des images et de la validation des chemins de fichiers.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------