Cómo hemos implementado las imágenes destacadas externas en Nelio Content

A finales de 2009 se publicaba la versión 2.9 de WordPress. Entre sus novedades encontrábamos la posibilidad de añadir imágenes destacadas a nuestras entradas para embellecer la apariencia de nuestros contenidos. Evidentemente, se trata de una funcionalidad que depende del tema que tenemos activo; es él quien decide si acepta o no imágenes destacadas y, si las acepta, dónde y cómo usarlas.

Si tu tema permite usar imágenes destacadas (en 2017 raro es el tema que no las incluye), te habrás dado cuenta de que sólo puedes seleccionar imágenes que tengas en tu biblioteca de medios. Sin embargo, cuando añades imágenes normales a tu entrada puedes insertarlas usando su URL (lo cual permite añadir imágenes externas). ¿Por qué esta diferencia?

En la entrada de hoy te explicaré cómo funcionan las imágenes destacadas en WordPress, por qué se permiten únicamente imágenes de la librería multimedia y cómo hemos conseguido saltarnos esta restricción con nuestro plugin Nelio Content.

Imágenes destacadas en WordPress

Las imágenes destacadas son imágenes de nuestra biblioteca de medios que ocupan un lugar privilegiado en nuestra web. La mejor forma de entender cómo y dónde se usan es echando un vistazo a una web cualquiera. Por ejemplo, si te paseas por nuestra propia web, verás que nuestras entradas siempre van acompañadas de una imagen que ilustra el contenido. Así es como se ve la portada de Nelio:

Ésta es la apariencia que tiene la cabecera de esta misma entrada:

Y esto es lo que vemos al final de la entrada, en la sección de entradas relacionadas:

Como ya sabes, podemos asignar una imagen destacada fácilmente usando la siguiente caja en la pantalla de edición de entradas:

Cuando pulsas en el enlace para Asignar una imagen destacada, se abre tu biblioteca de medios y puedes seleccionar la imagen que quieres usar. Ahora bien, ¿por qué estamos limitados a las imágenes incluidas en la biblioteca?

Un vistazo a las tripas de WordPress

Cada vez que subes una imagen a la biblioteca de medios, WordPress hace varias cosas:

1. guarda la imagen en el directorio wp-content/uploads de tu servidor,
2. genera una nueva tupla en la tabla wp_posts de tu base de datos, apuntándose que tenemos una nueva imagen disponible para que puedas seleccionarla desde el Escritorio y, por lo tanto, asignándole un identificador único,
3. genera varias miniaturas de tu imagen, escalándola y recortándola según le convenga (todo esto, siguiendo las indicaciones del tema que tengas activo) y
4. se apunta qué miniaturas ha creado y varios datos de meta-información (como sus tamaños o ubicación) en la tabla wp_postmeta.

Lo más interesante del proceso anterior es que WordPress genera múltiples miniaturas de las imágenes que subes a la biblioteca. Por ejemplo, la imagen destacada original de esta entrada mide unos 1200x800px, pero hay varias miniaturas disponibles como esta de 540x350px o esta otra de 150×150. ¿Por qué aparecen estas miniaturas?

Como te decía al principio, las imágenes destacadas ocupan un lugar privilegiado en tu página web; tu tema puede añadir enlaces a tu contenido en múltiples sitios y lo normal es que los acompañe de su imagen destacada. Fíjate de nuevo en las capturas que he compartido más arriba: nuestro tema usa una imagen destacada de un cierto tamaño en la página principal, una imagen de otro tamaño en la sección de entradas relacionadas y la imagen original (la más grande posible) en la cabecera del propio contenido.

Así pues, el motivo por el cual es tu tema (y no otro componente) quien define qué miniaturas tienen que estar disponibles es para poder maquetar la web correctamente y aumentar la eficiencia al máximo. Por ejemplo, si tu tema maqueta la página principal con una parrilla de imágenes cuadradas de 300×300, le pedirá a WordPress que genere miniaturas de ese tamaño, escalando y recortando las imágenes que subes a tu biblioteca. Tu tema no quiere imágenes rectangulares ni tampoco imágenes de 500×500; las quiere cuadradas y de ese tamaño… así que pide que se las hagan. Fácil, ¿no? ?

Nelio Content

Estoy tan contento con Nelio Content que parece que me hayan pagado para hablar bién de él… pero es que también a ti te encantará: funciona como prometen, la programación automática de mensajes es increíble, la calidad/precio no tiene parangón y su equipo de soporte se siente como si fueran parte del tuyo.

Panozk

WordPress.org

Ver planes

Asignando una imagen destacada a una entrada de WordPress

Cuando asignas una imagen destacada a una de tus entradas, lo único que hace WordPress es apuntarse que «la entrada x usa la imagen y«, donde x e y son identificadores de tu base de datos. Para ser más precisos, lo que hace es crear una tupla en la tabla wp_postmeta para la entrada x donde se apunta que la imagen destacada (lo que llama _thumbnail_id) tiene como valor y. En el momento en el que el tema le pide la imagen destacada de una entrada con un cierto tamaño, simplemente mira el identificador que tiene apuntado en _thumbnail_id y le devuelve la URL de la miniatura correcta.

Imágenes destacadas externas con Nelio Content

Ahora que ya sabes cómo funcionan por defecto las imágenes destacadas en WordPress, imagino que ya podrás responder porqué no podemos añadirlas usando directamente una URL y ahorrándonos pasar por la biblioteca de medios. Venga, te dejo un par de segundos para que pienses la respuesta.

¿Aún no? ⏲

… ⌛

¡Venga, que tú puedes! ?

