Cómo mostrar un tamaño de imagen diferente para móviles

Question

Cómo mostrar un tamaño de imagen diferente para móviles

2 mar 2017, 00:11:18

Vistas: 19.9K

Votos: 1

He configurado lo siguiente:

add_image_size( 'featured-image', 1600, 450, true );

que se usa para mostrar una imagen de ancho completo en el sitio web que estoy construyendo, pero, como pueden imaginar, en móviles esto se reescala a una altura ridículamente pequeña y se ve muy extraño en dispositivos móviles.

He creado un nuevo tamaño de imagen que he nombrado 'featured-image-mobile' y tiene las dimensiones de 650px por 448px.

En la página actual estoy mostrando la imagen de ancho completo así:

<img src="<?php the_post_thumbnail_url( 'featured-image' )?>"
    alt="<?php echo $altTag; ?>"
    title="<?php echo $titleTag; ?>">

¿Hay alguna manera de mantener

the_post_thumbnail_url( 'featured-image' );

para todo excepto una resolución de pantalla de 650px, y entonces cambiar el tamaño de la imagen a lo siguiente?

the_post_thumbnail_url( 'featured-image-mobile' );

rebeccasmith_me

11

imágenes responsive

Comentarios

En HTML5 hay un nuevo atributo para IMG srcset

David Lee

2 mar 2017 00:41:58

Sí, lo intenté pero no funcionó. Por ejemplo, hice lo siguiente: '$img_src = wp_get_attachment_image_url( $post_thumbnail_id, 'featured-image-mobile' ); $img_srcset = wp_get_attachment_image_srcset( $post_thumbnail_id, 'featured-image' ); <img src="<?php echo esc_url( $img_src ); ?>" srcset="<?php echo esc_attr( $img_srcset ); ?>" sizes="(max-width: 650px) 650px, 440px"> '

Pero solo mostraba siempre la imagen pequeña 'featured-image-mobile' en todos los tamaños de pantalla, no la imagen original recortada 'featured-image' que configuré para escritorio y tablet.

rebeccasmith_me

2 mar 2017 01:06:27

¿Cuál es tu rango real de breakpoint cuando mencionas 650px? ¿Y qué hay acerca del de tu 'featured-image-mobile'?

nyedidikeke

2 mar 2017 02:49:29

@DavidLee, srcset asume que todas las imágenes tienen la misma relación de aspecto y, por lo tanto, son intercambiables, lo cual no es el caso aquí.

Mark Kaplun

2 mar 2017 08:10:38

Todas las respuestas a la pregunta

Comentarios

la verificación del lado del servidor para el tipo de dispositivo pasó de moda hace años. Rompe el almacenamiento en caché y simplemente no es inteligente a menos que tengas necesidades muy específicas

Mark Kaplun

2 mar 2017 08:04:33

@mark-kaplun Esta es una sugerencia para un uso sin sentido de WP. Depende del conocimiento, no de la moda. Si todavía funciona (no está obsoleto) puede usarse.

Fernando Baltazar

2 mar 2017 08:17:50

nunca funcionó, incluso para un dispositivo puramente móvil como el iPhone 7 el resultado no es lo suficientemente bueno ya que querrás mostrar cosas diferentes en los modos horizontal y vertical, y el cambio entre ellos no implica enviar ninguna solicitud al servidor.

Mark Kaplun

2 mar 2017 11:31:48

Elex 1.04K · Answer 1 · 2017-03-02T14:35:52Z

La función de WordPress wp_is_mobile() puede ser la que estás buscando.

// Usar la función incorporada si es WP
if(wp_is_mobile()) // En móvil
{
    the_post_thumbnail_url('featured-image-mobile');
}
else
{
    the_post_thumbnail_url('featured-image');
}

Elex

1.04K

2 mar 2017 14:35:52

Svartbaard 404 · Answer 2 · 2017-03-02T09:40:23Z

Podrías mostrar ambas imágenes y alternar entre ellas usando CSS (aquí estoy usando clases básicas de Bootstrap y omitiendo el marcado innecesario para mayor claridad):

<div class="featured-image hidden-xs">
   <img src="<?php the_post_thumbnail_url( 'featured-image' )?>">
</div>

<div class="featured-image-mobile visible-xs-block">
   <img src="<?php the_post_thumbnail_url( 'featured-image-mobile' )?>">
</div>

Alternativamente, podrías añadir la versión móvil de la imagen como un atributo personalizado:

<img src="<?php the_post_thumbnail_url( 'featured-image' )?>" data-mob-src="<?php the_post_thumbnail_url( 'featured-image-mobile' )?>">

Y posteriormente cambiar la fuente de la imagen con Javascript en dispositivos móviles.

Svartbaard

404

2 mar 2017 09:40:23

Fernando Baltazar 461 · Answer 3 · 2017-03-02T08:02:41Z

Necesitas hacer un condicional (if) para cambiar o seleccionar la parte para dispositivos grandes o móviles, si deseas establecer diferentes imágenes.

function isMobile() {
    return preg_match("/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i", $_SERVER["HTTP_USER_AGENT"]);
}

// Usar la función
    if(isMobile()){
        // Hacer algo solo para usuarios móviles
        the_post_thumbnail_url( 'featured-image-mobile' );
    }
    else {
        // Hacer algo solo para usuarios de escritorio
        the_post_thumbnail_url( 'featured-image' );
    }

Hay más ejemplos aquí https://stackoverflow.com/questions/4117555/simplest-way-to-detect-a-mobile-device

Fernando Baltazar

461

2 mar 2017 08:02:41