+++
date = 2021-05-15T15:00:00Z
description = "Una breve descripción de Components personalizados para Zola que implementan elementos html modernos: video, imagen, gif, audio."
draft = false
title = "Contenido enriquecido"

[extra]
keywords = "Images, Videos, Audio, Gif, Rich Content, Components"
series = "Features"
toc = true

[taxonomies]
tags = [
    "Features",
    "Video",
    "Audio",
    "Images",
    "Components",
]
+++
Se incluyen varios components personalizados para aumentar CommonMark. `video` los components `image`, `gif` y `audio` se crearon para ayudarle a aprovechar los elementos HTML modernos en sus escritos.

<!-- more -->

## Vídeo

- `sources` es una matriz de rutas de archivos de vídeo. (obligatorio)
- `class` establece una clase para el vídeo.
- `caption` establece el texto del pie de foto debajo del vídeo.
- `w` define la anchura del vídeo.
- `h` define la altura del vídeo.
- `autoplay` si está activado, el vídeo se reproduce automáticamente al cargarse.
- `loop` si está activado, reproduce el vídeo en bucle.
- `muted` cuando está activado, silencia el audio inicialmente.
- `playsinline` si está configurado, reproduce el vídeo incrustado en lugar de a pantalla completa en navegadores móviles.

*Las fuentes pueden ser la misma ruta, la ruta relativa o la ruta raíz, como el [component img](https://abridge.pages.dev/overview-images/#img-component)*

**Clases opcionales:**

- `ci` se puede utilizar para centrar la imagen.
- `fr` se puede utilizar para flotar la imagen a la derecha.
- `fl` se puede utilizar para flotar la imagen a la izquierda.
- `b1` se puede utilizar para añadir un borde de 1px.

### Uso

{% raw %}
```rs
{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]}  page={page} config={config} />}}
```
{% endraw %}

### Salida

```html
{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]}  page={page} config={config} />}}
```

{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]}  page={page} config={config} />}}

### Uso

{% raw %}
```rs
{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]} muted={true} class="ci b1" caption="¡Son más de 9000!"  page={page} config={config} />}}
```
{% endraw %}

### Salida

```html
{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]} muted={true} class="ci b1" caption="¡Son más de 9000!"  page={page} config={config} />}}
```

{{<video sources={["over9000_av1.mp4", "over9000_vp9.webm"]} muted={true} class="ci b1" caption="It's Over 9000!!"  page={page} config={config} />}}

## Imagen

El component `image` devuelve una etiqueta `<picture>` con múltiples fuentes.

Cada cadena en la matriz `sources` debe ser una ruta a un archivo de imagen de un tipo diferente (`avif`, `webp`, `png`, `jpg`, etc).
La última imagen en la matriz `sources` se utiliza para crear una etiqueta `<img>` para que el navegador recurra a ella si los otros formatos aún no son compatibles.

- `sources` es una matriz de rutas de archivos de imagen. (obligatorio)
- `class` establece una clase para la imagen.
- `caption` establece el texto del pie de foto debajo de la imagen.
- `w` establece el ancho de la imagen.
- `h` establece la altura de la imagen.

*Las fuentes pueden ser la misma ruta, la ruta relativa o la ruta raíz, como el [component img](https://abridge.pages.dev/overview-images/#img-component)*

**Clases opcionales:**

- `ci` se puede utilizar para centrar la imagen.
- `fr` se puede utilizar para flotar la imagen a la derecha.
- `fl` se puede utilizar para flotar la imagen a la izquierda.
- `b1` se puede utilizar para añadir un borde de 1px.

### Uso

{% raw %}
```rs
{{<image sources={["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"]} w={640} h={480} alt="¡ES MÁS DE 9000!"  page={page} config={config} />}}
```
{% endraw %}

### Salida

```html
{{<image sources={["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"]} w={640} h={480} alt="¡ES MÁS DE 9000!"  page={page} config={config} />}}
```

{{<image sources={["over9000-960.avif", "over9000-640.avif", "over9000-400.avif", "over9000-640.webp"]} w={640} h={480} alt="ITS OVER 9000!"  page={page} config={config} />}}

## GIF

El component `gif` es exactamente igual que el [component video](#video).
La única diferencia es que automáticamente tiene las propiedades adicionales: `autoplay`, `loop`, `muted`, `playsinline`.

El uso de la etiqueta `<video>` en lugar de gifs permite reducir el tamaño de los archivos,
lo cual es especialmente importante en regiones donde Internet es más lento o
menos fiable.

### Utilización

{% raw %}
```rs
{{<gif sources={["over9000_av1.mp4", "over9000_vp9.webm"]}  page={page} config={config} />}}
```
{% endraw %}

### Salida

```html
{{<gif sources={["over9000_av1.mp4", "over9000_vp9.webm"]}  page={page} config={config} />}}
```

{{<gif sources={["over9000_av1.mp4", "over9000_vp9.webm"]}  page={page} config={config} />}}

## Audio

El component `audio` toma una matriz `sources` de cadenas y devuelve una etiqueta
`<audio>`. Cada cadena de la matriz `sources` debe ser una ruta a un archivo de audio
de un tipo diferente (`ogg`, `mp3`, `flac`, `wav`, etc).
El navegador reproducirá el primer tipo que admita, por lo que colocarlos en orden de menor a mayor tamaño utilizará el menor ancho de banda si ese es su objetivo.

- `sources` es un array de rutas de archivos. (obligatorio)
- `class` establece una clase para el audio.
- `caption` establece el texto del título debajo del audio.
- `autoplay` cuando se establece, reproduce automáticamente el audio al cargar.
- `loop` cuando se establece, reproduce el audio en bucle.
- `muted` cuando se establece, establece el audio silenciado inicialmente.

*Las fuentes pueden ser la misma ruta, la ruta relativa o la ruta raíz, como el [component img](https://abridge.pages.dev/overview-images/#img-component)*

**Clases opcionales:**

- `ci` se puede utilizar para centrar la imagen.
- `fr` se puede utilizar para flotar la imagen a la derecha.
- `fl` se puede utilizar para flotar la imagen a la izquierda.
- `b1` se puede utilizar para añadir un borde de 1px.

### Uso

{% raw %}
```rs
{{<audio sources={["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]}  page={page} config={config} />}}
```
{% endraw %}

### Salida

```html
{{<audio sources={["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]}  page={page} config={config} />}}
```

{{<audio sources={["over9000.ogg", "over9000.mp3"]}  page={page} config={config} />}}

### Uso

{% raw %}
```rs
{{<audio sources={["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]} class="ci b1" caption="¡Son más de 9000!!"  page={page} config={config} />}}
```
{% endraw %}

### Salida

```html
{{<audio sources={["over9000.ogg", "over9000.mp3", "over9000.flac", "over9000.wav"]} class="ci b1" caption="¡Son más de 9000!"  page={page} config={config} />}}
```

{{<audio sources={["over9000.ogg", "over9000.mp3"]} class="ci b1" caption="It's Over 9000!!"  page={page} config={config} />}}