0WordPress的标志在wordpress中悬停时显示放大的图像

As part of the recent improve­ments I’ve been mak­ing to vari­ous web­sites I wanted to make images in gal­ler­ies show enlarged ver­sions when hovered over. 用基本的做这个 CSS is fairly trivi­al, but I did­n’t just want to expand the ori­gin­al image, 我想让浏览器抓取一个新的 (lar­ger) image too…

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. 好消息是 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.

CSS

CSS I used is as fol­lows. 我只是将它添加到我的主题的 style.css 中 (or rather child-theme — always a good idea to use one)

dt.gallery-icon 一个 img.size-thumbnail:徘徊
{
转换: 规模(3.0);
}

注 (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:徘徊
{
转换: 规模(3.0);
}

注 (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”.

注 (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.

如果您想缩放到 1.5 倍或 2.0 倍,只需更改 3.0 如预期的

jQuery

Add the fol­low­ing to your (孩子) 主题的脚本文件 (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 (孩子) 主题的functions.php

jQuery(文档).准备(功能(){

  jQuery("dt.gallery-icon 一个 img.size-thumbnail").徘徊(功能(){
    jQuery(这).属性("尺寸","(最大宽度: 360PX) 100大众, 360PX");
    }, 功能(){
    jQuery(这).属性("尺寸","(最大宽度: 120PX) 100大众, 120PX");
  });

  //重复以上 5 此处为您要修改的每个不同图像尺寸的行

});

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 to 360 (增加 3 倍以匹配我的 CSS!), and then the second part of the func­tion restores the ori­gin­al 120 width when the hov­er stops.

CSS 以上, you can adjust the num­bers to change how much the image enlarges, 你可以改变 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.

入队你自己的脚本

If your theme did­n’t have a script file and you need to enqueue your own add the fol­low­ing to your (孩子) 主题的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-缩放', get_stylesheet_directory_uri() . '/图像缩放.js', 排列( 'jquery' ), '', 真正);
wp_enqueue_script( 'img-缩放' );

以上将注册您的脚本, in the foot­er, mak­ing sure it is placed after jquery (so jquery should already be avail­able when it executes)

添加图像大小

For com­plete­ness here’s how to add cus­tom image sizes to word­press. 再次, 将此添加到您的 (孩子) 主题的functions.php

添加图像大小( '四分之一宽', 192, 144, 假 );

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. 图像不会被裁剪 (因此最后是假的).

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

函数 my_custom_image_sizes( $尺寸 ) {
    返回 array_merge( $尺寸, 排列(
        'quarter-width' => __('四分之一宽度'),
    ) );
}

尊重现有设置

你可能想做的另一件事 (to ensure respons­ive images work well) is to cre­ate lar­ger (即. 高解析度) thumb­nail sizes that respect the 图形用户界面 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

添加图像大小( 'resp-thumb-2x', (获取选项( 'thumbnail_size_w' ) == 0 ? 0 : '240'), 160, 获取选项( 'thumbnail_crop' ) );

上面的代码检查 2 things — firstly it checks to see if the crop option is set, 如果是, it mir­rors it for our new respons­ive size. 它还检查宽度是否设置为 0 (即. 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 (硬编码). 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!

最后一个提示

如果, 像我这样的, 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, 和大图, 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…

要删除 1536 和 2048 图像是直截了当的

remove_image_size( '1536x1536' ); //去除那个 1536 we dont need it
remove_image_size( '2048x2048' ); //去除那个 2048 我们不需要它

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

//remove the built-in medium-large
add_filter('intermediate_image_sizes', 功能($尺寸) {
    返回数组差异($尺寸, ['中大']);
});

//remove the built-in post-thumbnail
add_filter('intermediate_image_sizes', 功能($尺寸) {
    返回数组差异($尺寸, ['后缩略图']);
});

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

最后一个注意事项

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

尺寸宽度高度 (4:3)高度 (16:9)高度 (3:2)
25美分硬币192144108128
第三288216162192
一半384288216256
Medi­um576432324384
满的768576432512
1152864648768
加大码153611528641024

Note how the widths spe­cified pro­duce whole num­ber heights for all 3 of the most com­mon aspect ratios. 你不会得到像这样的宽度 150 or 200.

Also note the pat­tern in increases. 跳 2 表中的行和大小加倍! 偶数行 (288,576,1152 和 1535) are also 1.5x the pre­vi­ous size so these work well on semi-hi-dpi screens using a 50% dpi 增加. 通过使用这组 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 (请注意,这些之间没有价值 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 对两者都适用 4:3 和 3:2 (和 64px 可以使用 4:3 和 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) 所以我也可以使用这个尺寸, 然后可以一直使用大尺寸, 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的的, 还有一次 JPEG-XL 将于近期登陆浏览器, 很多问题都会得到解决.

请通过下面的评论给我们你的想法! 如果您想订阅,请使用菜单上的订阅链接右上方. 您还可以通过使用下面的链接社会分享这与你的朋友. 干杯.

发表评论