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

В рамках недавних улучшений, которые я делал на различных веб-сайтах, я хотел, чтобы изображения в галереях отображали увеличенные версии при наведении курсора на. Делая это с базовыми CSS довольно тривиально, но я не просто хотел расширить исходное изображение, Я хотел, чтобы браузер загрузил новый (больше) изображение тоже…

Все изображения уже предоставляют полный набор src, поэтому все, что мне нужно было сделать, это использовать немного jQuery. (который уже загружен wordpress в любом случае) чтобы изменить размер целевого дисплея, чтобы браузер вытягивал увеличенное изображение. Приятно то, что CSS работает мгновенно, поэтому вы получаете увеличенное изображение, используя исходный файл, а затем качество улучшается на долю секунды позже, когда загружается файл с более высоким разрешением.

The CSS

The CSS Я использовал следующим образом. Я просто добавил это в style.css моей темы (или, скорее, дочерняя тема — всегда хорошая идея использовать ее)

dt.gallery-icon a img.size-thumbnail:парить
{
преобразовать: шкала(3.0);
}

Примечание (1) - над CSS применяется только к изображениям галереи. Вряд ли кому-то понадобится эта функциональность для всех изображений, отображаемых в любом месте страницы., но вы можете захотеть это для основного раздела контента. Вам нужно будет проверить, как ваша тема структурирует это, но в моем случае основной областью содержимого является «раздел», поэтому следующий код выполнит эту работу.

section.entry-content p a img.size-thumbnail:парить
{
преобразовать: шкала(3.0);
}

Примечание (2) — Этот код применяется только к уменьшенным изображениям.. Для средних изображений вы должны заменить «миниатюру размера» на «размер-средний»., а для больших с «размер-большой».

Примечание (3) — Поскольку мои миниатюры имеют размер 120x80 пикселей, я хочу увеличить их в 3 раза по сравнению с исходным размером.. У меня уже есть нестандартный размер изображения 360 × 240, который WordPress создает для меня и который включен в набор src.. Для экранов с высоким разрешением есть еще большие размеры изображений, которые у меня есть. (например. 720×480). Создать дополнительные размеры изображений в WordPress легко — в Интернете есть много хороших руководств, если вам нужно это сделать..

Если вы хотите масштабировать до 1,5x или 2,0x, просто измените 3.0 по желанию

JQuery

Добавьте следующее в свой (ребенок) файл сценария темы (если у него есть один). Если его нет, создай свой собственный, и поставить его в очередь с помощью пользовательской функции в (ребенок) тема functions.php

jQuery(документ).готов(функция(){

  jQuery("dt.gallery-icon a img.size-thumbnail").парить(функция(){
    jQuery(это).attr("размеры","(Максимальная ширина: 360ПВ) 100vw, 360ПВ");
    }, функция(){
    jQuery(это).attr("размеры","(Максимальная ширина: 120ПВ) 100vw, 120ПВ");
  });

  //повторить вышеизложенное 5 строки здесь для каждого размера изображения, которое вы хотите изменить

});

Приведенный выше код применяется к изображениям с эскизом класса, которые находятся внутри любого dt с классом значка галереи, то есть, другими словами, только к изображениям внутри встроенной структуры галереи WordPress.. При наведении максимальная ширина увеличивается с 120 к 360 (увеличение в 3 раза, чтобы соответствовать моему CSS!), а затем вторая часть функции восстанавливает оригинал 120 ширина при остановке наведения.

Как и в случае с CSS над, вы можете настроить числа, чтобы изменить степень увеличения изображения, и вы можете изменить dt.gallery-icon a img.size-thumbnail раздел для таргетинга на другой элемент или класс в зависимости от того, какие изображения вы хотите настроить.

Поставьте свой собственный скрипт в очередь

Если в вашей теме не было файла сценария, и вам нужно поставить в очередь свой собственный, добавьте следующее в свой (ребенок) тема functions.php (Предположим, вы назвали файл сценария image-zoom.js и сохранили его в корневой папке темы.)

wp_register_script( 'img-zoom', get_stylesheet_directory_uri() . '/image-zoom.js', массив( 'jquery' ), '', истинный);
wp_enqueue_script( 'img-zoom' );

Вышеупомянутое зарегистрирует ваш скрипт, в нижнем колонтитуле, убедившись, что он размещен после jquery (поэтому jquery уже должен быть доступен при выполнении)

Добавление размеров изображения

Для полноты, вот как добавить пользовательские размеры изображений в WordPress.. Снова, добавьте это в свой (ребенок) тема functions.php

add_image_size( 'четверть ширины', 192, 144, ложный );

Выше я добавил новый размер изображения под названием «четверть ширины» с максимальной шириной 192 пикселя и максимальной высотой 144 пикселя.. Изображение не будет обрезано (следовательно, ложь в конце).

WordPress теперь будет автоматически создавать изображения такого размера при загрузке изображений. (вам нужно будет использовать плагин для восстановления миниатюр, чтобы воссоздать миниатюры для уже загруженных изображений.).

