Альтернатива произвольным полям и авто-ресайзингу картинок

Веб разработка - Уроки wordpress

Если вы ведете новостной сайт, очень красиво когда для отдельной новости используется иллюстрация большого размера, в анонсах используются миниатюры, а для горячих новостей — картинки средней величины. Сейчас многие, в особенности премиум-темы, оснащены автоматическим ресайзингом картинок с использованием произвольных полей и скрипта TimThumb PHP Script.

Но такое решение кажется мне не совсем оправданным.

Во-первых, зачем генерировать дополнительные картинки «на лету», если WordPress уже имеет встроенную функцию авторесайзинга, и достаточно задать один раз интересующие нас размеры для миниатюр, средних и больших изображений.

Во-вторых, если у вас уже есть 200 и более записей, сложно указать для каждой произвольное поле с картинкой.

В-третьих, данный скрипт порой сложно заставить работать.

Рассмотрим два альтернативных решения с использованием плагина и без него.

Плагин Justin Tadlock’s Get the Image

Более оптимальным мне кажется использование плагина Justin Tadlock’s Get the Image, который не генерирует заново картинки, а просто выводит уже существующие.

Сайт оформленный красивыми миниатюрами

Благодаря этому плагину можно:

1. Использовать как произвольные поля, так и просто добавленные к записи изображения.

2. Указывать какой размер по-умолчанию должен использоваться для картинок. Скрипт ищет созданные WordPress миниатюры, если не найдено никаких изображений в произвольных полях. Вы можете использовать значения “thumbnail,” “medium,” «large» или “full” (варианты картинок, которые генерирует WordPress).

3. Если вообще никаких картинок не найдено, будет показана картинка, которая лежит в папке “/wp-content/my-image.jpg.”

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

У вас есть много вариантов вызова картинки с помощью плагина в файлах вашей темы.

Самый простой:

view source

print?

1.<?php if ( function_exists ( 'get_the_image' ) ) { get_the_image (); } ?>

При этом по-умолчанию будут использованы следующие параметры:

view source

print?

01.$defaults = array (

02.'custom_key' => array ( 'Thumbnail', 'thumbnail' ),

03.'attachment' => true,

04.'default_size' => 'thumbnail',

05.'default_image' => false,

06.'order_of_image' => 1,

07.'link_to_post' => true,

08.'image_class' => false,

09.'image_scan' => false,

10.'width' => false,

11.'height' => false,

12.'echo' => true

13.);

custom_key

Отвечает за произвольные поля, которые вы используете. Помните, что ключи произвольных полей чувствительны к регистру (по-умолчанию плагином используются ключи произвольных полей Thumbnail и thumbnail).

attachment

Скрипт будет искать изображения, прикрепленные к статье (по-умолчанию true).

default_size

Относится к размеру картинок по-умолчанию, если произвольное поле не найдено. Как я уже говорила выше, вы можете выбрать thumbnail, medium, large (WP 2.7+), или full (по-умолчанию thumbnail).

default_image

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

order_of_image

Вы можете выбрать не только первое изображение, но и любое другое, прикрепленное к статье.

link_to_post

Должна ли ссылка с изображения вести на статью (по-умолчанию true).

image_class

Вы можете добавить специальный класс для изображений, чтобы оформить их с помощью CSS.

image_scan

Если true, скрпит будет искать прикрепленные к статье изображения. Не совсем понятно, в мануале сказано, что по-умолчанию используется false, но на самом деле, если даже использовать стандартный код <?php if ( function_exists( 'get_the_image' ) ) { get_the_image(); } ?>, скрипт прекрасно выводит прикрепленные изображения, если не найдены конкретные произвольные поля. Возможно просто разработчики не обновили мануал.

width

Ширина выводимого изображения.

height

Высота выводимого изображения.

echo

Если true, изображение показано на странице. Если false, изображение будет возвращено для использования его в ваших собственных функциях (по-умолчанию true).

Несколько примеров использования

1. Если нам надо, чтобы скрипт сначала брал изображения в произвольном поле Thumbnail, затем, если ничего не найдено в My Thumbnail, и если картинок в произвольных полях нет, выдавал миниатюру прикрепленной к записи картинки используем код ниже. Вместо thumbnail можно указать medium и т.д. для вывода другого размера. Если же никаких картинок не найдено, будет показана картинка /wp-content/my-image.jpg.

