Изменения вывода изображений ( выводимых через произвольные поля )

Июнь 15th, 2010 | От Aleksey Davlad | Категория: ТЕМЫ WORDPRESS

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

Тема BranfordMagazine (урок первый). Настройка основных параметров темы и вывода новостей
Тема BranfordMagazine (урок второй). Настройка вывода графики на сайте

Или посмотрите рисунок ниже :


Все вроде красиво. Но недостатки в этом варианте есть и существенные. Основной - непомерный рост запросов к БД, что заставляет практически всегда использовать плагины кеширования. Второй чисто человеческий - Вам приходится этот рисунок загружать ( при этом его нужно подготовить под размеры ), вставлять значение произвольного поля. Не знаю, как кого, но меня это начало напрягать. И многие заказчики, поработав с проектами, где такая же реализация, уже через месяц - два просят упростить эту схему.

Приходится помогать. Использовать стал вариант вывода через следующий код ( заменив им фрагмент кода с выводом через произвольные поля ) :

1
2
3
4
5
6
7
8
9
10
<?php 
if (function_exists('gi_thumbnail')) {
echo gi_thumbnail();
}
else {
$images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );
$firstImageSrc = wp_get_attachment_image_src(array_shift(array_keys($images)));
echo "<img src=\"{$firstImageSrc[0]}\" width=\"50\" height=\"50\" />";
}
?>

Как правило, код вставляется в цикле, сразу же после его начала. Смотрите только стилевые параметры.

Этот код вытаскивает миниатюру первого изображения поста и устанавливает размеры изображения ( в данном случае 50х50 рх. ).

В той же теме BranfordMagazine так можно заменить вывод изображений в правой колонке ( который выводится ключом rightcolimage ).

Пример с темой BranfordMagazine приведен не случайно. На нем легко показать и проблемы такого вывода и способы их решения. Например, в обычном варианте не совсем нормально будет выглядеть вывод изображения в левой колонке, если поставить этот код. Там предусмотрено изображение 260х90 рх. А установки миниатюры WordPress стоят, например - 100х100 рх.
Если ставить в коде требуемые 260х90 рх., то он и будет тянуть миниатюру до них.
Что получится - понятно: потеря качества и пропорций. Но и с этим можно бороться.

Для этого нужно выполнять всего два правила:

1. Используйте этот код для вывода пропорциональных к пропорциям миниатюр изображений;
2. Устанавливаемые в админпанели размеры миниатюр должны быть больше или равны установленным в коде максимальным размерам.

Учитывая, что блог читают больше начинающие, чем специалисты объясняю: если этим кодом вы заменяете коды вывода изображений через произвольные поля, например 3-х размеров: 300х300, 100х100 и 40х40 пикселей ( то есть у вас было три ключа ), то Вам придется установить размер миниатюры 300х300 рх. Что не очень, особенно если вспомнить, что ту же галерею система формирует через миниатюры.

Поэтому определяйтесь сами. Я например часто на главной странице использовал одинаковые размеры с размерами миниатюр. Можно заменить вывод меньшых размеров, а большие ( что поделать ) - выводить через произвольные поля.

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

Теги: , ,

6 комментариев
Комментарии статьи »

  1. все кажетса супер
    вот только я кажетса уже могу пользоватса етой темой
    но одного не пойму до сих пор
    как мне втавлять етот код
    очнь прошупокажите со своего сайта код
    в таком формате
    как ви зделали в етой статэ
    если можна плиз
    а то я чайник и ещо долго буду розбиратса

  2. Дима, ты имеешь ввиду именно тему BranfordMagazine?

  3. Если не будет изображений в посте, что тогда?

  4. Будет пустой квадрат установленных размеров. Но лучше ставить изображения. В конце концов нет темы поста, куда бы нельзя вставить картинку. И так всегда лучше. Теорию о СЕО расписывать не буду….

  5. Можно ли в коде еще раз прописать else и предусмотреть картинку-заглушку?

  6. Так что мешает…. PHP код - он везде код. Прописывайте. Вариант ( только под ПП ) - на блоге Сони Панченко.

Комментарии статьи