0Mostra l'immagine ingrandita al passaggio del mouse in wordpress

Come parte dei recenti miglioramenti che ho apportato a vari siti Web, volevo che le immagini nelle gallerie mostrassero versioni ingrandite quando passavo sopra. Fare questo con base CSS è abbastanza banale, ma non volevo solo espandere l'immagine originale, Volevo che il browser prendesse un nuovo (più grande) anche l'immagine...

Tutte le immagini stanno già fornendo un set completo di src, quindi tutto ciò che dovevo fare era usare un po' di jQuery (che è già caricato da wordpress comunque) per modificare la dimensione di visualizzazione di destinazione per fare in modo che il browser estragga un'immagine più grande. La cosa bella è che CSS funziona istantaneamente in modo da ottenere un'immagine più grande utilizzando il file originale, e quindi la qualità migliora una frazione di secondo dopo quando viene caricato il file ad alta risoluzione.

Il CSS

Il CSS Ho usato è il seguente. L'ho semplicemente aggiunto allo style.css del mio tema (o meglio il tema del bambino — è sempre una buona idea usarne uno)

dt.gallery-icon a img.size-thumbnail:passa il mouse
{
trasformare: scala(3.0);
}

Appunto (1) - quanto sopra CSS si applica solo alle immagini della galleria. È improbabile che qualcuno desideri questa funzionalità per tutte le immagini visualizzate in qualsiasi punto della pagina, ma potresti volerlo per la sezione del contenuto principale. Dovresti controllare come il tuo tema struttura questo, ma nel mio caso l'area del contenuto principale è una "sezione", quindi il codice seguente farebbe il lavoro

section.entry-content p a img.size-thumbnail:passa il mouse
{
trasformare: scala(3.0);
}

Appunto (2) — Questo codice si applica solo alle immagini in miniatura. Per le immagini medie, sostituiresti "dimensione-miniatura" con "dimensione-medio", e per grandi con “taglia-grande”.

Appunto (3) — Poiché le mie miniature sono 120x80px, voglio aumentarle a 3 volte la loro dimensione originale. Ho già una dimensione dell'immagine personalizzata di 360 × 240 che wordpress crea per me che è inclusa nel set src. Per gli schermi hi-dpi ci sono anche dimensioni dell'immagine ancora più grandi che ho (e.g. 720×480). Creare dimensioni di immagine aggiuntive in wordpress è facile: ci sono molte buone guide online se devi farlo.

Se vuoi ridimensionare a 1,5x o 2.0x, cambia semplicemente il 3.0 come desiderato

Il jQuery

Aggiungi quanto segue al tuo (bambino) file di script del tema (ammesso che ne abbia uno). Se non ne ha uno, crea il tuo, e 'accodalo' con una funzione personalizzata nel file (bambino) funzioni del tema.php

jQuery(documento).pronto(funzione(){

  jQuery("dt.gallery-icon a img.size-thumbnail").passa il mouse(funzione(){
    jQuery(questo).attr("taglie","(larghezza massima: 360px) 100vw, 360px");
    }, funzione(){
    jQuery(questo).attr("taglie","(larghezza massima: 120px) 100vw, 120px");
  });

  //ripetere quanto sopra 5 linee qui per ogni diversa dimensione dell'immagine che si desidera modificare

});

Il codice sopra si applica alle immagini con la miniatura della classe che si trovano all'interno di qualsiasi dt con una classe gallery-icon - quindi in altre parole - solo alle immagini all'interno della struttura della galleria integrata di wordpress. Al passaggio del mouse la larghezza massima viene aumentata da 120 a 360 (un aumento di 3 volte per eguagliare il mio CSS!), e quindi la seconda parte della funzione ripristina l'originale 120 larghezza quando il passaggio del mouse si ferma.

Come con il CSS sopra, è possibile regolare i numeri per modificare l'ingrandimento dell'immagine, e puoi cambiare il dt.gallery-icon a img.size-thumbnail sezione per scegliere come target un elemento o una classe diversi a seconda delle immagini a cui vuoi rivolgerti.

Accoda il tuo script

Se il tuo tema non aveva un file di script e devi accodare il tuo, aggiungi quanto segue al tuo (bambino) funzioni del tema.php (supponendo che tu abbia chiamato il tuo file di script image-zoom.js e lo abbia salvato nella cartella principale del tema)

wp_register_script( 'img-zoom', get_stylesheet_directory_uri() . '/image-zoom.js', schiera( 'query' ), '', vero);
wp_enqueue_script( 'img-zoom' );

Quanto sopra registrerà il tuo script, nel piè di pagina, assicurandosi che sia posizionato dopo jquery (quindi jquery dovrebbe essere già disponibile quando viene eseguito)

Aggiungere le dimensioni dell'immagine

Per completezza, ecco come aggiungere dimensioni delle immagini personalizzate a wordpress. Di nuovo, aggiungi questo al tuo (bambino) funzioni del tema.php

aggiungi_dimensione_immagine( 'larghezza quarto', 192, 144, falso );

Sopra ho aggiunto una nuova dimensione dell'immagine chiamata "quarto di larghezza" con una larghezza massima di 192 px e un'altezza massima di 144 px. L'immagine non verrà ritagliata (quindi il falso alla fine).

WordPress ora creerà automaticamente immagini di queste dimensioni quando carichi le immagini (dovrai utilizzare un plug-in di ricostruzione delle miniature per ricreare le miniature delle immagini già caricate).

Tuttavia, questa nuova dimensione dell'immagine NON verrà visualizzata per l'inserimento nell'editor. Per renderlo disponibile aggiungi anche il seguente codice al tuo functions.php

