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

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

0Wordpress ЛоготипПоказывать увеличенное изображение при наведении курсора в 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-set. Для экранов с высоким разрешением есть изображения еще большего размера, которые у меня есть. (e.g. 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( $размеры, массив(
        'четверть ширины' => __('Ширина четверти'),
    ) );
}

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

Еще одна вещь, которую вы, возможно, захотите сделать (чтобы адаптивные изображения работали хорошо) заключается в создании большего (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. нет максимума) в этом случае и у нашего нового изображения не будет максимума. Я назвал новый размер изображения “респ-большой палец-2x” поскольку это "отзывчивый"’ копия миниатюры, которая в два раза больше (для экранов hi-dpi с удвоенной плотностью пикселей). Я также создал ряд других размеров, чтобы сделать довольно полный набор.

Примечание – Поскольку мои оригинальные эскизы были 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($размеры, ['пост-миниатюра']);
});

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

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

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

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

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

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

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

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

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