? ¡Muy bien! El problema está en las miniaturas: si nuestro tema espera que las imágenes tengan un cierto tamaño, necesitamos poder generar múltiples miniaturas. Pero, claro, si trabajamos con la URL de una imagen externa, no seremos capaces de crear esas miniaturas y, por lo tanto, tendremos que apañárnoslas con un único tamaño de imagen… del cual, por cierto, no sabemos nada: ¿es apaisada? ¿Vertical? ¿Cuadrada? ¿Qué tamaño exacto tiene? ?

De hecho, fíjate que con únicamente la URL tenemos varios problemas adicionales. Para empezar, ¿no se supone que WordPress guardaba un identificador en el atributo _thumbnail_id? ¿Cómo encaja eso con una URL cualquiera? ?

El objetivo que perseguimos en Nelio Content

El objetivo que nos planteamos superar con Nelio Content era insertar imágenes destacadas externas que tuvieran un comportamiento lo más parecido a WordPress por defecto, incluso con todas las limitaciones que te he descrito anteriormente. Para ello, lo que hicimos fue modificar la caja de imágenes destacadas para que aceptara añadir imágenes externas:

Nelio Content modifica la caja de imágenes destacadas por defecto y añade la posibilidad de usar un enlace como imagen destacada.

De esta forma, si decidimos usar una imagen que no esté en la biblioteca, bastaría con pulsar en el botón Externa y especificar la URL para que apareciera como imagen destacada:

y guardarla como meta atributo de nuestra entrada.

Para conseguir este «sencillo» objetivo necesitamos solucionar dos problemas:

1. Cómo usar la URL externa
2. Cómo generar miniaturas

¡Vamos a por ellos! ?

Cómo usar la URL externa como imagen destacada

Como ya hemos hablado anteriormente en el blog, WordPress se puede extender mediante la creación de plugins gracias a sus filtros y acciones. Gracias a $deity, las imágenes destacadas no son una excepción y también incluyen filtros a los que podemos engancharnos y, así, modificar el resultado final.

Una de las funciones más habituales para insertar una imagen destacada en WordPress es get_the_post_thumbnail.  Con ella, dada una entrada o su identificador, puedes hacer lo siguiente:

get_the_post_thumbnail( $post_id, 'post-thumbnail' );

y conseguir como resultado lo siguiente:

<img src="https://ejemplo.com/wp-content/uploads/imagen-150x150.jpg" ... />

la imagen destacada de la entrada $post_id con la miniatura tipo post-thumbnail (en el ejemplo sería de 150x150px).

Si echas un vistazo al código fuente de esta función, verás que tiene un filtro llamado post_thumbnail_html, con el que podemos modificar la etiqueta img que devuelve. En otras palabras, podemos devolver una etiqueta cuyo atributo src apunte a la imagen externa:

<img src="https://servidor.com/imagen-externa.jpg" ... />

¡Genial! Ya hemos solucionado uno de los dos problemas y, por fin, somos capaces de devolver la imagen destacada externa. Pero ahora nos queda lo que de verdad es difícil: ¿cómo conseguimos que esta imagen tenga las dimensiones que queremos?

Cómo solucionamos el problema de las miniaturas

La solución más sencilla consiste en añadir los atributos width y height en la etiqueta img para que la imagen se escale y coja las dimensiones oportunas. Pero, claro, si hacemos esto, una imagen como esta:

se vería así cuando la miniatura espera que sea cuadrada:

Funciona, aunque está un poco deforme… ? Así que, ¿qué hacemos? ¿Nos quedamos atascados? ?

¡Pues muy sencillo! Cuando queramos que una entrada use una imagen destacada externa, vamos a empezar por ponerle una imagen de la biblioteca de medios. «Pero, pero… ¿y la imagen externa?» Tranquilo, amigo, en seguida vamos a por ella. Como te decía, empezaremos poniendo una imagen que sí tengamos en la biblioteca de medios. Pero no una imagen cualquiera, no; una que hayamos metido nosotros mismos a través del plugin. Esta:

Si no ves nada, tranquilo; es una imagen transparente sin nada. Nuestro plugin incluye un PNG completamente transparente de tamaño grande que añadimos dinámicamente a la biblioteca de medios. Haciéndolo de esta forma, conseguiremos que WordPress genere todas las miniaturas necesarias (todas ellas PNGs transparentes) que nuestro tema podrá usar. Habiendo hecho esto, conseguimos que la etiqueta img que devuelve la función get_the_post_thumbnail sea la siguiente:

<img src="https://ejemplo.com/wp-content/uploads/transparente.png" ... />

Con lo que ya tenemos una imagen destacada del tamaño que toca. Aunque, bueno, no es la imagen que queríamos… ¡acabamos de meter una imagen transparente! Así que lo único que nos queda por hacer es meter la imagen destacada como fondo usando los estilos CSS:

<img src="https://ejemplo.com/wp-content/uploads/transparente.png"
   style="background:url( https://servidor.com/imagen-externa.jpg )" ... />

Usando las propiedades de CSS podemos escalar la imagen externa fácilmente para que ocupe todo el área que ocupa la imagen transparente de la etiqueta img. En otras palabras, acabamos de implementar un pequeño hack que nos permite simular el escalado y recortado de imágenes.

¡Y con esto ya tenemos solucionados todos los problemas que nos hemos planteado al principio! ?? Existen algunos casos extremos que nuestro plugin controla y que no te he explicado aquí, así que si tienes alguna duda concreta que quieras que discutamos, plantéala en los comentarios y te la resuelvo. Espero que hayas disfrutado aprendiendo algunos secretitos de WordPress y viendo un ejemplo concreto de como con maña e ingenio se pueden superar las limitaciones aparentes del sistema.

Imagen destacada de Glenn Carstens-Peters.