Alternativa para agregar imágenes dentro un campo de texto largo utilizando Insert (mejorado)

  • 24 Mar 2016
  • Drupal 7

Relativo a lo absoluto

Agregar imágenes a lo largo de los párrafos de un campo de tipo "texto largo" es muy simple. Basta instalar el módulo insert, un par de configuraciones, y listo. Pero tal vez, a más de uno se le revuelve el estómago cuando ve HTML con vínculos relativos a los archivos de imágenes. O peor aún, si tenemos un sitio con miles de artñiculos e imágenes y de repente necesitamos cambiar el tag IMG por PICTURE en cada uno de los artículos. O tal vez me pasó solo a mi.

La cuestión entonces es encontrar una manera de poder administrar esa parte de HTML que se ocupa de agregar las imágenes en otro lado y no dentro el campo body. Y por supuesto, la solución que propongo la puede implementar cualquiera. Muy simple.

El módulo Insert sirve

Usar todo lo que ya está hecho es siempre un buen inicio. Hay que aprovechar lo que el mundo nos regala. La idea entonces es modificar el HTML que agrega el módulo insert y cambiarlo por lo único realmente necesario:

  • el estilo
  • la URI
  • un texto para la descripción

Los estilos ya los deberíamos tener configurados en admin/config/media/image-styles. La URI nos la va a dar en módulo insert. Y como texto de la descripción (caption) vamos a usar el campo title disponible cuando creamos un campo de tipo image.

Entre los archivos de insert vamos a encontrar templates/image-insert-image.tpl.php

<img src="<?php print $url ?>" <?php if ($width && $height): ?>width="<?php print $width; ?>" height="<?php print $height; ?>" <?php endif; ?>alt="__alt__" title="__title__" class="image-<?php print $style_name ?><?php print $class ? ' ' . $class : '' ?>" />

Bastante feo eh? Bueno, como con todos los archivos .tpl.php vamos a hacer una copia en la carpeta theme dentro de nuestro tema. Por ejemplo, si nuestro theme se llama corporate, nos quedaría algo como domain../themes/corporate/theme/image-insert-image.tpl.php

En este archivo, podemos escribir algo de este estilo:

print "[insert {$style_name}|{$item['uri']}|__title__]";

Esto ya tiene otro color. Filtros! Ahora bien, para convertir el resultado de insert en HTML nos vamos a hacer dar una mano del módulo custom filter. Una vez que lo instalamos vamos a admin/settings/customfilter y creamos un filtro para darle a las imágenes el código HTML que se mercen.

Configuración del filtro personalizado

Pattern

/\[insert (.*)\]/i

Replacement text (habilitar código php)

Como en este caso como en muchos otros usamos un subtheme de Bootstrap,  la idea sería generar un HTML más o menos:

<div class="thumbnail">
    <img src="..." alt="...">
    <div class="caption">
      <p>...</p>
    </div>
  </div>

Entonces, completamos el campo replacemente text con el siguiente fragmento PHP:

$params = explode("|", $matches[1]);

$img_style = $params[0];
$img_uri   = $params[1];
$img_title = $params[2];

if (empty($img_title) || $img_title == "__title__") {
  $img_title = "";
}

if (!file_exists($img_uri)) {
  // image not found
  $result = "";
} else {
  $img_path = image_style_url($img_style, $img_uri);

  $class = "img-{$img_style}";
  if (empty($img_title)) {
    // without title, without link, without caption
    $caption = "";
  } else {
    $class .= " thumbnail";
    $caption = "<div class=\"caption\"><p>{$img_title}</p></div>";
  }
  $img_html = "<img itemprop=\"image\" src=\"{$img_path}\" class=\"img-responsive\"/>";
  $result = "<div class=\"img-wrapper\"><div class=\"{$class}\">";
  if (!empty($img_title)) {
    $result .= $img_html;
  } else {
    $result .= $img_html;
  }
  $result .= "{$caption}</div></div>";
}

El último paso, es activar el nuevo filtro personalizado en el formato de texto utilizado en el campo de texto largo (por ejemplo: Filtered HTML)

El nuevo filtro habiliado en el formato de texto