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

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

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

Способ номер АДИН.

Это непосредственный вывод анонса записи, вместе с картинкой. То есть в самое начало статьи, вставляется картинка определённых размеров, обтекается ( или же без обтекания, если нам этого не надо) и ставится тег  <!—more—> в то место, где мы хотим видеть ссылку «Далее»

В данном случае, код будет выглядеть следующим образом

Плюсы:

•  простота

 

Минусы:

• Не получится вывести картинки различных пропорций

 

• картинка не только в анонсе, но и в статье полностью (что, я думаю, нам нафиг не надо)

 

 

Способ номер ДВА. И так, второй способ, это вывод картинки с помощью плагина. Поискал несколько часов различные плагины, посмотрел их плюсы, минусы и актуальность. Остановится на одном из них. Плагин Get The Image. Код который я использовал в своих «старых» шаблонах выглядел так

В этом случае, плагин брал картинку из поста, и делал из неё миниатюру. Так же можно использовать и произвольные поля, указывать размеры картинок, указывать класс картинки и тд. Честно говоря, не очень люблю данный вариант, т.к. шаблон будет зависеть от плагина, а если вы делаете его на продажу, по заказу или что-то типа того, этот вариант вам не подойдёт.

Когда то видел статью с подробным использованием данного плагина, если найду — выложу, или же если у кого будет жгучее желание воспользоваться данным способом – напишите. Помогу разобраться.

Плюсы:

• простота
• возможность обрезать картинки под различные пропорции/размеры

Минусы:

•  плагин, а следовательно он должен поставляться с темой, что крайне неудобно
• картинка остаётся в статье

Способ номер ТРИ.

Третий способ, и один из наиболее «красивых», это использование произвольных полей. Что такое произвольные поля, это своего рода параметры типа ключ=>значение. Данный способ немного времязатратный, но это стоит того.

Допустим, у нас используется два типа пропорций в миниатюрах, это 3х4 и 1х1. Вот что мы делаем. Для начала мы загружаем картинку, обычным способом, через админку нашего сайта. Картинку в статью мы не вставляем, но копируем ссылку на данную картинку в буфер. Затем, создаём произвольное поле, и задаём ему имя 1х1 а в значение, вставляем ссылку на картинку (имя поля, вы можете естественно задать любое). Далее обрезаем вручную картинку до пропорций 3х4,  загружаем, создаём ещё поле с именем 3х4, и вставляем путь к картинке. Да, Да..сплошной геморрой, но если вы делаете сайт для людей, вкладываете душу, каждую статью пишете с удовольствием, я думаю вам не составит труда проделать всё это. Далее перейдём к коду…

Сначала значение произвольного поля записывается в переменную, и если она не пустая , тогда выводится картинка, где в атрибуте src  указывается значение произвольного поля, с именем ключа 1×1, а именно путь к нашей картинке. Если же произвольного поля нету, то выводится заготовленная картинка, с текстом «Нет миниатюры» (Ну по крайней мере у меня так).

То же самое вставляем в место, где нам надо вывести миниатюры с пропорциями 3х4, соответственно меняя 1х1 на 3х4.

Вот и всё, немного ёмко по этому способу, но и так сократил как мог)

Плюсы:

• возможно выводить любые картинки, различных пропорций
• миниатюры можно не показывать в статье

Минусы:

• времяёмкий процесс

Ну и наконец способ под номером ЧЕТЫРЕ.  Это вывод миниатюр, с помощью встроенного в вордпресс «способа» (быть может вы в некоторых шаблонах, видели  при загрузке картинки, ссылку «Использовать как миниатюру»). Так вот, именно об этом способе и будет идти речь.

Во первых, если у вас нету блока с добавлением миниатюры, надо его включать, для этого идём в файл functions.php и добавляем туда следующий код

add_action( 'after_setup_theme', xxx_setup' );
if ( ! function_exists( xxx_setup' ) ):
function xxx_setup() {
    add_theme_support( 'post-thumbnails' );
}
endif;

Где вместо xxx указываете название вашей темы на латинице. Должно же у нас быть всё красиво.
Появляется вот такая ссылка, на странице добавления картинок:

Ну и конечно же, нам надо добавить код в те места, где мы хотим отображать данные миниатюры, код будет выглядеть так

Где 200,200 это ширина  и высота миниатюры. Единственный минус тут в том, что миниатюры сохраняют свои пропорции. Т.е. если у вас была картинка 100х200, и вы вывели миниатюру с параметрами 200х200, то wordpress выведет вам картинку 200х400. Естественно класс, можно указать любой, а не такой как у меня (thims).
Плюсы:

• простота
• «правильность»
• миниатюры масштабируются

Минусы:

• нельзя  изменять пропорции картинок

Однако последний минус, я исправлял в своих шаблонах, по средствам CSS. А именно..

• Создал блок <div></div>
• Поместил туда картинку так, что бы по ширине она была впритык, а по высоте вылазила
• Прописал картинке margin-top:-xx px, тем самым как бы сделав её по центру блока
• И прописал div’у overflow:hidden

Тем самым у нас картинка как бы обрезалась, под наши пропорции. Это только в том случае, если нам надо картинку по ширине, больше чем по высоте. В другом случае мы прописываем margin-left:-xx px

Вот и всё на этом. Если у кого будут какие либо вопросы, комментарии открыты, welcome.