Увеличение изображения, блока при наведении. Миниатюры WordPress — подключение, настройка, добавление и изменение размеров, а также использование в шаблоне
Этот приём с картинками я использую у себя на блоге. Когда пользователь наводит на миниатюру любой записи она плавно увеличивается. Согласитесь, довольно не плохо и красиво смотрится.
И делается это только с помощью CSS 3, и довольно таки просто. Сейчас я Вам расскажу как это делать.
Как это работает Вы можете посмотреть в демо и у меня на блоге на главной странице.
Плавное увеличение картинки при наведении только на CSS3.
Html
Для начала нам нужно подготовить не сложную разметку html для наших картинок, в данном случае у нас их будет 3.
Как видите, что все картинки имеют класс image к которому мы, собственно, и будем задавать параметры.
CSS
А вот как выглядят стили:
Image { overflow:hidden; width: 380px; height:250px; }
Мы создали обычный блок размером 380 на 250 пикселей. Это блок должен быть такого же размера как и изображение (в нашем случае 380 на 250). Соответственно, если у Вас картинка будет большего или меньшего размера, размер блока.image делаем такого же размера как и картинка.
И обязательно ставим правило overflow:hidden; Оно нужно для того, чтобы наше изображение не выходило за рамки блока при увеличении.
Теперь задаём правила для самих изображений:
Image img { -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; } .image img:hover{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); }
Анимация происходит с помощью параметра в CSS3. На всю анимацию у нас уходит одна секунда. Если Вы хотите, чтобы картинка быстрее увеличивалась, уменьшите это значение.
В демо картинка увеличивается 1.1 раза. Если поставить значение 2, то картинка увеличится в два раза и так далее.
Вот и всё, друзья. Как и обещал, что урок будет очень простым. Надеюсь Вам понравился этот простой эффект для картинок. До скорых встреч.
При смене темы оформления в WordPress, вместо миниатюр для существующих записей мы иногда видим оригиналы изображений. Это происходит из-за того, что миниатюры требуемого размера небыли созданы в момент загрузки изображения, а с помощью плагина Regenerate Thumbnails эту проблему можно решить.
Размеры изображений
В WordPress есть понятие «размеры изображений» которых по умолчанию всего три — крупный, средний и миниатюра. При загрузке изображений в медиатеку, WordPress создает новый файл для каждого размера, т.е. если посмотреть в директорию загрузок, часто можно увидеть следующее:
- photo.jpg
- photo-150×150.jpg
- photo-300×126.jpg
- photo-672×360.jpg
Здесь видно, что к оригинальному изображению photo.jpg было создано три дополнительных файла для наших размеров. Размеры по умолчанию в WordPress можно изменять в разделе Параметры → Медиафайлы, а используются они при вставке изображений в записи, при создании галерей и в других местах.
Помимо размеров по умолчанию, в WordPress можно регистрировать дополнительные размеры с помощью тем или плагинов. Например если плагин выводит виджет с популярными записями в боковой колонке, он может сопровождать их изображениями размером 50×50 пикселей. Или тема, которая выводит записи сеткой, может использовать изображения размером 200×200 пикселей.
Стоит снова отметить, что создание файлов различных размеров происходит именно в момент загрузки изображений в медиатеку.
Таким образом, при активации темы WordPress, которая использует другие размеры, файлы для этих размеров не существуют для ранее загруженных изображений. В таком случае WordPress будет использовать максимально приближенные имеющиеся размеры или оригиналы изображений.
Это часто приводит к тому, что наш дизайн «плывет» или миниатюры на главной странице сайта весят по несколько мегабайт.
При загрузки изображений в WordPress могут генерироваться дополнительные размеры изображений. С целью уменьшить расход дискового пространства на хостинге, а также привести размеры к требуемым, разберемся откуда берутся лишние размеры.
1. Размеры изображений в настройках
По умолчанию размеры устанавливаются в административной панели WordPress. Настройка размеров находится в пункте меню: Настройки -> Медиафайлы .
Однако их изменение не всегда приводит к нужному результату. Так происходит из-за того, что создатели тем на WordPress, не редко регистрируют в них свои дополнительные размеры, которые никак не связаны с этой настройкой.
2. Размеры изображений из-за add_image_size
И если у вас регистрируются дополнительные размеры, то это можно исправить, заглянув в файл functions.php своей темы. Там будут строчки похожие на эти:
add_image_size ("blog-medium" , 400 , 300 ) ; add_image_size ("blog-large" , 800 , 600 ) ; |
Закомментировав или удалив эти строчки, дополнительные размеры миниатюру больше не будут создаваться. Однако учтите, что такие размеры часто вносят в блог не просто так.
Новые размеры могут применяться в файлах шаблона WordPress для вывода конкретных размеров изображений в миниатюрах на главной или в записи. Это может выглядеть так:
if (has_post_thumbnail () ) { $ featured = "blog-medium" ; |
И если такое есть в шаблоне, то удалив эти строчки может выйти, что в миниатюрах будут грузится полные версии изображений.
Например, вместо 400 на 300 (которому соответсвует add_image_size -> blog-medium) будет грузится полная версия изображений (допустим с разрешением 1600 на 1600). А это скажется как на скорости загрузки изображений, так и на дополнительной нагрузке сайта.
3. Размеры изображений по умолчанию WordPress
Некоторые размеры изображений WordPress генерирует автоматически. Например .
4. Размеры изображений из-за isset ($content_width)
Как-то в одном из шаблонов WordPress столкнулся с тем, что несмотря на изменения в add_image_size один лишний размер всё-таки создавался. Пришлось углубиться в документацию WordPress, где я нашел такой параметр как «Content Width #» :
if (! isset ($ content_width ) ) $ content_width = 800 ; |
Этот параметр тоже может находиться в файле functions.php . Он существует для ограничения размера всего, что есть на сайте. Это необходимо чтобы какой-нибудь элемент случайно не разрушил страницу. И потому ничто не должно быть больше этого размера.
Например, с параметром $content_width = 750 и настройками медиафайлов WordPress (пункт 1) где указан размер больше 750 пикселей, будет создаваться дополнительный размер, который окажется равен или меньше этой цифре.
Вот как это выглядело. У меня были выставлены размеры:
маленький — 150 на 150
средний — 800 на 600
большой — 1200 на 900
С настройкой $content_width = 750; изображения создавались таким образом: сгенерированные изображений
Видим, что размер для формата «Большой» создаётся максимум в пределах 750 пикселей. Это выглядит абсурдно, потому что «средний» размер больше «большого».
Так что либо убираем эту настройку в файле functions.php либо увеличиваем её размер.
5. Размеры миниатюр из-за плагинов
Некоторые установленные плагины на сайте создают свои размеры для миниатюр.
Например, плагин создаёт миниатюру на 60 пикселей по горизонтали.
Эта настройка находится в файле:
Довольно частая практика на современных сайтах - плавное увеличение блока с изображением. Как же это сделать с помощью CSS?
Плавное увеличение изображения при наведении курсора CSS
Делим решение задачи на два этапа: разметка html и стили css. Для начала разметим блоки с изображениями внутри:
Всем блокам присвоили класс box. Одним из важных его свойств будет overflow:hidden, то есть скрыть всё, выходящее за рамки блока. Будем же увеличивать изображение? Да. Но видима будет только часть, ограниченная блоком.
Это мы разобрали. Переходим к описанию стилей.
Box {
overflow:hidden;
width: 250px;
height:250px;
}
Всё как и оговаривали - квадратные блоки, схожие по размеру со стандартным, не увеличенным изображением, то тоже 250 на 250.
Свойство overflow:hidden как и говорилось ранее, не позволить выходить за рамки блока при увеличении.
Свойства касающиеся изображений:
Box img {
-moz-transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
transition: all 1s ease-out;
}
Box img:hover{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
Тут без CSS3 никуда. Все современные браузеры анимацию отобразят. Нужны параметры transition и transform. Время на анимацию выставляем 1 секунду (1s). Увеличение будет происходить в 1.2 раза. Вы можете изменить на Ваш вкус.
Теперь к примеру работы!