view source

print?

1.<?php if ( function_exists ( 'get_the_image' ) ) { get_the_image (array ('Thumbnail','My Thumbnail'),'thumbnail','/wp-content/my-image.jpg'); } ?>

2. Вывод второго по счету прикрепленного изображения.

view source

print?

1.<?php if ( function_exists ( 'get_the_image' ) ) { </code><code>get_the_image ( array ( 'order_of_image' => 2 ) ); } ?>

3. Заставляем картинку ссылаться на статью, для этого вместо

view source

print?

1.echo get_the_image (array ('Thumbnail','My Thumbnail'),'thumbnail');

используем

view source

print?

1.echo get_the_image_link (array ('Thumbnail','My Thumbnail'),'thumbnail');

Без использования плагина

При разработке тем использование сторонних плагинов неудобно.

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

В файле functions.php добавляем следующий код:

view source

print?

01./*

02.replacement function for the_thumb, as found in the post-thumb plugin

03.searches a pots for images, gets the image id, then retrives info about it, displays the thumb

04.

05.args:

06.$size, should be thumbnail or medium

07.*/

08.function cim_the_thumb ($size= thumbnail ){

09. global $post;

10. preg_match ('/<img (.*?) src=[ '. '] .'(.*?)[ '. '] .'(.*?)\/\>/i', $post->post_content, $matches); //get all the images

11.

12. if (!$matches) //if no images

13. return null;

14.

15. ereg ('wp-image - ([0-9]+)',$matches[0],$regs); //find the string wp-image-nnn in the image, where nnn is the image id

16.

17. if (!$regs){

18. echo <!-- there was an error getting an image for this post -->\n ;

19. return null;

20. }

21.

22. if (is_numeric ($regs[1])){ //check to make sure the ID we got is numeric (it should be!)

23.

24. //add classes specifically for the CIM sites

25. if ($size == medium ){

26. $imgClass= img-holder ;

27. } elseif ($size == thumbnail ){

28. $imgClass = smallthumb ;

29. }

30. $image = wp_get_attachment_image_src ($regs[1], $size, false); //get image sizes

31. if ( $image ) {

32. list ($src, $width, $height) = $image;

33. echo '<a href= '.get_permalink ($post->ID).' title= '.get_the_title ($post->ID).' >';

34. echo '<img src= '.attribute_escape ($src).' class= '.$imgClass.' attachment-'.attribute_escape ($size).' alt= '.get_the_title ($post->ID).' />';

35. echo </a>\n ;

36. }

37. } else {

38. echo <!-- there was an error getting an image for this post -->\n ;

39. return null;

40. }

41.}

Далее в любом месте цикла The Loop, там где хотим видеть картинку среднего размера, вызываем функцию

view source

print?

1.<?php if ( function_exists ( 'cim_the_thumb' ) ) { cim_the_thumb ('medium'); } ?>

а для миниатюр

view source

print?

1.<?php if ( function_exists ( 'cim_the_thumb' ) ) { cim_the_thumb ('thumbnail'); } ?>

Готово!

 

---

Читайте:
Чат на своем блоге Создание FAQ в WordPress Уроки Wordpress: Настраиваем RSS на Wordpress блоге Вызов подстраниц и плагин Fold page list Изменяем размер миниатюр в WordPress

ColdFusion 9 – новые технологии для создания web-приложений Компания Adobe Systems сообщила о выпуске трех новых технологий в рамках разработки платформы ColdFusion. ColdFusion 9 позволяет быстро создавать мо...

Apple обновляет программы для Mac-разработчиков Apple опустила ценовой порог до 99 долларов для желающих вступить в сообщество Mac-разработчиков. Согласно данным компании, новая цена членства сниж...

Google внедрила защиту от копирования в приложениях для Android Компания Google предложила разработчикам добавить в свои программы модуль License Verification Library (LVL), чтобы защитить платные приложения для ...

Oracle выпустила новый набор плагинов для среды разработки Eclipse Компания Oracle выпустила обновленную версию набора бесплатных плагинов Oracle Enterprise Pack for Eclipse 11g. Этот инструментарий позволит приверж...

Adobe выпустила новый пакет Creative Suite 5 Компания Adobe выпустила пятую версию пакета Creative Suite. Набор программ для дизайна был обновлен впервые с осени 2008 года, когда компания предс...