9.10.3. Trabajando con campos en Drupal. Crea tu propio tipo de campo, widget y formateador para insertar vídeos de YouTube.

En los artículos anteriores vimos cómo funciona el tipo de campo Link: Storage, Widget y Formatter. En este artículo, crearemos nuestro propio tipo de campo básico para mostrar videos de YouTube en una página, con dos formatos diferentes y configuraciones.

Este artículo está centrado en la Fields API, y si necesitas agregar un campo de video de YouTube a tu sitio, es mejor usar un módulo ya preparado:

https://www.drupal.org/project/video_embed_field

He subido todo el código a GitHub en el módulo drupalbook_youtube, puedes descargarlo y añadirlo a tu sitio:

https://github.com/levmyshkin/drupalbook8

Veamos la estructura de este módulo y te explicaré cómo funciona este tipo de campo:

modules/custom/drupalbook_youtube/drupalbook_youtube.info.yml

name: DrupalBook Youtube
type: module
description: Youtube embed field
core: 8.x
package: Custom

Define los metadatos del módulo.

modules/custom/drupalbook_youtube/src/Plugin/Field/FieldType/DrupalbookYoutubeItem.php

Define el tipo de campo, incluyendo su esquema en base de datos, propiedades y método para verificar si está vacío.

El campo almacena una URL como texto. La propiedad principal es value y se declara como tipo string.

Cuando se crea un nuevo campo de este tipo, Drupal genera las tablas correspondientes para almacenar los valores de las entidades.

modules/custom/drupalbook_youtube/src/Plugin/Field/FieldWidget/DrupalbookYoutubeWidget.php

Este widget nos permite ingresar la URL del video. Utiliza un campo textfield y define una función de validación personalizada que usa expresiones regulares para comprobar si la URL es válida.

El widget está vinculado al tipo de campo drupalbook_youtube mediante la anotación @FieldWidget.

modules/custom/drupalbook_youtube/src/Plugin/Field/FieldFormatter/DrupalbookYoutubeThumbnailFormatter.php

Este formatter muestra una miniatura del video como un enlace hacia la página de YouTube.

Utiliza la etiqueta HTML <img> con la ruta: http://img.youtube.com/vi/VIDEO_ID/0.jpg.

El HTML generado se encapsula dentro de un elemento <p> y se entrega al renderizador de Drupal mediante #type = html_tag.

modules/custom/drupalbook_youtube/src/Plugin/Field/FieldFormatter/DrupalbookYoutubeVideoFormatter.php

Este segundo formatter es más complejo: permite mostrar el video directamente embebido con un iframe. También incluye un formulario de configuración para definir el tamaño del video (ancho y alto).

Se declara con @FieldFormatter y permite múltiples valores por campo. El HTML final se genera mediante una plantilla Twig personalizada.

modules/custom/drupalbook_youtube/drupalbook_youtube.module

Define la implementación de hook_theme() para registrar la plantilla drupalbook_youtube_video_formatter y pasarle las variables necesarias: width, height y video_id.

modules/custom/drupalbook_youtube/templates/drupalbook-youtube-video-formatter.html.twig

Esta plantilla muestra el iframe del video de YouTube embebido utilizando las variables proporcionadas por el formatter:

<iframe width="{{ width }}" height="{{ height }}" src="https://www.youtube.com/embed/{{ video_id }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Después de completar estos pasos, podrás crear un nuevo campo de tipo Youtube video y elegir entre dos formatos: miniatura enlazada o video embebido con configuración de tamaño.

Con esto concluimos la creación de campos personalizados. En el siguiente artículo exploraremos la Entity API y crearemos tipos de entidad personalizados.