Rendere le immagini reattive (o responsive) significa dare loro la capacità di adattarsi automaticamente alla dimensione dello schermo o del dispositivo usato dall’utente che visita il vostro blod WordPress. Così l’immagine con caratteristica reattiva assumerà automaticamente una certa dimensione su una schermo grande mentre ne assumerà un’altra visualizzata ad esempio su un iPad.
In questo breve tutorial vedremo come rendere con grande semplicità tutte le immagini reattive sul vostro blog WordPress.
Inserire la seguente funzione nel file function.php del vostro tema:
|
1 2 3 4 5 |
function responsive_images($atts, $content = null) { return '<div class="image-resized">' . $content .'</div>'; } add_shortcode('responsive', 'responsive_images'); |
Dopodichè aggiungete nel file style.css del vostro tema la seguente regola:
|
1 2 3 4 5 6 |
@media only screen and (max-width:767px) { .image-resized img { width:100%; height:auto; } } |
Ora potrete utilizzare lo shortcode [responsive] in ogni immagine vorrete rendere reattiva nei vostri post:
|
1 |
[responsive]<img src="image_url" alt="alt" title="title" />[/responsive] |
Ringraziamo Rockable Themes per l’utile trucchetto 😉
| Articolo pubblicato 6 anni fa nella categoria 
