Come visualizzare una dimensione diversa dell'immagine per dispositivi mobili

Question

Come visualizzare una dimensione diversa dell'immagine per dispositivi mobili

2 mar 2017, 00:11:18

Visualizzazioni: 19.9K

Voti: 1

Ho impostato quanto segue:

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

che viene utilizzato per servire un'immagine a larghezza piena sul sito web che sto costruendo, ma, come puoi immaginare, per i dispositivi mobili questa viene ridimensionata ad un'altezza ridicolmente piccola e appare molto strana su mobile.

Ho creato una nuova dimensione dell'immagine che ho chiamato 'featured-image-mobile' e ha le dimensioni di 650px per 448px.

Nella pagina effettiva sto visualizzando l'immagine a larghezza piena in questo modo:

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

C'è un modo per mantenere

the_post_thumbnail_url( 'featured-image' );

per tutto tranne che per una risoluzione dello schermo di 650px, e poi cambiare la dimensione dell'immagine nel seguente modo?

the_post_thumbnail_url( 'featured-image-mobile' );

rebeccasmith_me

11

immagini responsive

Commenti

In HTML5 c'è un nuovo attributo per IMG srcset

David Lee

2 mar 2017 00:41:58

Sì, ho provato senza successo. Ad esempio ho fatto così: '$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"> '

Ma mostrava sempre solo la piccola immagine 'featured-image-mobile' a tutte le dimensioni dello schermo, non l'immagine ritagliata originale 'featured-image' che ho impostato per desktop e tablet.

rebeccasmith_me

2 mar 2017 01:06:27

Qual è il tuo effettivo breakpoint quando intendevi 650px? E quello del tuo 'featured-image-mobile'?

nyedidikeke

2 mar 2017 02:49:29

@DavidLee, srcset presuppone che tutte le immagini abbiano le stesse proporzioni e siano quindi intercambiabili, il che non è il caso qui.

Mark Kaplun

2 mar 2017 08:10:38

Tutte le risposte alla domanda

Commenti

Il controllo lato server del tipo di dispositivo è passato di moda anni fa. Rovina la cache e semplicemente non è intelligente a meno che non si abbiano esigenze molto specifiche

Mark Kaplun

2 mar 2017 08:04:33

@mark-kaplun Questo è un suggerimento per un utilizzo senza senso di WP. Dipende dalla conoscenza, non dalla moda. Se ancora funziona (non è deprecato) può essere usato.

Fernando Baltazar

2 mar 2017 08:17:50

Non ha mai funzionato veramente, anche per un dispositivo puramente mobile come iPhone 7 il risultato non è abbastanza buono poiché vorresti mostrare contenuti diversi nelle modalità landscape e portrait, e il passaggio tra queste non comporta l'invio di richieste al server.

Mark Kaplun

2 mar 2017 11:31:48

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

La funzione wp_is_mobile() di WordPress potrebbe essere quella che stai cercando.

// Utilizza la funzione integrata se si tratta di WordPress
if(wp_is_mobile()) // Su dispositivi mobili
{
    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

Potresti mostrare entrambe le immagini e alternarle utilizzando il CSS (sto usando classi base di Bootstrap qui e omettendo il markup non necessario per chiarezza):

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

In alternativa, potresti aggiungere la versione mobile dell'immagine come attributo personalizzato:

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

E successivamente cambiare la sorgente dell'immagine con Javascript sui dispositivi mobili.

Svartbaard

404

2 mar 2017 09:40:23

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

Devi creare una condizione (if) per cambiare o selezionare la parte per dispositivi grandi o mobile, se vuoi impostare immagini diverse.

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

// Usa la funzione
    if(isMobile()){
        // Fai qualcosa solo per gli utenti mobile
        the_post_thumbnail_url( 'featured-image-mobile' );
    }
    else {
        // Fai qualcosa solo per gli utenti desktop
        the_post_thumbnail_url( 'featured-image' );
    }

Ci sono altri esempi qui https://stackoverflow.com/questions/4117555/simplest-way-to-detect-a-mobile-device

Fernando Baltazar

461

2 mar 2017 08:02:41