0Mostrar imagem ampliada ao passar o mouse no wordpress

Como parte das melhorias recentes que tenho feito em vários sites, eu queria fazer imagens em galerias mostrarem versões ampliadas quando pairava sobre. Fazendo isso com o básico CSS é bastante trivial, mas eu não queria apenas expandir a imagem original, Eu queria que o navegador pegasse um novo (maior) imagem também ...

All of the images are already provid­ing a full src-set so all I needed to do was to use a little jQuery (which is already loaded by word­press any­way) to change the tar­get dis­play size to make the browser pull a lar­ger image. O bom é que o CSS works instantly so you get a lar­ger image using the ori­gin­al file, and then the qual­ity improves a split second later as the high­er res file gets loaded.

O CSS

O CSS I used is as fol­lows. Eu simplesmente adicionei isso ao style.css do meu tema (or rather child-theme — always a good idea to use one)

dt.gallery-icon a img.size-thumbnail:flutuar
{
transformar: escala(3.0);
}

Nota (1) — the above CSS applies to gal­lery images only. It is unlikely any­one would want this func­tion­al­ity for all images dis­played any­where on the page, but you might want it for the main con­tent sec­tion. You would need to check how your theme struc­tures this, but in my case the main con­tent area is a “sec­tion” so the fol­low­ing code would do the job

section.entry-content p a img.size-thumbnail:flutuar
{
transformar: escala(3.0);
}

Nota (2) — This code applies only to thumb­nail images. For medi­um images you would replace “size-thumb­nail” with “size-medi­um”, and for large with “size-large”.

Nota (3) — Because my thumb­nails are 120x80px I want to increase them to 3x their ori­gin­al size. I already have a cus­tom image size of 360×240 that word­press cre­ates for me that is included in the src-set. For hi-dpi screens there are also even lar­ger image sizes that I have (e.g. 720×480). Cre­at­ing addi­tion­al image sizes in word­press is easy — there are lots of good guides online if you need to do this.

Se você quiser dimensionar para 1,5x ou 2,0x, altere simplesmente o 3.0 como desejado

O jQuery

Add the fol­low­ing to your (filho) arquivo de script do tema (assum­ing it has one). If it does­n’t have one, cre­ate your own, and ‘enqueue’ it with a cus­tom func­tion in the (filho) theme’s functions.php

jQuery(documento).pronto(função(){

  jQuery("dt.gallery-icon a img.size-thumbnail").flutuar(função(){
    jQuery(este).atr("tamanhos","(largura máxima: 360px) 100vw, 360px");
    }, função(){
    jQuery(este).atr("tamanhos","(largura máxima: 120px) 100vw, 120px");
  });

  //repita o acima 5 linhas aqui para cada tamanho de imagem diferente que você deseja modificar

});

The above code is apply­ing to images with class thumb­nail that are found inside any dt with a gal­lery-icon class — so in oth­er­words — only to images inside the word­press built-in gal­lery struc­ture. On hov­er the max-width is increased from 120 para 360 (um aumento de 3x para corresponder ao meu CSS!), and then the second part of the func­tion restores the ori­gin­al 120 width when the hov­er stops.

Tal como acontece com o CSS acima, you can adjust the num­bers to change how much the image enlarges, e você pode mudar o dt.gallery-icon a img.size-thumbnail sec­tion to tar­get a dif­fer­ent ele­ment or class depend­ing on which images you want to target.

Coloque seu próprio script na fila

If your theme did­n’t have a script file and you need to enqueue your own add the fol­low­ing to your (filho) theme’s functions.php (assum­ing you called your script file image-zoom.js and saved it in the root folder of the theme)

wp_register_script( 'img-zoom', get_stylesheet_directory_uri() . '/image-zoom.js', ordem( 'jquery' ), '', true);
wp_enqueue_script( 'img-zoom' );

O acima irá registrar o seu script, in the foot­er, mak­ing sure it is placed after jquery (so jquery should already be avail­able when it executes)

Adicionando tamanhos de imagem

For com­plete­ness here’s how to add cus­tom image sizes to word­press. Novamente, adicione isso ao seu (filho) theme’s functions.php

add_image_size( 'um quarto de largura', 192, 144, falso );

Above I’ve added a new image-size called “quarter-width” with a max­im­um width of 192px and a max­im­um height of 144px. A imagem não será cortada (daí o falso no final).

Word­Press will now cre­ate images of this size auto­mat­ic­ally when you upload images (you will need to use a thumb­nail rebuild plu­gin to recre­ate the thumb­nails for already-uploaded images).

This new image size will NOT show up for inser­tion in the edit­or though. To make it avail­able also add the fol­low­ing code to your functions.php

function my_custom_image_sizes( $tamanhos ) {
    return array_merge( $tamanhos, ordem(
        'quarter-width' => __('Quarter Width'),
    ) );
}

