Cómo hacer los vídeos e imágenes responsive en WordPress

Según el tema que hayas elegido en tu WordPress cabe la posibilidad de que tus imágenes y/o los vídeos que publiques no se adapten al tamaño de cualquier dispositivo, es decir, que no sean responsive. Puede incluso que tu tema sea responsive pero que por razones que veremos a continuación tus imágenes y probablemente tus vídeos no se adapten bien a resoluciones pequeñas como las de un smartphone.

¿Son tus imágenes y vídeos responsive? Compruébalo

Hay varias formas de afrontar la solución, lo primero es que compruebes si tu web funciona bien en distintos dispositivos. Puedes utilizar para testear alguna página donde tengas imágenes y otra donde tengas algún vídeo en tu propio smartphone o tablet, redimensionando tu navegador o bien desde en estas páginas y herramientas:

1. Responsive design testing tool – Viewport Resizer – Emulate various screen resolutions – Best developer device testing toolbar
2. Responsive Web Design Test Tool – Designmodo
3. Respondr | Responsive Design Test Suite
4. ScreenQueries | Pixel Perfect Media Queries Debugging / Responsive Design Testing Tool
5. Responsive Design Bookmarklet
6. Responsive Design Testing
7. Screenfly / Test Your Website at Different Screen Resolutions

Si has comprobado que tus imágenes y/o vídeos mantienen el tamaño original y seguramente sobresalen de la pantalla con el molesto scroll horizontal sigue leyendo.

Solución para vídeos responsive en WordPress

Cuando añadimos un vídeo seguramente sea de YouTube o Vimeo y seguramente lo haremos con oEembed, es decir poniendo simplemente la URL de ese vídeo.

El problema es que el tamaño de ese vídeo vendrá generado por la variable content_width que generalmente es el que se asigna en los temas para indicar el ancho de la columna donde va el contenido de los artículos. Por ejemplo 650px.

De esta forma todo lo que pongamos con oEmbeds tendrá un ancho de 650px y una altura proporcional.

El problema es que no se le puede asignar un valor en %, sólo en px. Si quisieras cambiar el valor por ejemplo a 600 añadiríamos esto en functions.php

if ( ! isset( $content_width ) ) { $content_width = 600; }

¿Qué ocurre si el ancho no es fijo sino que tenemos una columna fluida que ocupa el 100% del ancho del navegador? ¿Cómo hacemos que esos objetos, esos vídeos ocupen también siempre todo el ancho de nuestra columna? Y sobre todo ¿Cómo conseguimos que a anchos inferiores al valor de content_width el vídeo se escale proporcionalmente en todos los dispositivos? En definitiva ¿cómo hacer los vídeos responsive?

Al margen de plugins hay una solución con CSS pero pasa por añadir un elemento contenedor a esos vídeos para poder aplicarle un ancho del 100% a esos iframes generados por el protocolo oEmbed con las URL de YouTube, Vimeo, Flickr, Instagram, Twitter, TED, etc.

Si esa URL que se convertirá en iframe la ponemos dentro de un elemento <figure> el CSS sería:

.entry-content figure { padding-bottom:56.25%; padding-top: 30px; height: 0; position: relative; overflow: hidden; margin-bottom: 1em;}

figure iframe, figure object,  figure embed { top: 0;    left: 0;    width: 100%; height: 100%; position: absolute; }

De esta forma nuestros vídeos ocuparán el 100% del ancho de su contenedor con una altura proporcional, es decir, serán responsives.

Lógicamente el trabajo de añadir <figure> y </figure> antes y después en el editor es algo engorroso.

Tenemos 2 opciones para automatizarlo, la primera si siempre has usado oEmbeds y la segunda si en alguna ocasión metiste el código de inserción que te ofrece por ejemplo YouTube

1. Solución para todos los oEmbeds

Podemos añadir en functions.php esta función para que los elementos oEmbeds vayan contenidos en dicho <figure>

function addfigure_video_rwd_html( $html ) {
    return '<figure class="video-rwd">' . $html . '</figure>';
}
add_filter( 'embed_oembed_html', 'addfigure_video_rwd_html', 10, 3 );

Incluso ya que podemos asignarle una clase CSS a figure podemos sustituir en el CSS anterior figure por su clase

.video-rwd { padding-bottom:56.25%; padding-top: 30px; height: 0; position: relative; overflow: hidden; margin-bottom: 1em;}

.video-rwd iframe, .video-rwd object, .video-rwd embed { top: 0; left: 0; width: 100%; height: 100%; position: absolute; }

Esto funcionará para todos aquellos vídeos que utilicen el protocolo oEmbed

2. Para vídeos insertados manualmente con el código copiado y pegado

Si usaste el código de inserción directo debes añadirle tú el contenedor <figure class=»video-rwd»> o hacerlo mediante jQuery

<script>$( ".entry-content iframe, .entry-content object, .entry-content embed").wrap( "<figure class=".video-rwd iframe"></figure>" );</script>

Solución óptima de verdaderas imágenes responsive

Existen soluciones avanzadas y en un futuro próximo formas de hacer que se sirvan tamaños de imágenes específicas para cada dispositivo:

• con <picture> y srcset, todavía no soportada por todos los navegadores. Hoy necesitas el Polyfill Picturefill
• Adaptive Images in HTML

Y plugins para imágenes responsive en WordPress

• Picturefill.WP (plugin de la versión 1.2.x del polyfill Picturefill)
•  Simple Responsive Images y PB Responsive Images son plugins que sirve y crea diferentes tamaños de tus imágenes según las media queries que indiques.

Eso serían las verdaderas imágenes responsive ya que además de renderizar bien no cargaríamos inútilmente el peso de la web.

Solución básica para imágenes responsive en WordPress

Normalmente en nuestros sitios servimos la misma imagen y lo que hacemos es redimensionarla con CSS. El tamaño al que la subamos debe ser el máximo al que queremos que se muestre.

Podemos configurar con una simple regla a las imágenes para que ocupen todo el ancho sin superar su ancho original y su altura en auto para que guarde la proporción.

img {max-width:100%; height:auto}

Lógicamente si no quieres que afecte a todas tus imágenes, si sólo quieres que por ejemplo afecte a las imágenes de tus artículos pones el selector contenedor que contenga tu loop delante de img, esto depende de tu tema.

.entry-content img {max-width:100%; height:auto}

Hay temas cuya columna para los artículos es de ancho fijo, por ejemplo 650px, en Apariencia > Medios es conveniente asignar ese ancho para que cuando subamos alguna imagen tengamos la posibilidad de insertar las imágenes a ese tamaño siempre y cuando la original tenga 650px o más de ancho. Si esto es así podemos en vez de 100% asignar ese tamaño máximo de ancho. Si tuviéramos algunas imágenes por ejemplo de 600px de ancho podríamos forzarlo y en vez de max-width utilizar width. El problema es que si alguna imagen tiene 300px de ancho va a aparecer pixelada a 650px.

Otra situación común sería la de maquetar todas las imágenes al mismo ancho que la columna, por ejemplo 650px, excepto las que alineamos a izquierda o derecha, en ese caso si utilizamos width en vez de max-width podemos utilizar las clases que WordPress asigna a las imágenes alineadas para no escalarlas.

.entry-content img.aligncenter, .entry-content img.alignnone {width:100%; height:auto}

.entry-content img.alignleft, .entry-content img.alignright {max-width:100%; height:auto}

De esta formas las imágenes con la clase alignleft y alignright no se escalarán y se mostrarán a su ancho original siempre que quepan en su contenedor.