Advertisement
  1. Code
  2. WordPress

Entender Cómo Funcionan las Imágenes en WordPress (Para un Mejor Diseño Responsivo)

Scroll to top
Read Time: 8 min

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Uno de los mayores retos a los que se enfrentan los desarrolladores web hoy en día es el de gestionar adecuadamente las imágenes para un diseño responsivo. Nos enfrentamos a problemas como elegir el tamaño adecuado para la pantalla en la que se visualizarán, teniendo en cuenta la velocidad de descarga del usuario, de si el dispositivo del usuario es retina (o en general un monitor de super alta resolución), y mucho más.

Afortunadamente, el elemento <picture> ha pasado a ser una especificación recientemente aceptada que será implementada por la mayoría de los navegadores, aunque todavía queda algo de trabajo por hacer. Por suerte, la forma en que WordPress gestiona las imágenes facilita las cosas.

Cómo Funciona el Cargador de Medios

Primero, realicemos un curso rápido sobre el uso del Cargador de Medios. Se accede a él desde WordPress admin a través de diferentes áreas, incluyendo las entradas, las páginas, los tipos de entradas personalizadas que lo admitan (generalmente hablando, el editor), y desde el menú Medios.

La única diferencia entre acceder desde el menú Medios y el resto de opciones, es que una imagen será directamente asociada con la entrada o página si se desde la que se cargue mediante su editor.

Una vez una imagen ha sido cargada, WordPress creará de forma predeterminada hasta 4 tamaños de la misma.

  • miniatura (150x150)
  • medio (300 máx x 300 máx)
  • grande (640 máx x 640 máx)
  • completo (el tamaño original de la imagen)

Puedes además añadir tus propios tamaños de imagen usando la función add_image_size(). Por ejemplo, si quisiéramos añadir una imagen para un producto que tiene 700px de ancho por 450px de alto, podríamos hacer lo siguiente:

1
add_image_size( 'product-img', 700, 450, false );

Esto le indica a WordPress que cree una nueva imagen con el nombre 'product-img' y con las dimensiones que hemos especificadas. El último argumento indica si la imagen se debe recortar o no.

Cuando lo estableces en false, la imagen será redimensionada proporcionalmente sin recortar; si se indica true, la imagen será recortada por los lados o los bordes superior e inferior. Ten cuidado con este ajuste, ya que los resultados podrían variar de una imagen a otra.

Insertar una imagen

Existen dos maneras de insertar una imagen en una entrada o página: la primera forma es a través del Cargador de Medios, tal y como se muestra aquí:

La segunda forma se realiza usando una imagen destacada. Puedes habilitar las imágenes destacadas añadiendo este código a tu archivo functions.php de tu tema, o en otro lugar cercano al principio de tus plugins:

1
if ( function_exists( 'add_theme_support' ) ) {
2
    add_theme_support( 'post-thumbnails' );
3
}

Esto añadirá un cajetín 'imagen destacada' a todas tus entradas, páginas, y tipos de entradas personalizadas que lo admitan. También puedes enviar un segundo argumento, que consiste en una cadena que indica qué debería disponer de una imagen destacada.

Por ejemplo, si solo quieres que sean las entradas las que admitan imágenes destacadas:

1
if ( function_exists( 'add_theme_support' ) ) {
2
    add_theme_support( 'post-thumbnails', array('post' );
3
}

El último paso es colocar este código dentro del Loop de tu plantilla, siempre que desees que la imagen se muestre:

1
if ( has_post_thumbnail() ) {
2
  the_post_thumbnail('large');
3
} 

El argumento aceptado es el nombre del tamaño de la imagen que quieras usar. Por defecto, es post-thumbnail.  Una vez tengas esto, añadirás tu imagen destacada a través de este cajetín:

Por último, si cargas un grupo de imágenes a la misma entrada o página, puedes insertarlas como galería usando el shortcode [gallery], sobre el cual puedes leer más aquí

Mejoras en 3.9

Junto con el lanzamiento de WordPress 3.9, se han incorporado algunas mejoras realmente interesantes para las imágenes y las galerías. Junto a las mejoras en el editor visual, como la habilidad de arrastrar y soltar las imágenes, add_image_size() ha obtenido un nuevo argumento para especificar si recortar la imagen por los lados o por los márgenes superior e inferior.

Pero bueno, ¿qué tiene todo esto que ver con Responsivo? ¡Me alegro de que me lo preguntes!

Aprovechar el Cargador de Medios

Los fundamentos del elemento <picture> son que nosotros como desarrolladores web proporcionamos múltiples copias de una imagen para ser mostradas en puntos de interrupción o "breakpoints" concretos, es decir, imagen-small.jpg para teléfonos inteligentes e imagen-full.jpg para pantallas más grandes.

Por el momento, este elemento es aceptado pero todavía faltan algunos meses para que sea integrado por los navegadores. No obstante, existe otra opción.

picturefill.js

Existe un archivo JavaScript creado por Fillament Group llamado picturefill.js, que emula la misma función que el elemento <picture>.

La sintaxis tiene este aspecto:

1
<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
2
    <span data-src="small.jpg"></span>
3
    <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
4
    <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
5
    <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
6
7
    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
8
    <noscript>
9
        <img src="small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
10
    </noscript>
11
</span>

Observa que hay una entrada data-src para cada imagen que queramos usar, así como un breakpoint mínimo asociado para cada una. Vale la pena mencionar que no existe límite para el número de imágenes/breakpoints que puedes tener.

Esta es una forma ampliamente aceptada de conseguir el mismo efecto que con el elemento <picture>. Me imagino que conforme sea adoptado por los navegadores, el método adecuado para codificar las imágenes responsivas será: <picture> ->picturefill.js -> <noscript>.

Esto nos permitirá usar el último y genial HTML en los navegadores modernos junto con una alternativa (¡sí, mejoras progresivas!).

Con picturefill.js y las múltiples imágenes que el Cargador de Medios crea, podemos crear un proceso automatizado para las imágenes responsivas en nuestras webs creadas con WordPress.

Poniéndolo Todo Junto

Ahora mismo, no hay manera de que WordPress lo haga de forma nativa; me imagino que esto cambiará cuando el elemento <picture> sea lanzado (puedes solicitarlo al Core :). Esto no significa que no podamos hacer un par de cosas por nosotros mismos para automatizar el proceso. En esta sección, vamos a ver algunas posibilidades.

Nota: Habrás notado que estoy usando el prefijo jlc_ en mis funciones. Recomiendo que lo uses para prevenir conflictos con otros temas y plugins.

Reemplazar Imágenes Destacadas

Esta primera pieza del rompecabezas y la más directa, consiste en sustituir las imágenes destacadas con el código propio de picturefill.js

Puedes conseguirlo con el filtro post_thumbnail_html, el cual cambiará el código predeterminado por nosotros. Lo primero que tenemos que hacer es poner en cola picturefill.js (lo cual puede hacerse desde functions.php o en tu plugin):

1
function jlc_script() {
2
  wp_register_script( 'picturefill', get_stylesheet_directory_uri() . '/js/picturefill.js');
3
  wp_enqueue_script( 'picturefill' );
4
}
5
add_action( 'wp_enqueue_scripts', 'jlc_script' );

Asegúrate de modificar aquí la ruta para indicar la ubicación de tu archivo picturefill.js. Una vez lo tengas donde corresponde, llega el momento de añadir nuestra función de reemplazo:

1
function jlc_get_featured_image( $html, $aid = false ) {
2
3
    $sizes= array( thumbnail, medium, large, full );
4
    $img= <span data-picture data-alt=”’.get_the_title().’”>;
5
    $ct = 0;
6
    $aid = ( ! $aid ) ? get_post_thumbnail_id() : $aid;
7
    
8
    foreach ( $sizes as $size ) {
9
    
10
        $url = wp_get_attachment_image_src( $aid, $size );
11
        $width = ( $ct < sizeof( $sizes ) - 1 ) ? ( $url[1] * 0.66 ) : ( $width / 0.66 ) + 25;
12
        $img .= <span data-src=”’. $url[0] .’”’;
13
        $img .= ( $ct > 0)  ?  data-media=( min-width: . $width .px)></span> :></span>;
14
        $ct++; 
15
    }
16
    
17
    $url= wp_get_attachment_image_src( $aid, $sizes[1] );
18
    $img.=  <noscript>
19
                <img src=”’.$url[0] .’” alt=”’.get_the_title().’”>
20
            </noscript>
21
    </span>;
22
    
23
    return $img;
24
    
25
}

Hay varias tareas que deben ser realizadas aquí:

  1. Tenemos una cadena para cada tamaño de imagen que queremos incluir (por su nombre). Puedes añadir o eliminar a tu gusto.
  2. Hemos configurado el código de picturefill.js
  3. Hemos recorrido a través de la cadena, obteniendo la URL de la imagen para cada tamaño y la hemos añadido como entrada a nuestro elemento picturefill.js.
  4. Incluimos algo de matemáticas para imaginar cuándo ocurrirán los breakpoints basándonos en los tamaños de las imágenes.
  5. Para los usuarios sin javascript, asignamos la imagen de tamaño mediano como alternativa.

El siguiente paso es añadir nuestro filtro, el cual puedes añadir directamente bajo la función:

1
add_filter( post_thumbnail_html, jlc_get_featured_image);

Ahora tu función jlc_get_features_image() será usada para la salida de post_thumbnail en lugar del código predeterminado.

He encerrado todo esto dentro de un sencillo plugin llamado Responsive Featured Image. Puedes descargarlo desde Github.

Otros Métodos

Como puedes imaginar, manejar las imágenes es un asunto bastante complicado cuando se trata de diseño responsivo. La función de arriba sólo funcionará con las imágenes destacadas, no con todas las imágenes de la entrada. Mientras que existen métodos para hacer esto, incluido este plugin, mis pruebas me han mostrado problemas en el rendimiento y la escalabilidad.

También puedes usar un shortcode, pasando una URL o el ID de una imagen para generar el código, de esta forma:[jlc_picturefill_image aid=x] Lamentablemente sin codificación extensa, esto deshabilitará el uso del Cargador de Medios para insertar imágenes en la entrada. Con la funcionalidad de arrastrar y soltar de la versión 3.9, esto podría causar más conflictos.

Si estás interesado en este método, en mi libro, Diseño Responsivo con WordPress, hablo con más profundidad sobre esto y sobre las imágenes en WordPress en General.

Conclusión

En este artículo, hemos visto de forma bastante extensa cómo WordPress maneja las imágenes, y explorado una forma más sencilla de integrar picturefill.js y lo que es más importante más eficiente.

Es importante saber que ésta es un área de interés en constante evolución. Conforme mejores métodos sean desarrollados, estoy entusiasmado de ver lo que el futuro (esperemos cercano) nos traerá tanto para las imágenes como para WordPress.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.