Этот новый размер изображения НЕ будет отображаться для вставки в редакторе.. Чтобы сделать его доступным, добавьте следующий код в файл functions.php.

функция my_custom_image_sizes( $размеры ) {
    вернуть array_merge( $размеры, массив(
        'quarter-width' => __('Ширина четверти'),
    ) );
}

Соблюдая существующие настройки

Еще одна вещь, которую вы, возможно, захотите сделать (чтобы адаптивные изображения работали хорошо) заключается в создании большего (i.e. привет-dpi) размеры эскизов, соответствующие Графический интерфейс пользователя обрезать миниатюры или нет. Для этого используйте приведенный ниже код, который, как вы увидите, немного изменен по сравнению с более простым кодом выше.

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

Приведенный выше код проверяет наличие 2 вещи — во-первых, он проверяет, установлен ли параметр обрезки, и если это, он отражает его для нашего нового адаптивного размера. Он также проверяет, установлена ​​ли ширина на 0 (i.e. нет максимума) в этом случае у нашего нового изображения также не будет максимума. Я назвал новый размер изображения «resp-thumb-2x», так как это «отзывчивая» копия миниатюры, которая в два раза больше. (для экранов с высоким разрешением и двойной плотностью пикселей по сравнению с обычной). Я также создал несколько других размеров, чтобы сделать довольно полный набор..

Примечание. Поскольку мои исходные миниатюры были 120 × 80, я хочу, чтобы мои новые были размером 240 × 160, поэтому я указал именно эти размеры. (жестко запрограммированный). Можно было бы получить как высоту, так и ширину, указанные для исходной миниатюры, и умножить их на 2 чтобы сделать эту функцию полностью универсальной, но я не делал этого, когда разрабатывал его, поэтому я оставлю это вам, чтобы понять!

Последний совет

Если, как я, вы создаете свой собственный полный набор новых размеров изображений, вы можете не захотеть, чтобы WordPress создавал свои собственные дополнительные скрытые размеры. В дополнение к исходному изображению, и миниатюра, среда, и большое изображение, WordPress также создает «пост-миниатюру», «средний-крупный», 1536×1536 и 2048×2048. Они отключены в 2 разные способы…

Чтобы удалить 1536 а также 2048 изображения прямолинейны

remove_image_size( '1536x1536' ); //удалить 1536 истинный( '2048x2048' ); //удалить 2048 нам это не нужно

Пост-большой и средне-большой немного сложнее

//истинный('intermediate_image_sizes', функция($размеры) {
    вернуть array_diff($размеры, ['medium_large']);
});

//истинный('intermediate_image_sizes', функция($размеры) {
    вернуть array_diff($размеры, ['пост-миниатюра']);
});

Обратите внимание, что удаление пост-миниатюры иногда оказывает странное влияние на библиотеку изображений в редакторе..

Последнее последнее замечание

При выборе размера изображения (для больших изображений, меньше миниатюр) в идеале вам нужен размер, при котором изображения с обычным соотношением сторон всегда будут красиво изменять размер. По этой причине я рекомендую следующие размеры

Обратите внимание, как указанные значения ширины дают целочисленную высоту для всех 3 из наиболее распространенных соотношений сторон. Вы не получите этого с шириной вроде 150 или 200.

Также обратите внимание на закономерность увеличения. Прыгать 2 строк в таблице и размер удваивается! Четные ряды (288,576,1152 а также 1535) также в 1,5 раза больше предыдущего размера, поэтому они хорошо работают на экранах с полувысоким разрешением с использованием 50% увеличение dpi. Используя этот набор 7 размеров, у вас есть хороший набор полезных опций для большинства окон просмотра И хороший набор адаптивных изображений, которые WordPress автоматически добавит в набор src, поскольку они будут иметь согласованные соотношения сторон без дробей, которые могут привести к потере качества или обрезке..

В настоящее время для миниатюр я склонен либо иметь неограниченную ширину, либо жестко обрезать до фиксированного 3:2 соотношение, поэтому я использую целые числа для миниатюр, но в конечном итоге я могу настроить свою тему и расширить вышеуказанную систему в обратном направлении, имея параметры шириной 48 пикселей и 96 пикселей. (обратите внимание, что между этими 2 к сожалению, это сработает — и, поскольку я использую мини-миниатюры шириной 60 пикселей, я не решил расширяться назад). 72px будет работать для обоих 4:3 а также 3:2 (и 64px будут работать с 4:3 а также 16:9). Так как большинство моих снимков сделаны на мою цифровую зеркальную фотокамеру, они обычно 3:2 (такой же, как соотношение сторон традиционной 35-мм пленки) так что я мог бы использовать и этот размер, который затем будет работать с большими размерами полностью, но большие размеры не обрезаются, в то время как мои миниатюры обрезаются — я рад, что большие изображения будут как альбомными, так и портретными., но я хочу, чтобы миниатюры, как правило, были альбомными только для соответствия моему дизайну, так вот почему я не продлил назад. Надеюсь, чем больше и больше логотипов будет доступно, SVG'Ы, и однажды JPEG-XL появится в браузере в ближайшем будущем, многое из этого будет решено.