Come faccio a rendere sensibili le immagini presentate da the_post_thumbnail ()?

Sto cercando di rendere le immagini in primo piano recuperate da the_post_thumbnai () nel ciclo di risposta, ma non riesco a trovare una soluzione semplificata.

La logica che voglio implementare è qualcosa del genere:

If the screen size is less or equal to 728px the_post_thumbnai('thumbnail') //Display the thumbnail size image Else the_post_thumbnai() //display the original size image 

Qualcuno può suggerire come posso farlo senza plugin?

Non sono un esperto di php, quindi per favore andate piano sul gergo. Grazie in anticipo.

Solutions Collecting From Web of "Come faccio a rendere sensibili le immagini presentate da the_post_thumbnail ()?"

Non è ansible combinare PHP e CSS in questo modo, poiché PHP è lato server e non conosce la larghezza dello schermo del client, mentre il CSS è lato client e non conosce le funzioni del server. Invece, potresti mostrare entrambe le dimensioni dell’immagine e poi usare i CSS per mostrarle / nasconderle. per esempio:

 
< ?php the_post_thumbnail('thumbnail'); ?>
< ?php the_post_thumbnail('full'); ?>

e CSS:

 @media only screen and (max-width: 728px) { .image-thumbnail {display: block;} .image-fullsize {display: none;} } @media only screen and (min-width: 729px) { .image-thumbnail {display: none;} .image-fullsize {display: block;} } 

Un approccio alternativo sarebbe quello di produrre l’immagine a dimensione intera e usare il CSS per regolare la larghezza a seconda della larghezza dello schermo del client.

 
< ?php the_post_thumbnail('full'); ?>

con CSS:

 @media only screen and (max-width: 728px) { .image-fullsize img {width: 200px; height:auto;} } @media only screen and (min-width: 729px) { .image-fullsize img {width: 100%; height:auto;} } 

La differenza è che con il primo metodo verrà visualizzata la miniatura ritagliata ma con la seconda verrà visualizzata l’immagine a dimensione intera ridimensionata per la miniatura (e potrai aggiungere più punti di interruzione in seguito).

Il modello PHP che genera l’output HTML non conosce le dimensioni dello schermo. Puoi usare img srcset nel tuo modello ma non avrai la compatibilità del browser al 100%. Oppure, usa semplicemente i CSS per regolare le dimensioni dell’immagine.