Cum să afișezi o dimensiune diferită a imaginii pentru mobil

Question

Cum să afișezi o dimensiune diferită a imaginii pentru mobil

2 mar. 2017, 00:11:18

Vizualizări: 19.9K

Voturi: 1

Am configurat următoarele:

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

care este folosit pentru a afișa o imagine pe toată lățimea site-ului pe care îl construiesc, dar, după cum vă puteți imagina, pe mobil aceasta este redimensionată la o înălțime ridicol de mică și arată foarte ciudat pe dispozitivele mobile.

Am creat o nouă dimensiune pentru imagine pe care am numit-o 'featured-image-mobile' și are dimensiunile de 650px lățime și 448px înălțime.

Pe pagina actuală afișez imaginea pe toată lățimea astfel:

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

Există vreo modalitate prin care pot păstra

the_post_thumbnail_url( 'featured-image' );

pentru toate rezoluțiile cu excepția celei de 650px, și apoi să schimb dimensiunea imaginii la următoarea?

the_post_thumbnail_url( 'featured-image-mobile' );

rebeccasmith_me

11

imagini responsive

Comentarii

În HTML5 există un nou atribut pentru IMG srcset

David Lee

2 mar. 2017 00:41:58

Da, am încercat asta fără succes. De exemplu, am făcut următoarele: '$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"> '

Dar a servit doar imaginea mică 'featured-image-mobile' la toate dimensiunile ecranului, nu imaginea originală tăiată 'featured-image' pe care am setat-o pentru desktop și tabletă.

rebeccasmith_me

2 mar. 2017 01:06:27

Care este intervalul tău real de breakpoint când ai menționat 650px? Dar cel al tău 'featured-image-mobile'?

nyedidikeke

2 mar. 2017 02:49:29

@DavidLee, srcset presupune că toate imaginile au același raport de aspect și, prin urmare, sunt interschimbabile, ceea ce nu este cazul aici.

Mark Kaplun

2 mar. 2017 08:10:38

Toate răspunsurile la întrebare

Comentarii

verificarea pe partea de server a tipului de dispozitiv a ieșit din modă acum ani de zile. Încălca caching-ul și pur și simplu nu este inteligentă decât dacă ai nevoi foarte specifice

Mark Kaplun

2 mar. 2017 08:04:33

@mark-kaplun Aceasta este o sugestie pentru o utilizare absurdă în WordPress. Depinde de cunoștințe, nu de modă. Dacă încă funcționează (nu este depreciat) poate fi folosit.

Fernando Baltazar

2 mar. 2017 08:17:50

niciodată nu a funcționat corect. Chiar și pentru un dispozitiv pur mobil precum iPhone 7, rezultatul nu este suficient de bun, deoarece vei dori să afișezi lucruri diferite în modurile landscape și portrait, iar trecerea între ele nu implică trimiterea de cereri către server.

Mark Kaplun

2 mar. 2017 11:31:48

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

Funcția WordPress wp_is_mobile() poate fi exact ceea ce cauți.

// Folosește funcția încorporată dacă ești pe WP
if(wp_is_mobile()) // Pe dispozitiv mobil
{
    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

Ai putea afișa ambele imagini și apoi comuta între ele folosind CSS (folosesc aici doar clase de bază din Bootstrap și omit markup-ul inutil pentru claritate):

<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>

Alternativ, ai putea adăuga versiunea mobilă a imaginii ca un atribut personalizat:

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

Apoi poți schimba sursa imaginii cu Javascript pe dispozitive mobile.

Svartbaard

404

2 mar. 2017 09:40:23

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

Trebuie să faci o condițională (if) pentru a schimba sau selecta partea pentru dispozitive mari sau mobile, dacă dorești să setezi imagini diferite.

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"]);
}

// Folosește funcția
    if(isMobile()){
        // Fă ceva doar pentru utilizatorii de pe dispozitive mobile
        the_post_thumbnail_url( 'featured-image-mobile' );
    }
    else {
        // Fă ceva doar pentru utilizatorii de pe desktop
        the_post_thumbnail_url( 'featured-image' );
    }

Mai multe exemple găsești aici https://stackoverflow.com/questions/4117555/simplest-way-to-detect-a-mobile-device

Fernando Baltazar

461

2 mar. 2017 08:02:41