0WordPressのホバーに拡大画像を表示する

さまざまなウェブサイトに最近行った改善の一環として、ギャラリーの画像にカーソルを合わせると拡大バージョンが表示されるようにしたかった. 基本でこれを行う CSS かなり些細なことです, 元の画像を拡大したくなかった, 私はブラウザに新しいものをつかませたかった (大きい) 画像も…

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 aimg.size-サムネイル:ホバー
{
変換: 規模(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 aimg.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 (例えば. 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 aimg.size-サムネイル").ホバー(機能(){
    jQuery(この).attr("サイズ","(最大幅: 360PX) 100vw, 360PX");
    }, 機能(){
    jQuery(この).attr("サイズ","(最大幅: 120PX) 100vw, 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 に 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-zoom', get_stylesheet_directory_uri() . '/image-zoom.js', 配列( 'jquery' ), '', true);
wp_enqueue_script( 'img-zoom' );

上記はあなたのスクリプトを登録します, 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

add_image_size( 「1/4幅」, 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 (i.e. hi-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' ) );

上記のコードは 2 things — firstly it checks to see if the crop option is set, そしてそれが, it mir­rors it for our new respons­ive size. また、幅がに設定されているかどうかを確認します 0 (i.e. 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', 機能($サイズ) {
    array_diffを返します($サイズ, ['medium_large']);
});

//remove the built-in post-thumbnail
add_filter('intermediate_image_sizes', 機能($サイズ) {
    array_diffを返します($サイズ, [「サムネイル後」]);
});

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

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 テーブルの行とサイズが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は近い将来ブラウザに登場します, これの多くは解決されます.

私たちが何かを逃したと思います? 私たちは以下のコメントで教えてください. あなたが購読したい場合は、右上のメニューで購読リンクをご利用ください. また、下記の社会的なリンクを使用してお友達とこれを共有することができます. 乾杯.