use AstroImage in all content files
This commit is contained in:
Nico
parent
530ce16e5d
commit
6442f7265d
|
|
@ -251,8 +251,8 @@ declare module 'astro:content' {
|
|||
collection: "fragments",
|
||||
data: InferEntrySchema<"fragments">
|
||||
},
|
||||
"fr/super-cookies.md": {
|
||||
id: "fr/super-cookies.md",
|
||||
"fr/super-cookies.mdx": {
|
||||
id: "fr/super-cookies.mdx",
|
||||
slug: "super-cookies",
|
||||
body: string,
|
||||
collection: "fragments",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@ excerpt: It's a real recipe, not a joke about annoying files.
|
|||
tags: ["food"]
|
||||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const cookies1 = "https://assets.nardu.in/cookies-fig-1.jpg";
|
||||
export const cookies2 = "https://assets.nardu.in/cookies-fig-2.jpg";
|
||||
|
||||
## Vegetalian version
|
||||
|
||||
### Ingredients
|
||||
|
|
@ -70,5 +74,15 @@ Chocolate can be replaced by anything like nuts, raisins, legos... (don't eat le
|
|||
|
||||
## Figures
|
||||
|
||||
|
||||
|
||||
<AstroImage
|
||||
src={cookies1}
|
||||
width="753"
|
||||
height="1248"
|
||||
alt="All ingredients mixed together to form a brown paste."
|
||||
/>
|
||||
<AstroImage
|
||||
src={cookies2}
|
||||
width="753"
|
||||
height="1248"
|
||||
alt="The cookies are rounded and soft after baking."
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -9,11 +9,24 @@ excerpt: Faire déborder une image de son conteneur sans tout casser.
|
|||
tags: ["CSS"]
|
||||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const example =
|
||||
"https://assets.nardu.in/image_bleed_container_9e3939b3ae.jpeg";
|
||||
export const context =
|
||||
"https://assets.nardu.in/image_bleed_original_d49f0d11bf.jpeg";
|
||||
export const container =
|
||||
"https://assets.nardu.in/image_bleed_full_2a902f9539.jpeg";
|
||||
export const banner =
|
||||
"https://assets.nardu.in/image_bleed_height_81b4ce969a.jpeg";
|
||||
export const broken =
|
||||
"https://assets.nardu.in/image_bleed_deformed_479046d2cb.jpeg";
|
||||
export const result = "https://assets.nardu.in/image_bleed_6c164e82b3.jpeg";
|
||||
|
||||
## Image inline
|
||||
|
||||
On est parfois obligé d'utiliser des images dans des balises `img` plutôt que dans un `background` en css. Comment faire alors pour que l'image sorte de son conteneur pour en faire une bannière ? Exemple pratique à partir de ce même site.
|
||||
|
||||
[](https://assets.nardu.in/image_bleed_container_9e3939b3ae.jpeg)
|
||||
<AstroImage src={example} width="320" height="568" alt="" />
|
||||
|
||||
### Contexte
|
||||
|
||||
|
|
@ -42,7 +55,7 @@ img {
|
|||
}
|
||||
```
|
||||
|
||||
[](https://assets.nardu.in/image_bleed_original_d49f0d11bf.jpeg)
|
||||
<AstroImage src={context} width="320" height="568" alt="" />
|
||||
|
||||
### Déborder du conteneur
|
||||
|
||||
|
|
@ -56,7 +69,7 @@ Afin de faire prendre à l'image toute la largeur, on agit sur son conteneur&nbs
|
|||
}
|
||||
```
|
||||
|
||||
[](https://assets.nardu.in/image_bleed_full_2a902f9539.jpeg)
|
||||
<AstroImage src={container} width="320" height="568" alt="" />
|
||||
|
||||
### Faire une bannière
|
||||
|
||||
|
|
@ -71,7 +84,7 @@ On peut alors réduire la hauteur du conteneur pour obtenir une bannière plutô
|
|||
}
|
||||
```
|
||||
|
||||
[](https://assets.nardu.in/image_bleed_height_81b4ce969a.jpeg)
|
||||
<AstroImage src={banner} width="320" height="568" alt="" />
|
||||
|
||||
Il faut ensuite forcer l'image à prendre toute la largeur du conteneur :
|
||||
|
||||
|
|
@ -81,7 +94,7 @@ Il faut ensuite forcer l'image à prendre toute la largeur du conteneur :
|
|||
}
|
||||
```
|
||||
|
||||
[](https://assets.nardu.in/image_bleed_deformed_479046d2cb.jpeg)
|
||||
<AstroImage src={broken} width="320" height="568" alt="" />
|
||||
|
||||
Pas top…
|
||||
|
||||
|
|
@ -96,7 +109,7 @@ Pas top…
|
|||
}
|
||||
```
|
||||
|
||||
[](https://assets.nardu.in/image_bleed_6c164e82b3.jpeg)
|
||||
<AstroImage src={result} width="320" height="568" alt="" />
|
||||
|
||||
Cette technique s'apparente à l'utilisation d'une image de background mais en dur 😁
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,10 @@ excerpt: C'est vraiment une recette hein, pas une blague sur les fichiers tempor
|
|||
tags: ["cuisine"]
|
||||
---
|
||||
|
||||
import AstroImage from "../../../components/AstroImage.astro";
|
||||
export const cookies1 = "https://assets.nardu.in/cookies-fig-1.jpg";
|
||||
export const cookies2 = "https://assets.nardu.in/cookies-fig-2.jpg";
|
||||
|
||||
## Version végétalienne
|
||||
|
||||
### Ingrédients
|
||||
|
|
@ -70,5 +74,15 @@ Le chocolat peut-être remplacé par n'importe quoi comme des noix, des raisins
|
|||
|
||||
## Figures
|
||||
|
||||
|
||||
|
||||
<AstroImage
|
||||
src={cookies1}
|
||||
width="753"
|
||||
height="1248"
|
||||
alt="Tous les ingrédients mélangés forment une pâte marron."
|
||||
/>
|
||||
<AstroImage
|
||||
src={cookies2}
|
||||
width="753"
|
||||
height="1248"
|
||||
alt="Les cookies cuits sont bombés et très moelleux."
|
||||
/>
|
||||
Loading…
Reference in New Issue