La forma más limpia de insertar imágenes dentro el cuerpo de un contenido sin utilizar el módulo Insert

Introducción

Insertar imágenes dentro el campo body fue siempre un dilema en Drupal. El módulo insert por un lado e IMCE por el otro. Ambos hacen su trabajo: permitir agregar una o varias imágenes dentro un campo de tipo long text. Pero a veces no basta solo con "hacer el trabajo". Ambas soluciones presentan puntos negros muy importantes. Por ejemplo, agregando una imagen utilizando el módulo insert hacemos que el campo "body" pase de ser un campo de texto a un blob. Donde ya el texto no es solo texto, si no, un conjunto de elementos de distinto tipo. Otro punto negativo es la administración del contenido. En un artículo con una buena cantidad de imágenes, se dificulta considerablemente su edición. Por un lado, todas las imágenes una abajo de la otra, y por el otro un editor wysiwyg donde encontrar las imágenes no es para nada amigable.

Dividir el cuerpo del contenido en Paragraphs

El módulo Paragraphs nos permite crear de ante mano grupos de campos, la cantidad que sea, del mismo modo que los configuramos para un tipo de contenido. Cada uno de este grupo de campos (Paragraph Bundles) podrán ser utilizados más tarde al interno de un tipo de contenido agregando un campo de tipo paragraphs. De este modo, si creamos dos bundles: uno para el texto y otro para las imágenes, podremos escribir párrafos y párrafos alternando con imágenes y más imágenes.

Crear un paragraph para los párrafos

La instalación del módulo Paragraphs no requiere ninguna acción particular. Una vez habilitado, visitar admin/structure/paragraphs/add. Luego, elegir un nombre para definir nuestro primer paragraph, por ejemplo, text y hacer click en el botón Save paragraph bundle. De aquí en más, la configuración ya es familiar. Es exactamente igual a la de un tipo de contenido. Agregamos entonces un campo de tipo long text con la configuración que se quiera. De este modo hemos configurado un paragraph que servirá a crear párrafos.

Crear un paragraph que no es un párrafo

Ya tenemos un bundle para el texto. Ahora necesitamos crear uno para las imágenes. Entonces, visitar nuevamente admin/structure/paragraphs/add. Luego, elegir un nombre, por ejemplo, image y hacer click en el botón Save paragraph bundle. Agregamos un campo de tipo image y otro de tipo long text para poder agregar una descripción a nuestra imágen. Más adelante veremos como hacer para modificar el HTML y presentar la imagen con su descripción utilizando el framework de Bootstrap.

Modificar el theme para un Paragraph determinado

El HTML de cada uno de los paragraph bundles creados puede ser personalizado fácilmente sugiriendo a Drupal de utilizar un theme en particular. Para esto, basta crear un archivo nobrado de la sigiente manera:

• Nombre del bundles: image (visible en admin/structure/paragraphs - utilizar el valor indicado entre paréntesis)
• Ruta del archivo original: sites/all/modules/paragraphs/theme
• Nombre del archivo original: paragraphs-item.tpl.php
• Nombre del archivo personalizado: paragraphs-item--image.tpl.php
• Ruta del archivo: sites/domain/themes/theme_name/theme

Suponagamos por un minuto que se quiera exponer una imagen y su descripción en un subtheme de Bootstrap. Esto quiere decir que el resultado debería ser más o menos así:

<div class="thumbnail">
  <img src="..." alt="...">
  <div class="caption">
    <h3>Thumbnail label</h3>
    <p>...</p>
    <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
  </div>
</div>

Suponiendo que nuestro paragraph está compuesto por un campo para la imagen (field_image_content) y un campo para la descripción (field_image_content_caption) el seguiente código debería cumplir su deber:

<div class="<?php print $classes; ?>"<?php print $attributes; ?>>
  <div class="content"<?php print $content_attributes; ?>>

    <div class="thumbnail">
      <?php print render($content['field_image_content']); ?>
      <?php if (!empty($content['field_image_content_caption'])): ?>
      <div class="caption">
        <?php print render($content['field_image_content_caption']); ?>
      </div>
      <?php endif; ?>
    </div>
  
  </div>
</div>

Paragraphs recursivos

Los campos de un paragraph bundle pueden ser también de tipo paragraph. Quiere decir que podremos agregar un paragraph dentro un node como contenedor de otros paragraphs. De este modo, podremos fácilmente crear una página de este tipo:

Enlaces externos

• Módulo Paragraphs
• Bootstrap thumbnails