DIY Главная Медиа Logo

Конечная сайт для проектирования и создания вашей установке домашнего кинотеатра и Привет-Fi.

0Wordpress ЛоготипПоказывать увеличенное изображение при наведении курсора в wordpress

В рамках недавних улучшений, которые я делал на различных веб-сайтах, я хотел, чтобы изображения в галереях отображали увеличенные версии при наведении курсора на. Делая это с базовыми 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 a 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 (например. 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,5x или 2,0x, просто измените 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 a img.size-thumbnail").парить(функция(){
    jQuery(это).attr("размеры","(Максимальная ширина: 360ПВ) 100vw, 360ПВ");
    }, функция(){
    jQuery(это).attr("размеры","(Максимальная ширина: 120ПВ) 100vw, 120ПВ");
  });

  //повторить вышеизложенное 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' ), '', правда);
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( 'четверть ширины', 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. привет-dpi) 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

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

РазмерширинаВысота (4:3)Высота (16:9)Высота (3:2)
Четверть192144108128
Третий288216162192
Половина384288216256
Medi­um576432324384
Полный768576432512
Большой1152864648768
XL153611528641024

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 появится в браузере в ближайшем будущем, многое из этого будет решено.

Нашел это полезным? Пожалуйста, дайте нам знать, оставив комментарий ниже. Если вы хотите подписаться, используйте ссылку подписки в меню вверху справа.. Вы также можете поделиться этим со своими друзьями, используя приведенные ниже социальные ссылки.. Ваше здоровье.

оставьте ответ