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...
All of the images are already providing a full src-set so all I needed to do was to use a little jQuery (which is already loaded by wordpress anyway) to change the target display size to make the browser pull a larger image. La cosa bella è che CSS works instantly so you get a larger image using the original file, and then the quality improves a split second later as the higher res file gets loaded.
Il CSS
Il CSS I used is as follows. L'ho semplicemente aggiunto allo style.css del mio tema (or rather child-theme — always a good idea to use one)
1 2 3 4 | dt.gallery-icon a img.size-thumbnail:hover { transform: scale(3.0); } |
Appunto (1) — the above CSS applies to gallery images only. It is unlikely anyone would want this functionality for all images displayed anywhere on the page, but you might want it for the main content section. You would need to check how your theme structures this, but in my case the main content area is a “section” so the following code would do the job
1 2 3 4 | section.entry-content p a img.size-thumbnail:hover { transform: scale(3.0); } |
Appunto (2) — This code applies only to thumbnail images. For medium images you would replace “size-thumbnail” with “size-medium”, and for large with “size-large”.
Appunto (3) — Because my thumbnails are 120x80px I want to increase them to 3x their original size. I already have a custom image size of 360×240 that wordpress creates for me that is included in the src-set. For hi-dpi screens there are also even larger image sizes that I have (per esempio. 720×480). Creating additional image sizes in wordpress is easy — there are lots of good guides online if you need to do this.
Se vuoi ridimensionare a 1,5x o 2.0x, cambia semplicemente il 3.0 come desiderato
Il jQuery
Add the following to your (bambino) file di script del tema (assuming it has one). If it doesn’t have one, create your own, and ‘enqueue’ it with a custom function in the (bambino) funzioni del tema.php
1 2 3 4 5 6 7 8 9 10 11 | jQuery(document).ready(function(){ jQuery(“dt.gallery-icon a img.size-thumbnail”).hover(function(){ jQuery(this).attr(“sizes”,”(max-width: 360px) 100vw, 360px”); }, function(){ jQuery(this).attr(“sizes”,”(max-width: 120px) 100vw, 120px”); }); //repeat the above 5 lines here for each different image size you want to modify }); |
The above code is applying to images with class thumbnail that are found inside any dt with a gallery-icon class — so in otherwords — only to images inside the wordpress built-in gallery structure. On hover the max-width is increased from 120 a 360 (un aumento di 3 volte per eguagliare il mio CSS!), and then the second part of the function restores the original 120 width when the hover stops.
Come con il CSS sopra, you can adjust the numbers to change how much the image enlarges, e puoi cambiare il dt.gallery-icon a img.size-thumbnail
section to target a different element or class depending on which images you want to target.
Accoda il tuo script
If your theme didn’t have a script file and you need to enqueue your own add the following to your (bambino) funzioni del tema.php (assuming you called your script file image-zoom.js and saved it in the root folder of the theme)
1 2 | wp_register_script( ‘img-zoom’, get_stylesheet_directory_uri() . ‘/image-zoom.js’, array( ‘jquery’ ), ”, true); wp_enqueue_script( ‘img-zoom’ ); |
Quanto sopra registrerà il tuo script, in the footer, making sure it is placed after jquery (so jquery should already be available when it executes)
Aggiungere le dimensioni dell'immagine
For completeness here’s how to add custom image sizes to wordpress. Di nuovo, aggiungi questo al tuo (bambino) funzioni del tema.php
1 | add_image_size( ‘quarter-width’, 192, 144, false ); |
Above I’ve added a new image-size called “quarter-width” with a maximum width of 192px and a maximum height of 144px. L'immagine non verrà ritagliata (quindi il falso alla fine).
WordPress will now create images of this size automatically when you upload images (you will need to use a thumbnail rebuild plugin to recreate the thumbnails for already-uploaded images).
This new image size will NOT show up for insertion in the editor though. To make it available also add the following code to your functions.php
1 2 3 4 5 | function my_custom_image_sizes( $sizes ) { return array_merge( $sizes, array( ‘quarter-width’ => __(‘Quarter Width’), ) ); } |
Rispettare le impostazioni esistenti
Un'altra cosa che potresti voler fare (to ensure responsive images work well) is to create larger (i.e. ciao dpi) thumbnail sizes that respect the GUI of whether to crop thumbnails or not. To do that use the code below which as you will see is slightly modified from the more basic one above
1 | add_image_size( ‘resp-thumb-2x’, (get_option( ‘thumbnail_size_w’ ) == 0 ? 0 : ‘240’), 160, get_option( ‘thumbnail_crop’ ) ); |
Il codice sopra verifica la presenza di 2 things — firstly it checks to see if the crop option is set, e se lo è, it mirrors it for our new responsive size. Controlla anche se la larghezza è impostata su 0 (i.e. no maximum) in which case our new image will also have no maximum either. I called the new image size “resp-thumb-2x” as it is a ‘responsive’ copy of the thumbnail that is twice as large (for hi-dpi screens with double the normal pixel density). I have also created a number of other sizes to make a fairly complete set.
Note — Since my original thumbnails were 120×80 I want my new ones to be 240×160 so those are the sizes I have specified (hardcoded). It would be possible to get both the height and width specified for the original thumbnail and multiply both by 2 to make this function fully generic, but I didn’t do so when I was developing it so I will leave that to you to figure out!
Un ultimo consiglio
Se, come me, you create your own full set of new image sizes, you may not want wordpress to create it’s own extra hidden sizes. In addition to the original image, and the thumbnail, the medium, e l'immagine grande, wordpress also create a “post-thumbnail”, a “medium-large”, a 1536×1536 and a 2048×2048. These are disabled in 2 different ways…
Per rimuovere il 1536 e 2048 le immagini sono dirette
1 2 | remove_image_size( ‘1536×1536’ ); //remove the 1536 we dont need it remove_image_size( ‘2048×2048’ ); //remove the 2048 we dont need it |
The post-thumb and medium-large are slightly more complicated
1 2 3 4 5 6 7 8 9 | //remove the built-in medium-large add_filter(‘intermediate_image_sizes’, function($sizes) { return array_diff($sizes, [‘medium_large’]); }); //remove the built-in post-thumbnail add_filter(‘intermediate_image_sizes’, function($sizes) { return array_diff($sizes, [‘post-thumbnail’]); }); |
Note that removing the post-thumbnail seems to sometimes have strange effects on the image library in the editor.
Un'ultima nota finale
When deciding on image sizes (for larger images, less so thumbnails) you ideally want a size that common aspect ratio images will always resize nicely to. For that reason I recommend the following sizes
Dimensione | Larghezza | Altezza (4:3) | Altezza (16:9) | Altezza (3:2) |
---|---|---|---|---|
Trimestre | 192 | 144 | 108 | 128 |
Terzo | 288 | 216 | 162 | 192 |
Metà | 384 | 288 | 216 | 256 |
Medium | 576 | 432 | 324 | 384 |
Pieno | 768 | 576 | 432 | 512 |
Grande | 1152 | 864 | 648 | 768 |
XL | 1536 | 1152 | 864 | 1024 |
Note how the widths specified produce whole number heights for all 3 of the most common aspect ratios. Non lo otterrai con larghezze come 150 or 200.
Also note the pattern in increases. Saltare 2 righe nella tabella e la dimensione raddoppia! Le righe pari (288,576,1152 e 1535) are also 1.5x the previous size so these work well on semi-hi-dpi screens using a 50% aumento dpi. Usando questo set di 7 sizes you have a good range of usable options for most viewports AND a good set of responsive images that wordpress will automatically add to the src-set since they will have consistent aspect ratios with no fractions that would lead to quality loss or cropping.
Currently for thumbnails I tend to either have unlimited width allowed OR I hard crop to a fixed 3:2 ratio so I use whole number sizes for thumbnails but I may eventually tweak my theme and extend the above system backwards by having options 48px and 96px wide (nota che non c'è alcun valore tra questi 2 that would work unfortunately — and since I use 60px wide mini thumbnails I haven’t opted to extend backwards). 72px funzionerebbe per entrambi 4:3 e 3:2 (e 64px funzionerebbero con 4:3 e 16:9). Since a majority of my images are taken on my dSLR these are typically 3:2 (the same as the aspect ratio of traditional 35mm film) quindi potrei usare anche questa dimensione, che poi funzionerebbe con le taglie grandi fino in fondo, but the larger sizes are not cropped whereas my thumbnails are — I’m happy for larger images to be both landscape and portrait, but I want thumbnails to typically be landscape only to fit with my design, so that’s why I haven’t extended backwards. Hopefully as more and more logos are available as SVG'S, e una volta JPEG-XL arriverà nei browser nel prossimo futuro, molto di questo sarà risolto.
Credo che abbiamo perso qualcosa? Fateci sapere commentando qui sotto. Se si desidera iscriversi si prega di utilizzare il link iscriviti sul menu in alto a destra. È inoltre possibile condividere con i tuoi amici usando i link sottostanti sociali. Saluti.
lascia un commento