funzione my_custom_image_sizes( $taglie ) {
    return array_merge( $taglie, schiera(
        'quarter-width' => __('Larghezza quarto'),
    ) );
}

Rispettare le impostazioni esistenti

Un'altra cosa che potresti voler fare (per garantire che le immagini reattive funzionino bene) è creare più grande (i.e. ciao dpi) dimensioni delle miniature che rispettano il GUI se ritagliare o meno le miniature. Per farlo usa il codice qui sotto che come vedrai è leggermente modificato rispetto a quello più basilare sopra

aggiungi_dimensione_immagine( 'resp-thumb-2x', (get_option( 'thumbnail_size_w' ) == 0 ? 0 : '240'), 160, get_option( 'ritaglio_miniatura' ) );

Il codice sopra verifica la presenza di 2 cose: in primo luogo controlla se l'opzione di ritaglio è impostata, e se lo è, lo rispecchia per la nostra nuova dimensione reattiva. Controlla anche se la larghezza è impostata su 0 (i.e. nessun massimo) nel qual caso anche la nostra nuova immagine non avrà il massimo. Ho chiamato la nuova dimensione dell'immagine "resp-thumb-2x" in quanto è una copia "reattiva" della miniatura che è due volte più grande (per schermi hi-dpi con il doppio della normale densità di pixel). Ho anche creato una serie di altre dimensioni per creare un set abbastanza completo.

Nota: poiché le mie miniature originali erano 120 × 80, voglio che le mie nuove siano 240 × 160, quindi quelle sono le dimensioni che ho specificato (hardcoded). Sarebbe possibile ottenere sia l'altezza che la larghezza specificate per la miniatura originale e moltiplicarle entrambe per 2 per rendere questa funzione completamente generica, ma non l'ho fatto quando lo stavo sviluppando, quindi lascio a te il compito di capirlo!

Un ultimo consiglio

Se, come me, crei il tuo set completo di nuove dimensioni dell'immagine, potresti non volere che wordpress crei le sue dimensioni nascoste extra. Oltre all'immagine originale, e la miniatura, il mezzo, e l'immagine grande, wordpress crea anche una "miniatura post", un “medio-grande”, un 1536×1536 e un 2048×2048. Questi sono disabilitati 2 modi diversi...

Per rimuovere il 1536 e 2048 le immagini sono dirette

rimuovi_dimensione_immagine( '1536x1536' ); //Rimuovi il 1536 we dont need it
remove_image_size( '2048x2048' ); //Rimuovi il 2048 non ne abbiamo bisogno

Il post pollice e il medio-grande sono leggermente più complicati

//remove the built-in medium-large
add_filter('dimensioni_immagine_intermedia', funzione($taglie) {
    return array_diff($taglie, ['medio grande']);
});

//remove the built-in post-thumbnail
add_filter('dimensioni_immagine_intermedia', funzione($taglie) {
    return array_diff($taglie, ['post-miniatura']);
});

Nota che la rimozione della post-miniatura a volte sembra avere strani effetti sulla libreria di immagini nell'editor.

Un'ultima nota finale

Al momento di decidere le dimensioni dell'immagine (per immagini più grandi, meno miniature) idealmente si desidera una dimensione a cui le immagini con proporzioni comuni si ridimensionino sempre bene. Per questo motivo consiglio le seguenti taglie

Nota come le larghezze specificate producono altezze di numeri interi per tutti 3 delle proporzioni più comuni. Non lo otterrai con larghezze come 150 o 200.

Notare anche il motivo negli aumenti. Saltare 2 righe nella tabella e la dimensione raddoppia! Le righe pari (288,576,1152 e 1535) sono anche 1,5 volte le dimensioni precedenti, quindi funzionano bene su schermi semi-hi-dpi usando a 50% aumento dpi. Usando questo set di 7 dimensioni hai una buona gamma di opzioni utilizzabili per la maggior parte dei viewport E un buon set di immagini reattive che wordpress aggiungerà automaticamente al set src poiché avranno proporzioni coerenti senza frazioni che porterebbero a perdita di qualità o ritaglio.

Attualmente per le miniature tendo ad avere una larghezza illimitata consentita OPPURE ritaglio a un livello fisso 3:2 rapporto, quindi utilizzo le dimensioni dei numeri interi per le miniature, ma alla fine potrei modificare il mio tema ed estendere il sistema sopra all'indietro avendo opzioni di 48 px e 96 px di larghezza (nota che non c'è alcun valore tra questi 2 purtroppo funzionerebbe e poiché utilizzo mini miniature di 60 px di larghezza non ho scelto di estenderlo all'indietro). 72px funzionerebbe per entrambi 4:3 e 3:2 (e 64px funzionerebbero con 4:3 e 16:9). Poiché la maggior parte delle mie immagini sono state scattate con la mia reflex digitale, queste sono in genere 3:2 (le stesse proporzioni della tradizionale pellicola da 35 mm) quindi potrei usare anche questa dimensione, che poi funzionerebbe con le taglie grandi fino in fondo, ma le dimensioni più grandi non vengono ritagliate mentre le mie miniature lo sono: sono felice che le immagini più grandi siano sia orizzontali che verticali, ma voglio che le miniature siano in genere orizzontali solo per adattarsi al mio design, ecco perché non mi sono esteso all'indietro. Si spera che sempre più loghi siano disponibili come SVG'S, e una volta JPEG-XL arriverà nei browser nel prossimo futuro, molto di questo sarà risolto.