Миниатюры WordPress — подключение, настройка, добавление и изменение размеров, а также использование в шаблоне. Зарезервированные названия размеров. Плавное увеличение за счет трансформаций

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

Начнем с примитивных методов, а закончим самым лучшим способом увеличения изображения.

1. Увеличение изображения через ссылку адрес-изображения-или-меньшей-копии "/>

Пояснение к примеру:

• - для того, чтобы ссылка не передавала вес изображению;
• target="_blank" - изображение откроется в новой вкладке.

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

Пример работы:

Несмотря на простоту применения, этот способ является далеко не лучшим, поскольку для увеличения изображения приходится открывать новую страницу, но зато таким методом можно просматривать изображения любых размеров. Так что делаем вывод: если необходимо увеличить изображения очень большого размера, то это единственный верный способ сделать это.

2. Автоматическое увеличение изображение при наведении курсора

Название способа четко отражает его суть: при наведении курсора мышки на изображение оно автоматически зуммируется. Реализация метода элементарная, но опять-таки этот способ мне не нравится тем, что невозможно просто провести курсор через изображение. Ведь оно всегда будет увеличиваться - это может начать раздражать пользователя.

Следующий код реализует возможность автоматического зуммирования при наведении курсора:

img.zoom { cursor : pointer ; max-width : 150px ; } img.zoom:hover { max-width : none ; }

Пояснения к примеру:

• img.zoom {max-width: 150px } - задает ширину изображения до увеличения;
• img.zoom:hover {max-width: none } - задает ширину изображения после увеличения (параметр none означает, что ограничение на максимальный размер отсутствует);

3. Увеличение изображения при клике

Это самый распространенный и удобный метод увеличения изображений. Причем здесь существует множество способов и вариантов реализации. Рассмотрим несколько самых популярных вариантов:

3.1. Увеличение при активном фокусе

После клика мышкой на изображение оно увеличивается, однако из-за этого съезжает текст вниз, поэтому этот способ далеко не лучший. Приведем пример кода:

.foc { width : 150px ; cursor :pointer ; display :inline ; } .foc:focus { width : auto ; z-index : 100 ; }

Как это выглядит на странице:

3.2. Увеличение изображения поверх страницы

Ниже приведен код для реализации этого метода

.blokimg { position : relative ; } .overlay { display : none ; height : auto ; left : -15% ; position : absolute ; top : -50% ; width : auto ; z-index : 999 ; } .overlay .overlay_container { display : table-cell ; vertical-align : middle ; } .overlay_container img { background-color : #AB5 ; padding : 10px ; -webkit-border-radius : 5px ; -moz-border-radius : 5px ; } .overlay:target { display : table ; } большое_изображение "/> маленькое_изображение " id ="imagenM1 " />

Как это выглядит на странице:

Варианты 3.1 и 3.2 полностью основаны на возможностях CSS, а значит являются "лайт" способами, т.к. не нагружают страницу лишними скриптами. Есть и другие варианты, которые также основаны на CSS, однако, они уже более экзотические. Я не буду рассматривать их в рамках этой статьи, поскольку некоторые браузеры не поддерживаются подобные вещи.

3.3. Красивое увеличение

Данный метод является самым красивым и удобным на мой взгляд. Для его подключения придется немного повозиться с добавление различных скриптов, поэтому для реализации рассмотрим пошаговую установку:

В архиве будет одна папка содержащая изображение, два файла.js и один.css.

2) Добавьте эти файлы к себе на сайт так, как они есть в архиве (т.е. папка imgs должна лежать в директории где будут файлы.js и.css).

3) На каждой странице сайта, где будет использоваться увеличение изображения, необходимо подключить метод и стиль simplebox:

(function(){ var boxes=,els,i,l; if(document.querySelectorAll){ els=document.querySelectorAll("a"); Box.getStyles("simplebox_css","simplebox.css"); Box.getScripts("simplebox_js","simplebox.js",function(){ simplebox.init(); for(i=0,l=els.length;i адрес_меньшей_копии_изображения ">

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

В данной статье мы рассмотрим основы работы с миниатюрами 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

В качестве примера, давайте рассмотрим код вывод миниатюры-ссылки на большое изображение. Это особенно удобно, если на сайте используются всплывающие изображения. Поскольку отдельно расписывать код довольно неудобно, то напротив каждой строчки будет комментарий с объяснениями.