Css увеличить изображение. Как сделать в css увеличение картинки при наведении на нее? Размеры изображений по умолчанию WordPress
Довольно частая практика на современных сайтах - плавное увеличение блока с изображением. Как же это сделать с помощью 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 раза. Вы можете изменить на Ваш вкус.
Теперь к примеру работы!
Добрый день. Этим уроком мы продолжаем обучение по WordPress. И сегодня мы рассмотрим как задать в WordPress свои произвольные размеры для миниатюр в постах.
Задаем произвольные (свои, кастомные) размеры миниатюр
Открываем файл functions.php и в конце файла пишем комментарий о том что начинаем свой произвольный код, и вставляем код для регистрации своих размеров миниатюр:
// МОИ ФУНКЦИИ // Задаю миниатюры и размеры миниатюр для постов // добавляем миниатюты в тему if (function_exists("add_theme_support")) add_theme_support("post-thumbnails"); // Определяем размеры миниатюр if (function_exists("add_image_size")){ add_image_size("tie-small", 100, 55, true); //$width, $height, $crop add_image_size("tie-medium", 300, 150, true); add_image_size("tie-large", 600, 300, true); }
Выводим в шаблоне кастомные размеры миниатюр
В данном примере я использую тему twentytwelve. В этой теме обычные посты выводятся шаблоном content.php. Открываю этот шаблон. В нем миниатюра записи выводится на 20-й строке кодом:
Нам необходимо вывести свои новые размеры миниатюр. Заменим этот код приведенный выше на следующий:
Я закомментировал стандартный код вывода миниатюры, отключив его, и после него добавил код вывода своей миниатюры, размера tie-medium. Теперь в постах выводятся миниатюры заданного размера tie-medium 300px X 150px.
Дополнение.
Порядок работы с миниатюрами при создании сайта/темы:
1. Определяем какие размеры миниатюр будут использоваться на сайте
2. Регистрируем соответствующие размеры в functions.php
3. Добавляем миниатюры, если миниатюры уже заданы, тогда запускаем плагин regenerate thumbnails
4. Выводим миниатюры в шаблонах
В данной статье мы рассмотрим основы работы с миниатюрами Wordpress. Научимся активировать поддержку миниатюр темой оформления Wordpress, добавлять произвольные размеры изображений, а также использовать миниатюры в шаблоне Wordpress. Все это позволит значительно облегчить работу с графикой за счет автоматизации процессов по созданию и выводу изображений на сайте.
Версия для печати
Добавление поддержки миниатюр в WordPress
Чтобы иметь возможность задавать изображения в качестве миниатюр для страниц WordPress, необходимо активировать поддержку миниатюр в шаблоне. Для этого добавьте следующий код в файл functions.php вашей темы оформления.
If (function_exists("add_theme_support")) {
add_theme_support("post-thumbnails");
}
После этого при создании страницы в правой колонке появится новый блок «Миниатюра записи».
Чтобы задать миниатюру для записи, достаточно нажать на ссылку и выбрать нужное изображение, после чего нажать «Задать миниатюру». При этом вы можете выбирать изображение как с общей библиотеки файлов, так и загрузить отдельно, используя стандартный загрузчик.
После добавления миниатюры, в соответствующем блоке отобразится выбранное вами изображение.
Если же блок добавления миниатюр не появился на странице добавления/редактирования записи, то зайдите в пункт «Настройки экрана» в правом верхнем углу рядом с кнопкой «Помощь» и отметьте чекбокс «Миниатюра записи».
Если и это не помогло – проверяйте корректность добавления функции активации миниатюр.
Функция вывода миниатюр в WordPress
Для вывода миниатюр в теме оформления WordPress используется специальная функция the_post_thumbnail(). Она используется внутри цикла WordPress и может принимать два параметра – размер миниатюры и массив атрибутов.
The_post_thumbnail($size, $attr);
- $size – название миниатюры (стандартные thumbnail, medium, large, full) или массив, содержащий ширину и высоту изображения, например, array(64, 64). Также в качестве значения можно передавать название миниатюр с произвольными размерами, созданными при помощи функции add_image_size().
- $attr – массив атрибутов. Например, чтобы задать класс для изображения достаточно прописать array(‘class’ => ‘thumb-class’). Поскольку другие параметры используются очень редко, то мы их рассматривать не будем. Более подробно обо всех значениях можно прочесть в кодексе WordPress.
Код вывода миниатюр разных размеров
The_post_thumbnail(); // Передается параметр -> "post-thumbnail"
the_post_thumbnail("thumbnail"); // Размер по умолчанию: 150px x 150px max
the_post_thumbnail("medium"); // Размер по умолчанию: 300px x 300px max
the_post_thumbnail("large"); // Размер по умолчанию: 640px x 640px max
the_post_thumbnail("full"); // оригинальный размер загруженного файла
the_post_thumbnail(array(100,100)); // Произвольный размер (100px x 100px)
Пример готового кода для вывода миниатюр в шаблоне WordPress
В качестве примера, давайте рассмотрим код вывод миниатюры-ссылки на большое изображение. Это особенно удобно, если на сайте используются всплывающие изображения. Поскольку отдельно расписывать код довольно неудобно, то напротив каждой строчки будет комментарий с объяснениями.
if (has_post_thumbnail()) { /* Проверка наличия прикрепленной к посту миниатюры */
$large_image_url = wp_get_attachment_image_src(get_post_thumbnail_id(), "large"); /* Получаем ссылку на большое изображение */
echo ""; /* Формируем ссылку на большое изображение с использованием классов CSS и атрибута Title */
the_post_thumbnail("thumbnail", array("class" => "single-thumb")); /* Выводим миниатюру thumbnail с классом single-thumb */
echo ""; /* Добавляем закрывающий тег для ссылки */
} else { /* Если у поста нет миниатюры */ ?>
" title="" >
Изменение размеров миниатюр
По умолчанию размеры стандартных миниатюр можно изменять непосредственно через административную панель сайта в разделе Настройки – Медиафайлы. К ним относятся миниатюры thumbnail, medium и large.
Кроме того, вы можете изменить/установить размер миниатюры поста, выводимой функцией the_post_thumbnail(), при помощи функции set_post_thumbnail_size(), которую необходимо добавить в файл functions.php:
Set_post_thumbnail_size($width, $height, $crop);
- $width – ширина миниатюры в пикс (по умолчанию. 0).
- $height – высота миниатюры в пикс. (по умолчанию 0).
- $crop – кадрирование или уменьшение изображения. true — будет взята часть изображения с указанными размерами, false – изображение будет уменьшено пропорционально, а все лишнее обрезано (по умолчанию: false).
Добавление миниатюр с произвольными размерами
Если стандартных миниатюр вам недостаточно, то при необходимости вы можете создать дополнительно любое количество миниатюр с произвольными размерами. Для этого используйте следующую функцию, которую необходимо будет добавить в файл functions.php вашей темы оформления WordPress.
Add_image_size($name, $width, $height, $crop);
- $name – название миниатюры.
- $width – ширина миниатюры в пикселях.
- $height – высота миниатюры в пикселях.
- $crop – кадрирование (true) или уменьшение (false) изображения (по умолчанию false).
Пример:
If (function_exists("add_image_size")) {
add_image_size("my-thumb", 180, 210); //180 в ширину и 210 в высоту
}
В этом случае при загрузке изображения WordPress будет дополнительно создавать еще один файл изображения с максимальным размером 180 пикс в ширину и 210 пикс в высоту. Подгонка всегда ведется по большей стороне. Например, если исходное изображение имело размер 500×1000 пикс., то миниатюра будет размером 105×210 пикс.
Использование произвольных миниатюр
Использование миниатюр произвольных размеров ничем не отличается от использования стандартных. Разница лишь в названии миниатюры.
The_post_thumbnail("my-thumb");
Вышеприведенный код выведет миниатюру my-thumb, созданную при помощи кода, приведенного чуть выше. Аналогичным образом выводятся миниатюры и с другими названиями.
На этом данная статья подошла к концу. Удачи вам и успехов в создании сайтов!
Этот приём с картинками я использую у себя на блоге. Когда пользователь наводит на миниатюру любой записи она плавно увеличивается. Согласитесь, довольно не плохо и красиво смотрится.
И делается это только с помощью CSS3, и довольно таки просто. Сейчас я Вам расскажу как это делать.
Как это работает Вы можете посмотреть в демо и у меня на блоге на главной странице.
Плавное увеличение картинки при наведении только на 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, при загрузке изображения, кроме базовых размеров будет создавать еще один файл - измененную копию оригинала с указанными размерами.
Чтобы для поста можно было определить картинку миниатюру, нужно активировать эту возможность функцией - add_theme_support("post-thumbnails"); в файле шаблона funсtions.php.
При создании своей темы для каталога тем ВП, название нового размера должно содержать имя темы, . Например:
Add_image_size("mytheme-mini", 200, 200, true);
Хуков нет.
Возвращает
Ничего не возвращает.
Использование
add_image_size($name, $width, $height, $crop); $name(строка) (обязательный) Название нового размера картинок. $width(число) (обязательный) Ширина миниатюры (в пикселях). $height(число) (обязательный) Высота миниатюры (в пикселях). $crop(логический)Как создавать миниатюру?
- array(координата_X, координата_Y) - указание позиции кадрирования, т.е. если указать массив (array("right", "top")), то изображение будет кадрированно с указанных позиций.
false - масштабирование: картинка будет изменена в размере по подходящей стороне. Миниатюра создается по одной из подходящих сторон: указанной ширине или высоте. Итоговая картинка не будет точно совпадать указанными размерами.
true - кадрирование: миниатюра создается точно по указанным размерам. Подбирается наиболее подходящая сторона, картинка уменьшается по ней, а у противоположной стороны лишняя часть, не подходящая по пропорциям обрезается.
crop работает только для вновь создаваемых картинок. Если на сайте уже есть картинки и только потом добавляется размер, то оно обработаны не будут.
По умолчанию: false
Зарезервированные названия размеров
thumb, thumbnail, medium, large, post-thumbnail
Названия " thumb " и " thumbnail " - это алиасы (синонимы) и относятся к одинаковым файлам.
Также вы можете установить опции создаваемой миниатюры через:
Update_option("thumbnail_size_w", 160); update_option("thumbnail_size_h", 160); update_option("thumbnail_crop", 1);
Примеры
Добавим новые размеры миниатюр
Регистрируем новые размеры миниатюр, добавив такой код в файл шаблона functions.php:
If (function_exists("add_theme_support")) { add_theme_support("post-thumbnails"); set_post_thumbnail_size(150, 150); // размер миниатюры поста по умолчанию } if (function_exists("add_image_size")) { add_image_size("category-thumb", 300, 9999); // 300 в ширину и без ограничения в высоту add_image_size("homepage-thumb", 220, 180, true); // Кадрирование изображения }
Кадрирование (параметр $crop)
#1 - false (масштабирование)
Эта строка укажет WP, что при загрузке нового файла, нужно создать его уменьшенную копию. В этом случае миниатюра будет подогнана под ширину или высоту, смотря какая из сторон подходит больше, а противоположная сторона будет уменьшена пропорционально и скорее всего не будет больше указанного размера. Например, у нас оригинал картинки 2500х1800 пикселей мы делаем миниатюру 220х180 пикселей. Картинка будет уменьшена до размеров - 250х180 px, т.е. высота будет 180, как мы и указали, однако ширина получится выше указанной 250 а не 220. В этом случае картинка не кадрируется и уменьшенная копия сохраняет пропорции полностью.
Add_image_size("homepage-thumb", 220, 180);
#2 - true (кадрирование)
Если установить четвертый параметр в true, то миниатюра будет уменьшена и обрезана точно под указанные размеры. Например, у нас оригинал картинки 2500х1800 пикселей мы делаем миниатюру 220х180 пикселей. Оригинал будет уменьшен до высоты 180xp (тогда ширина его как бы равна 250px), а ширина будет обрезана по краям по 15px и в итоге получим уменьшенную копию: 220х180 пикселей:
Add_image_size("homepage-thumb", 220, 180, true);
#3 - уменьшение по нужной стороне
Чтобы уменьшить картинку по одной из нужных нам сторон, нужно указать противоположной стороне огромное значение. Например, у нас есть картинка 2500х1800, нам нужно получить миниатюру 500х1800, тогда указываем так:
Add_image_size("homepage-thumb", 500, 9999);
#4 - Array(x, y) (кадрирование с указанием позиций)
С версии 3.9 появилась возможность указывать позицию кадрирования. Давайте добавим размер миниатюры, которая будет размером 220х220 пикселей и будет фрагментом от оригинала, который будет взят с левого верхнего угла (left, top):
Add_image_size("custom-size", 220, 220, array("left", "top"));
Х_позиция может быть: " left " " center " или " right ".
Y_позиция может быть: " top ", " center " или " bottom ".
Использование новых размеров
Мы зарегистрировали 3, отличных от базовых, размера: post-thumbnails , category-thumb , homepage-thumb . Чтобы теперь использовать эти размеры (выводить картинки в шаблоне), можно использовать следующие функции:
Избранная картинка (featured image)
Чтобы использовать новый размер при выводе картинки установленной как "Избранная картинка" поста, в файле шаблона нужно использовать функцию the_post_thumbnail() :
If (has_post_thumbnail()) { the_post_thumbnail("category-thumb"); // category-thumb - название размера }
Новый размер в выбор размеров при вставке картинки (админ-панель)
Чтобы добавить новый размер в выбор размеров при вставке картинки в пост, нужно использовать фильтр-хук image_size_names_choose , в котором нужно добавить размер и указать для него понятное название:
Add_filter("image_size_names_choose", "my_custom_sizes"); function my_custom_sizes($sizes) { return array_merge($sizes, array("category-thumb" => "Мой размерчик",)); }
Для основных медиафайлов (PHP/Templates)
Также можно выводить картинки (по размерам) напрямую из библиотеки WordPress по ID картинки. Для этого используйте функцию wp_get_attachment_image() :
// Подразумевается, что у вас в библиотеке есть картинка с ID 42... echo wp_get_attachment_image(42, "category-thumb");
Если нам нужно получить только УРЛ картинки а не готовый тег , то используйте функцию wp_get_attachment_image_src() .
Плагины
- Simple Image Sizes - позволяет создавать новые размеры миниатюр прямо из панели "Медиафайлы". Он также умеет пересоздавать миниатюры. Он добавляет новые размеры в выбор для постов, так вы можете вставлять новые размеры в посты. Вы можете выбирать какие из размеров вы бы хотели пересоздать и для каких типов постов это нужно сделать.
Regenerate Thumbnails - этот плагин позволяет создать новые размеры для каждого загруженного изображения. Полезен когда вы изменили или добавили новые размеры миниатюр (через Настройки > Медиафайлы) во время когда в библиотеке уже есть загруженные изображения. Или когда вы изменили размеры "Избранного изображения" поста.
Force Regenerate Thumbnails - удаляет ранее созданные размеры и создает новые, на основе текущих установок.
AJAX thumbnail rebuild - позволяет пересоздать миниатюры. Полезен, если вы использовали функцию add_image_size() когда у вас уже есть загруженные изображения. (Это медленный плагин, но при этом в нем не бывает ошибок с недостатком выделенной памяти).