Skip to content

Commit

Permalink
i18n(es): Updated image.mdx & netlify.mdx (withastro#3723)
Browse files Browse the repository at this point in the history 
* chore: updated image & netlify

* chore: applied suggestions

* Fix broken link

---------
Co-authored-by: Waxer59 <[email protected]>
Co-authored-by: Yan Thomas <[email protected]>
  • Loading branch information
@dreyfus92
dreyfus92 authored Jul 17, 2023
1 parent 3fe4b8d commit 55d0229
Show file tree
Hide file tree
Showing 2 changed files with 97 additions and 14 deletions.
93 changes: 79 additions & 14 deletions src/content/docs/es/guides/integrations-guide/image.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ i18nReady: true

import Video from '~/components/Video.astro';

> ⚠️ ¡Esta integración es todavía experimental! Actualmente sólo es compatible con entornos de nodos, ¡pero estate atento a la compatibilidad con Deno en el futuro!
> ⚠️ ¡Esta integración será archivada en Astro v3.0 (Otoño 2023) en favor del módulo `astro:assets`. Por favor, consulta la [documentación de Assets](/es/guides/assets/) para más información!
Esta **[integración de Astro][astro-integration]** facilita la optimización de imágenes en tu [proyecto de Astro](https://astro.build/), ¡con soporte completo para construcciones de SSG (Static Site Generator) y renderizado en el lado del servidor!
Esta **[integración de Astro][astro-integration]** optimiza las imágenes en tu [proyecto de Astro](https://astro.build/). Es compatible con Astro v2 solo para todos los sitios estáticos y para [algunos hosts de implementación de renderizado en el lado del servidor](#instalación).

## ¿Por qué `@astrojs/image`?

Expand Down Expand Up @@ -124,7 +124,17 @@ O, alternativamente, si tu proyecto está utilizando los tipos a través de un a
```astro title="src/pages/index.astro"
---
import { Image, Picture } from '@astrojs/image/components';
import heroImage from '../assets/hero.png';
---
// imagen optimizada, manteniendo el ancho, alto y formato de imagen originales
<Image src={heroImage} alt="texto descriptivo" />
// especifica varios tamaños para imágenes responsivas o dirección de arte
<Picture
src={heroImage}
widths={[200, 400, 800]}
sizes="(max-width: 800px) 100vw, 800px"
alt="texto descriptivo"
/>
```

Los transformadores de imagen incluidos admiten el redimensionamiento de imágenes y la codificación en diferentes formatos de imagen. Los servicios de imágenes de terceros también podrán agregar soporte para transformaciones personalizadas (p. ej: `blur`, `filter`, `rotate`, etc).
Expand Down Expand Up @@ -349,7 +359,7 @@ La lista de tamaños que se deben generar para las imágenes responsivas. Esto s

```astro
// Genera tres imágenes: una de 400x400, otra de 800x800, y otra de 1200x1200
<Picture src={img} widths={[400, 800, 1200]} aspectRatio="1:1" alt="descriptive text" />
<Picture src={img} widths={[400, 800, 1200]} aspectRatio="1:1" alt="texto descriptivo" />
```

#### aspectRatio
Expand Down Expand Up @@ -542,19 +552,19 @@ import heroImage from '../assets/hero.png';
---
// imagen optimizada, manteniendo el ancho, alto y formato original
<Image src={heroImage} alt="descriptive text" />
<Image src={heroImage} alt="texto descriptivo" />
// la altura se recalculará para que coincida con la relación de aspecto original
<Image src={heroImage} width={300} alt="descriptive text" />
<Image src={heroImage} width={300} alt="texto descriptivo" />
// recortando a un ancho y alto específicos
<Image src={heroImage} width={300} height={600} alt="descriptive text" />
<Image src={heroImage} width={300} height={600} alt="texto descriptivo" />
// recortando a una relación de aspecto específica y convirtiendo a formato avif
<Image src={heroImage} width={300} aspectRatio="16:9" format="avif" alt="descriptive text" />
<Image src={heroImage} width={300} aspectRatio="16:9" format="avif" alt="texto descriptivo" />
// las importaciones de imágenes también se pueden incluir directamente en línea
<Image src={import('../assets/hero.png')} alt="descriptive text" />
<Image src={import('../assets/hero.png')} alt="texto descriptivo" />
```

#### Imágenes en `/public`
Expand All @@ -572,7 +582,7 @@ import socialImage from '/social.png';
---
// En construcciones estáticas: la imagen se compilará y optimizará en `/dist`. // En construcciones de SSR: el servidor optimizará la imagen cuando sea solicitada por un navegador.
<Image src={socialImage} width={1280} aspectRatio="16:9" alt="descriptive text" />
<Image src={socialImage} width={1280} aspectRatio="16:9" alt="texto descriptivo" />
```

### Imágenes remotas
Expand All @@ -587,10 +597,10 @@ const imageUrl = 'https://astro.build/assets/press/full-logo-dark.png';
---
// Recortando a un ancho y alto específicos
<Image src={imageUrl} width={750} height={250} format="avif" alt="descriptive text" />
<Image src={imageUrl} width={750} height={250} format="avif" alt="texto descriptivo" />
// La altura se recalculará para que coincida con el aspect ratio
<Image src={imageUrl} width={750} aspectRatio={16 / 9} format="avif" alt="descriptive text" />
<Image src={imageUrl} width={750} aspectRatio={16 / 9} format="avif" alt="texto descriptivo" />
```

### Imágenes responsivas
Expand All @@ -615,7 +625,7 @@ const imageUrl =
src={hero}
widths={[200, 400, 800]}
sizes="(max-width: 800px) 100vw, 800px"
alt="descriptive text"
alt="texto descriptivo"
/>
// Imagen remota (se requiere aspect ratio)
Expand All @@ -624,18 +634,73 @@ const imageUrl =
widths={[200, 400, 800]}
aspectRatio="4:3"
sizes="(max-width: 800px) 100vw, 800px"
alt="descriptive text"
alt="texto descriptivo"
/>
// Las importaciones en línea son compatibles.
<Picture
src={import('../assets/hero.png')}
widths={[200, 400, 800]}
sizes="(max-width: 800px) 100vw, 800px"
alt="descriptive text"
alt="texto descriptivo"
/>
```

### Estableciendo valores predeterminados

Por el momento, no hay forma de especificar valores predeterminados para todos los componentes `<Image />` y `<Picture />`. Los atributos requeridos deben establecerse en cada componente individual.

Como una alternativa, puedes envolver estos componentes en otro componente de Astro para reutilizarlos. Por ejemplo, podrías crear un componente para las imágenes de tu blog:

```astro title="src/components/BlogPostImage.astro"
---
import { Picture } from '@astrojs/image/components';
const { src, ...attrs } = Astro.props;
---
<Picture src={src} widths={[400, 800, 1500]} sizes="(max-width: 767px) 100vw, 736px" {...attrs} />
<style>
img,
picture :global(img),
svg {
margin-block: 2.5rem;
border-radius: 0.75rem;
}
</style>
```

### Usando `<img>` con la integración de imágenes

La integración oficial de imágenes cambiará las importaciones de imágenes para devolver un objeto en lugar de un string de origen.

El objeto tiene las siguientes propiedades, derivadas del archivo importado:

```ts
{
src: string;
width: number;
height: number;
format: 'avif' | 'gif' | 'heic' | 'heif' | 'jpeg' | 'jpg' | 'png' | 'tiff' | 'webp';
}
```

Si tienes instalada la integración de imágenes, consulta la propiedad `src` del objeto al usar `<img>`.

```astro ".src"
---
import rocket from '../images/rocket.svg';
---
<img src={rocket.src} alt="Un cohete en el espacio." />
```

Alternativamente, agrega `?url` a tus importaciones para decirles que devuelvan un string de origen.

```astro "?url"
---
import rocket from '../images/rocket.svg?url';
---
<img src={rocket} alt="Un cohete en el espacio." />
```

## Solución de problemas

* Si tu instalación no parece funcionar, intenta reiniciar el servidor de desarrollo.
Expand Down
18 changes: 18 additions & 0 deletions src/content/docs/es/guides/integrations-guide/netlify.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,24 @@ export default defineConfig({
});
```

### Funciones por página

El adaptador de Netlify se construye en una sola función de forma predeterminada. Astro 2.7 añadió soporte para dividir tu construcción en puntos de entrada separados por página. Si utilizas esta configuración, el adaptador de Netlify generará una función separada para cada página. Esto puede ayudar a reducir el tamaño de cada función para que sólo se empaquete el código utilizado en esa página.

```js
// astro.config.mjs
import { defineConfig } from 'astro/config';
import netlify from '@astrojs/netlify/functions';

export default defineConfig({
output: 'server',
adapter: netlify(),
build: {
split: true,
},
});
```

### Sitios estáticos

Para sitios estáticos, generalmente no necesitas un adaptador. Sin embargo, si utilizas la configuración de `redirects` (experimental) en tu archivo de configuración de Astro, puedes utilizar el adaptador de Netlify para traducirlo al formato adecuado de `_redirects`.
Expand Down

0 comments on commit 55d0229

Please sign in to comment.