Skip to content

i18n(fr): update guides/images.mdx #10421

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
yanthomasdev merged 2 commits into from
Dec 17, 2024
Merged

i18n(fr): update guides/images.mdx #10421

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ed8829f
i18n(fr): update `guides/images.mdx`
ArmandPhilippot Dec 17, 2024
cc2fcc2
Merge branch 'main' into i18n/fr-update-guides/images.mdx
yanthomasdev Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 6 additions & 23 deletions src/content/docs/fr/guides/images.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,6 @@ import myImage from '../assets/my_image.png'; // Image est de 1600x900

<ReadMore>Consultez le détail des [propriétés du composant `<Picture />`](/fr/reference/modules/astro-assets/#propriétés-de-picture) dans la référence `astro:assets`.</ReadMore>


### Afficher les images non traitées avec la balise HTML `<img>`

La [syntaxe de template Astro](/fr/reference/astro-syntax/) prend également en charge l'écriture directe d'une balise `<img>`, avec un contrôle total sur sa sortie finale. Ces images ne seront pas traitées ni optimisées. Elle accepte toutes les propriétés de balise HTML `<img>`, et la seule propriété requise est `src`.
Expand Down Expand Up @@ -349,17 +348,15 @@ coverAlt: "Photographie d'un coucher de soleil derrière une chaîne de montagne
Ceci est un article de blog
```

L'aide `image` pour le schéma des collections de contenu vous permet de valider les métadonnées de l'image en utilisant Zod.
L'assistant `image` pour le schéma des collections de contenu vous permet de valider et d'importer l'image.

```ts title="src/content/config.ts"
```ts title="src/content.config.ts"
import { defineCollection, z } from "astro:content";

const blogCollection = defineCollection({
schema: ({ image }) => z.object({
title: z.string(),
cover: image().refine((img) => img.width >= 1080, {
message: "L'image de couverture doit avoir une largeur d'au moins 1080 pixels!",
}),
cover: image(),
coverAlt: z.string(),
}),
});
Expand Down Expand Up @@ -396,7 +393,7 @@ const allBlogPosts = await getCollection("blog");

Le composant `<Image />`, comme tout autre composant Astro, n'est pas disponible dans les composants de framework UI.

Mais vous pouvez transmettre le contenu statique généré par `<Image />` à un composant de framework à l'intérieur d'un fichier `.astro` en tant qu'enfants ou en utilisant un [`<slot/>` nommé](/fr/guides/framework-components/#puis-je-utiliser-les-composants-astro-à-lintérieur-des-composants-de-mon-framework-) :
Mais vous pouvez transmettre le contenu statique généré par `<Image />` à un composant de framework à l'intérieur d'un fichier `.astro` [en tant qu'enfants](/fr/guides/framework-components/#passer-des-enfants-à-des-composants-de-framework) ou en utilisant un [`<slot/>` nommé](/fr/guides/framework-components/#puis-je-utiliser-les-composants-astro-à-lintérieur-des-composants-de-mon-framework-) :


```astro title="src/components/ImageWrapper.astro"
Expand Down Expand Up @@ -462,25 +459,11 @@ pnpm add sharp
```
:::

### Configurer Squoosh

Si vous préférez utiliser [Squoosh](https://github.com/GoogleChromeLabs/squoosh) pour transformer vos images, mettez à jour votre configuration avec ce qui suit :

```js title="astro.config.mjs" ins={4-6}
import { defineConfig, squooshImageService } from 'astro/config';

export default defineConfig({
image: {
service: squooshImageService(),
},
});
```

### Configurer le service no-op passthrough

Si votre [adaptateur pour le mode `serveur' ou `hybride'](https://astro.build/integrations/?search=&categories%5B%5D=adapters) ne supporte pas l'optimisation d'image Squoosh et Sharp intégrée à Astro (par exemple Deno, Cloudflare), vous pouvez configurer un service d'image no-op pour vous permettre d'utiliser les composants `<Image />` et `<Picture />`. Notez qu'Astro n'effectue aucune transformation ou traitement d'image dans ces environnements. Cependant, vous pouvez toujours profiter des autres avantages de l'utilisation de `astro:assets`, y compris l'absence de décalage cumulatif de la mise en page (CLS), l'application de l'attribut `alt`, et une expérience de création cohérente.
Si votre [adaptateur](https://astro.build/integrations/?search=&categories%5B%5D=adapters) ne supporte pas l'optimisation d'image Sharp intégrée à Astro (par exemple Deno, Cloudflare), vous pouvez configurer un service d'image no-op pour vous permettre d'utiliser les composants `<Image />` et `<Picture />`. Notez qu'Astro n'effectue aucune transformation ou traitement d'image dans ces environnements. Cependant, vous pouvez toujours profiter des autres avantages de l'utilisation de `astro:assets`, y compris l'absence de décalage cumulatif de la mise en page (CLS), l'application de l'attribut `alt`, et une expérience de création cohérente.

Configurez `passthroughImageService()` pour éviter les traitements d'image Squoosh et Sharp :
Configurez `passthroughImageService()` pour éviter les traitements d'image Sharp :

```js title="astro.config.mjs" ins={4-6} "passthroughImageService"
import { defineConfig, passthroughImageService } from 'astro/config';
Expand Down