Cómo Desactivar El Responsive Automático De Imágenes De WordPress

Inicio » Programación » Cómo desactivar el responsive automático de imágenes de WordPress
Publicado Por Fernando Tellado el 28 Nov, 2019
Desde la versión four.4 WordPress añade automáticamente el atributo srcset a las imágenes de tu contenido.
El atributo srcset te permite definir diferentes imágenes para usar en diferentes puntos de ruptura del navegador, y así ofrecer distintas imágenes según el dispositivo.
Ejemplo:
1
Los atributos srcset y sizes contienen la información que le indica al navegador qué tamaño de imagen es mejor para cada tamaño (punto de ruptura, viewport) del dispositivo desde el que se visite la página.
Una explicación en detalle:
scrset: Si el ancho de la imagen es de 300px menos entonces el navegador cargará y mostrará picture-300×, si es de más de 300px pero menos de 700px — image-seven-hundred×, and many others.
sizes: Ancho máximo de la imagen para la media query dada, es como una declaración if en la que si el viewport es de 709px menos, el ancho máximo de la imagen es el eighty five% del viewport, si ninguno de los argumentos se cumple entonces el ancho de la imagen será de 840px.
Índice de contenidos
WordPress utiliza the_content para añadir los atributos de adaptabilidad a las imágenes que hayas subido:
Si tu imagen tiene una clase wp-picture-ATTACHMENT_ID.
Si tu imagen no tiene ya un atributo scrset.
Entonces ¿cuál es el problema? ¿No es mejor que sean responsive?
El problema aparece cuando usas una CDN del tipo Amazon S3 Jetpack Photon para entregar tus imágenes, y entonces resulta que tienes unas URLs de imágenes alojadas en tu CDN y los atributos srcset de sus copias en tu alojamiento.
Entonces esas imágenes de tu servidor funcionarán en dispositivos móviles pero no en tamaños de ordenador de escritorio.
No es mi caso ¿hay más motivos para desactivar el responsive automático de imágenes de WordPress?
Pues claro, yo no soy anti-responsive, aquí tienes unas cuantas razones por las que podrías querer desactivar el responsive automático de imágenes de WordPress:
No todos los sitios quieren necesitan imágenes responsive.
No todos los usuarios quieren necesitan que WordPress lo haga todo por ellos.
Porque las soluciones generalizadas no se adaptan al a hundred% de usuarios y posibles escenarios.
Porque hay muchas maneras diferentes de entregar imágenes responsive.
Porque el método de WordPress no funciona en todas las situaciones.
Porque hay usuarios que prefieren implementar sus propias soluciones responsive.
Porque el método de WordPress genera tamaños adicionales de imagen para cada imagen subida, lo que consume espacio y recursos.
¿Cómo desactivo el responsive automático de WordPress en ciertas imágenes?
Puedes hacerlo con el gancho WordPress en wp_calculate_image_srcset.
Este filtro te ofrece 5 argumentos:
$sources Uno más arrays datos de origen a incluir en srcset
$size_array Array de los valores de anchura y altura en píxeles (en ese orden).
$image_src El origen de la imagen.
$image_meta Los metadatos de la imagen devueltos por wp_get_attachment_metadata()
$attachment_id El post_id de la imagen
Aquí tienes un código de ejemplo que puedes usar en el archivo de tu tema en un plugin personal para adaptarlo a tu necesidad:
1
2
three
4
5 tutorial wordpress
6
7
eight
9
10
eleven
12
13
14
15
sixteen
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
forty
41
forty two
forty three
44
45
forty six
47
forty eight
49
50
fifty one
fifty two
fifty three
fifty four
fifty five
56
fifty seven
fifty eight
59
60
61
sixty two
sixty three
64
sixty five
66
sixty seven
sixty eight
sixty nine
70
seventy one
72
73
seventy four
seventy five
76
seventy seven
78
79
eighty
eighty one
82
eighty three
84
eighty five
86
87
88
89
ninety
ninety one
92
93
ninety four
95
ninety six
// El siguiente código es una adaptación de wp-contains/:1061-1180
$image_sizes = $image_meta’sizes’;
$image_width = (int) $size_array0;
$image_height = (int) $size_array1;
$image_basename = wp_basename( $image_meta’file’ );
/
$image_sizes = array(
return false;
// Recuperamos el subditectorio de subidas a partir de la imagen completa.
$dirname = _wp_get_attachment_relative_path( $image_meta’file’ );
/
$image_baseurl = set_url_scheme( $image_baseurl, ‘https’ );
/
/
Filtramos el ancho máximo a incluir en el atributo srcset.
@since 4.4.zero
@param int $max_width El ancho máximo de imagen a incluir srcset. Por defecto es ‘1600’.
/
$sources = array();
/
/
// Seguimos si no hace falta el identificador
if ($identifier === ‘undesirable-identifier’)
$is_src = false;
// Comprobamos que los datos meta de la imagen no estén corruptos.
if ( ! is_array( $picture ) )
// Confirmamos que el nombre de archivo sea parte del src.
if ( ! $src_matched & false !== strpos( $image_src, $dirname $image’file’ ) )
$src_matched = $is_src = true;
proceed;
el archivo esté en el atributo ‘src’.
/
// Si las dimensiones de la imagen están dentro del tamaño esperado en más menos 1px la usamos.
if ( wp_image_matches_ratio( $image_width, $image_height, $picture’width’, $picture’top’ ) )
// Añadimos URL, descriptor y valor al array de orígenes a devolver.
$supply = array(
);
// El ‘src’ de la imagen tiene que ser el primero en el ‘srcset’ debido a un fallo en iOS8.
if ( $is_src )
¿Cómo desactivo completamente el responsive automático de WordPress?
Si tienes claro que no quieres el responsive automático de imágenes de WordPress, del todo, simplemente añade esto a tu plugin private al archivo del tema:
1
¿No hay algún plugin majete para desactivar esto?
Claro, siempre, en este caso se llama Disable Responsive Pictures Full Una vez instalado y activo (no hay opciones) hace esto:
Desactiva las imágenes responsive en la parte seen de la internet.
Desactiva la creación del tamaño de imagen medium_large de 768px
Totalmente listo para funcionar, sin tener que configurar nada.
A partir de aquí tú tienes la libertad, y responsabilidad, de aplicar el método de adaptación a dispositivos (responsive) que consideres más efectivo en tu caso, sin que WordPress lo haga por ti.
VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(5 votos, promedio: four.6)
PUEDE QUE TAMBIÉN TE INTERESE…
Comparte esta entrada en
SOBRE LA AFILIACIÓN
En este blog hay enlaces de afiliado a productos y servicios en los que, si contratas a veces obtienes descuentos exclusivos, y el autor del weblog un porcentaje si finalmente compras algo, pero nunca pagarás de más por ello usando un enlace de afiliado.
Solo recomiendo lo que yo mismo utilizo.
¿NECESITAS AYUDA?
MIS FAVORITOS
¡Hola y bienvenido!
Con más de 500.000 lectores al mes, Ayuda WordPress es el sitio de referencia sobre WordPress en español.
Yo soy Fernando Tellado, divulgador, profesor, escritor, experto en comunicación online y WordPress, pero sobre todo blogger.
MI ÚLTIMO LIBRO
FUNCIONA GRACIAS A…
Puedes informarte más sobre qué cookies estamos utilizando desactivarlas en los AJUSTES.
Aceptar
Rechazar
Política de privacidad
Política de privacidad
Esta internet utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.
La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web ayudarnos a comprender qué secciones de la net encuentras más interesantes y útiles.
Cookies necesarias
Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.
Básicamente la internet no funcionará bien si no las activas.
Estas cookies son:
– Cookies de seguridad.
desactivar
Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta internet tendrás que activar desactivar cookies de nuevo.
Cookies de terceros
Esta net utiliza Google Tag Supervisor para recopilar información anónima tal como el número de visitantes del sitio, las páginas más populares.
Dejar esta cookie activa nos permite mejorar el blog cada día para ofrecerte mejores contenidos.
desactivar
¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!
Cookies adicionales
– MailerLite: Para que puedas suscribirte a nuestro boletín de noticias.
– Disqus: Sistema de comentarios, para que pueda recordar tu usuario en cada visita.
– Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.
desactivar
¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!
Activar todas
Guardar cambios

La entrada Cómo Desactivar El Responsive Automático De Imágenes De WordPress se publicó primero en Encargos Wordpress.