さまざまなウェブサイトに最近行った改善の一環として、ギャラリーの画像にカーソルを合わせると拡大バージョンが表示されるようにしたかった. 基本でこれを行う CSS かなり些細なことです, 元の画像を拡大したくなかった, 私はブラウザに新しいものをつかませたかった (大きい) 画像も…
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. いいことは 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.
ザ· CSS
ザ· CSS I used is as follows. これをテーマのstyle.cssに追加しただけです (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); } |
ノート (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); } |
ノート (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”.
ノート (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 (例えば. 720×480). Creating additional image sizes in wordpress is easy — there are lots of good guides online if you need to do this.
1.5倍または2.0倍にスケーリングしたい場合は、簡単に変更してください。 3.0 望んだ通りに
jQuery
Add the following to your (子) テーマのスクリプトファイル (assuming it has one). If it doesn’t have one, create your own, and ‘enqueue’ it with a custom function in the (子) テーマのfunctions.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 に 360 (私と一致するように3倍の増加 CSS!), and then the second part of the function restores the original 120 width when the hover stops.
と同じように CSS 上記, you can adjust the numbers to change how much the image enlarges, そして、あなたは変更することができます dt.gallery-icon a img.size-thumbnail
section to target a different element or class depending on which images you want to target.
独自のスクリプトをキューに入れる
If your theme didn’t have a script file and you need to enqueue your own add the following to your (子) テーマのfunctions.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’ ); |
上記はあなたのスクリプトを登録します, in the footer, making sure it is placed after jquery (so jquery should already be available when it executes)
画像サイズの追加
For completeness here’s how to add custom image sizes to wordpress. 再び, これをあなたに追加してください (子) テーマのfunctions.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. 画像はトリミングされません (したがって、最後に偽).
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’), ) ); } |
既存の設定を尊重する
あなたがしたいと思うかもしれないもう一つのこと (to ensure responsive images work well) is to create larger (i.e. hi-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’ ) ); |
上記のコードは 2 things — firstly it checks to see if the crop option is set, そしてそれが, it mirrors it for our new responsive size. また、幅がに設定されているかどうかを確認します 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 (ハードコードされている). 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!
最後のヒント
もし, 私のような, 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, と大きな画像, wordpress also create a “post-thumbnail”, a “medium-large”, a 1536×1536 and a 2048×2048. These are disabled in 2 different ways…
を削除するには 1536 と 2048 画像は簡単です
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.
最後の最後のメモ
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
サイズ | 幅 | 高さ (4:3) | 高さ (16:9) | 高さ (3:2) |
---|---|---|---|---|
四半期 | 192 | 144 | 108 | 128 |
三番 | 288 | 216 | 162 | 192 |
ハーフ | 384 | 288 | 216 | 256 |
Medium | 576 | 432 | 324 | 384 |
フル | 768 | 576 | 432 | 512 |
大 | 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. 次のような幅では得られません 150 or 200.
Also note the pattern in increases. ジャンプ 2 テーブルの行とサイズが2倍になります! 偶数行 (288,576,1152 と 1535) are also 1.5x the previous 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 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 (これらの間に値がないことに注意してください 2 that would work unfortunately — and since I use 60px wide mini thumbnails I haven’t opted to extend backwards). 72pxは両方で機能します 4:3 と 3:2 (そして64pxはで動作します 4:3 と 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) だから私もこのサイズを使うことができました, その後、大きなサイズでも機能します, 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さん, そして一度 JPEG-XLは近い将来ブラウザに登場します, これの多くは解決されます.
下記のコメントで私達にあなたの考えを送ってください! あなたが購読したい場合は、右上のメニューで購読リンクをご利用ください. また、下記の社会的なリンクを使用してお友達とこれを共有することができます. 乾杯.
返信を残す