Respeitando as configurações existentes

Mais uma coisa que você pode querer fazer (to ensure respons­ive images work well) is to cre­ate lar­ger (isto é. oi-dpi) thumb­nail sizes that respect the GUI of wheth­er to crop thumb­nails or not. To do that use the code below which as you will see is slightly mod­i­fied from the more basic one above

add_image_size( 'resp-thumb-2x', (get_Option( 'thumbnail_size_w' ) == 0 ? 0 : '240'), 160, get_Option( 'thumbnail_crop' ) );

O código acima verifica 2 things — firstly it checks to see if the crop option is set, e se for, it mir­rors it for our new respons­ive size. Ele também verifica se a largura está definida para 0 (isto é. no max­im­um) in which case our new image will also have no max­im­um either. I called the new image size “resp-thumb-2x” as it is a ‘respons­ive’ copy of the thumb­nail that is twice as large (for hi-dpi screens with double the nor­mal pixel dens­ity). I have also cre­ated a num­ber of oth­er sizes to make a fairly com­plete set.

Note — Since my ori­gin­al thumb­nails were 120×80 I want my new ones to be 240×160 so those are the sizes I have spe­cified (codificado). It would be pos­sible to get both the height and width spe­cified for the ori­gin­al thumb­nail and mul­tiply both by 2 to make this func­tion fully gen­er­ic, but I did­n’t do so when I was devel­op­ing it so I will leave that to you to fig­ure out!

Uma dica final

Se, como eu, you cre­ate your own full set of new image sizes, you may not want word­press to cre­ate it’s own extra hid­den sizes. In addi­tion to the ori­gin­al image, and the thumb­nail, the medi­um, e a imagem grande, word­press also cre­ate a “post-thumb­nail”, a “medi­um-large”, a 1536×1536 and a 2048×2048. These are dis­abled in 2 dif­fer­ent ways…

Para remover o 1536 e 2048 imagens são diretas

remove_image_size( '1536x1536' ); //remova o 1536 we dont need it
remove_image_size( '2048x2048' ); //remova o 2048 nós não precisamos disso

The post-thumb and medi­um-large are slightly more complicated

//remove the built-in medium-large
add_filter('intermediário_imagem_sizes', função($tamanhos) {
    return array_diff($tamanhos, ['médio Grande']);
});

//remove the built-in post-thumbnail
add_filter('intermediário_imagem_sizes', função($tamanhos) {
    return array_diff($tamanhos, ['pós-miniatura']);
});

Note that remov­ing the post-thumb­nail seems to some­times have strange effects on the image lib­rary in the editor.

Uma nota final final

When decid­ing on image sizes (for lar­ger images, less so thumb­nails) you ideally want a size that com­mon aspect ratio images will always res­ize nicely to. For that reas­on I recom­mend the fol­low­ing sizes

Note how the widths spe­cified pro­duce whole num­ber heights for all 3 of the most com­mon aspect ratios. Você não vai conseguir isso com larguras como 150 or 200.

Also note the pat­tern in increases. Pular 2 linhas na tabela e o tamanho dobra! As linhas pares (288,576,1152 e 1535) are also 1.5x the pre­vi­ous size so these work well on semi-hi-dpi screens using a 50% aumento de dpi. Usando este conjunto de 7 sizes you have a good range of usable options for most view­ports AND a good set of respons­ive images that word­press will auto­mat­ic­ally add to the src-set since they will have con­sist­ent aspect ratios with no frac­tions that would lead to qual­ity loss or cropping.

Cur­rently for thumb­nails I tend to either have unlim­ited width allowed OR I hard crop to a fixed 3:2 ratio so I use whole num­ber sizes for thumb­nails but I may even­tu­ally tweak my theme and extend the above sys­tem back­wards by hav­ing options 48px and 96px wide (note que não há valor entre estes 2 that would work unfor­tu­nately — and since I use 60px wide mini thumb­nails I haven’t opted to extend back­wards). 72px funcionaria para ambos 4:3 e 3:2 (e 64px funcionaria com 4:3 e 16:9). Since a major­ity of my images are taken on my dSLR these are typ­ic­ally 3:2 (the same as the aspect ratio of tra­di­tion­al 35mm film) então eu poderia usar este tamanho também, que funcionaria com os tamanhos grandes em todo o caminho, but the lar­ger sizes are not cropped where­as my thumb­nails are — I’m happy for lar­ger images to be both land­scape and por­trait, but I want thumb­nails to typ­ic­ally be land­scape only to fit with my design, so that’s why I haven’t exten­ded back­wards. Hope­fully as more and more logos are avail­able as SVG'S, e uma vez JPEG-XL chega no navegador em um futuro próximo, muito disso será resolvido.