• T
    User Attivo •

    Come impostare gli attributi width e height per le immagini

    Siccome sto cercando di risolvere un problema di CLS sul mio blog, mi chiedevo come si fa ad impostare larghezza e altezza per le immagini, visto che PageSpeed Insights me lo rileva come uno dei fattori scatenanti. Grazie.

    0
    shazarak 2 Risposte
  • shazarak
    User Attivo •

    @theavenger prova a dare una occhiata qui

    https://onlinemediamasters.com/specify-image-dimensions-wordpress/
    https://webgaku.net/wordpress/add-img-size/

    in generale, dipende da come hai inserito tu le immagini in WordPress, e da quale tema/plugin stai usando

    la via piu veloce che io sappia, se non lo lo fai a manina, è con plugin tipo Wp-rocket o perfmatters.io ecc

    pero se usi per esempio il blocco immagine con Gutenberg, questo problema non dovresti averlo

    può essere che sia causato da qualche tema vecchio stile , magari sul logo o altre immagini per cui ti carica solo l'immagine senza attributi ecc,

    0
  • shazarak
    User Attivo •

    @theavenger se poi parli del tuo sito, nella tua home page ci sono tre colonne con dentro 3 box in cui vengono visualizzate le immagini dentro un div di classe block1_img

    quelle tre immagini non hanno height e width, e cosi a vedere al volo sembra un codice fatto a mano e non da wordpress

    ne consegne che in teoria, ti dovrebbe bastare inserire le misure altezza e larghezza, solo che non essendoci ne un src-set ne altro, da mobile ti caricherà Comunque le immagini larghe, m a è un altro problema in caso...

    0
  • T
    User Attivo •

    Grazie della risposta. Mi sono dimenticata di specificare quali immagini mi segnala Google... che stupida. In pratica sono i thumbnail che il mio tema grafico crea in automatico per i post correlati, dov'è sopra c'è scritto "Potrebbero interessarti anche..." per intenderci.

    Edit: sto cercando di vedermela da sola e ho trovato il pezzo di codice dove in teoria dovrei mettere mano. Ve lo riporto:

    <div class="image"><a href="<?php echo esc_url(get_permalink($lavander_post->ID)) ?>" rel="bookmark" title=<?php esc_attr_e('Permanent Link to','lavander')?> <?php echo esc_attr($lavander_post->post_title); ?>"><?php lavander_security($image_related) ?></a></div>

    In pratica con gli strumenti di sviluppo di Firefox vedo un DIV che contiene l'immagine che devo modificare, ma purtroppo di PHP non ci capisco niente. Sapete per caso se posso interevenire da qui e come fare?

    Edit: visto che nessuno mi ha risposto ho pensato di usare Javascript. Ho creato un semplicissimo script che ho testato con un editor online e funziona tutto perfettamente, ma quando lo inserisco nel sito non va... Ho provato a metterlo sia in <head> che in <body> ma niente... Eccolo:

    $(document).ready(function () {    
    $('.related img').attr('width','345').attr('height','230');
});

    Sapete dirmi dov'è che sbaglio? Grazie.

    Edit: era il jQuery a mancare... Niente avevo visto dei file del tema grafico col simbolo $, quindi ero convinta che non dovessi importarlo... vabbè... tutto risolto comunque.

    0
Effettua l'accesso per rispondere