Галерея изображений

Дата публикации:Сентябрь 24, 2010

Обновленная медиа функциональность, пришедшая вместе с шорткодами (например, [ gallery ]), позволила вывести работу с изображениями в WordPress на совершенно новый уровень. Благодаря этому, появилась возможность создания галерей изображений, которые пополнялись бы с помощью пользователей.

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

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

Таким образом, мы имеем рубрику «Галерея», в которой каждая запись является набором фотографий. Как правильно обработать их? Мы пойдем самым простым путем — при загрузке изображений в запись будем выводить их в виде миниатюр, используя шорткод [ gallery ]. Разнообразить вывод можно будет посредством добавления к галерее различного описания.

Теперь перейдем непосредственно к коду.

Шаблон рубрик

Допустим, что существуют записи, каждая из которых содержит по крайней мере одно изображение. Вывод записей на экран производится посредством шорткода [ gallery ]. Создадим отдельный файл шаблона для рубрики «Галерея». Сделать это очень просто — достаточно узнать ID интересующей нас рубрики. ID можно отыскать в адресной строке браузера при просмотре рубрики «Галерея». Допустим, ID был равен 104, следовательно, нам придется создать файл шаблона category-140.php.
Теперь, определим вывод в рубрике «Галерея» миниатюр, представляющих собой небольшую иллюстрацию того или иного набора фотографий. Сделать это можно двумя путями: либо разместить миниатюры в произвольных полях, и затем выводить их на экран в различных списках, либо определить в качестве миниатюры одно из изображений записи. Второй способ является более предпочтительным, поэтому мы воспользуемся им.

Каким образом вы хотите представить фотографии, зависит только от вас. Общее решение, используемое при представлении, основано на применении стандартного цикла.

<?php get_header(); ?>
<div id="content">
<h1>Welcome to the <strong>Gallery</strong></h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<!-- Thumbnail listing -->
<div style="padding-left:5px;">
<?php
$args = array(
'numberposts' => 1,
'post_type' => 'attachment',
'status' => 'publish',
'post_mime_type' => 'image',
'post_parent' => $post->ID
);
$images = &get_children($args);
foreach ( (array) $images as $attachment_id => $attachment ) { ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('gallerypost'); ?>>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<?php echo wp_get_attachment_image($attachment_id, 'thumbnail', ''); ?>    </a>
</div>
<?php } ?>
</div>
<!-- /ends -->
<?php endwhile; ?>
<div>
<div><?php next_posts_link('Previous image sets') ?></div>
<div><?php previous_posts_link('More recent image sets') ?></div>
</div>
<?php else : endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Для того, чтобы выявить существующие прикрепления к записи, используется get_children(). Параметры, передаваемые get_children(), хранятся в виде массива, который включает в себя количество записей (numberposts), к которым прикрепляется изображение, тип записи (post_type), статус записи (status), тип медиа информации (post_mime_type) и родительскую запись (post_parent). Затем get_children() связывается с массивом $images, который в дальнейшем используется в цикле foreach. Далее wp_get_attachment_image выводит исходное изображение в виде миниатюры.

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

<?php
query_posts($query_string . '&posts_per_page=40');
if (have_posts()) : while (have_posts()) : the_post();
?>

Допустим, мы хотим добавить краткое описание к каждому из наборов фотографий, разместив изображение слева от миниатюры, а его описание — справа. Приведенный пример активизирует по щелчку мыши как миниатюру, так и заголовок, расположенный над описанием записи:

<div id="post-<?php the_ID(); ?>" <?php post_class('gallerylisting'); ?>>
<?php
$args = array(
'numberposts' => 1,
'post_type' => 'attachment',
'status' => 'publish',
'post_mime_type' => 'image',
'post_parent' => $post->ID
);
$images = &get_children($args);
foreach ( (array) $images as $attachment_id => $attachment ) { ?>
<div>
<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
<?php echo wp_get_attachment_image($attachment_id, 'thumbnail', ''); ?>
</a>
</div>
<div>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>
"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<div><span><?php the_tags('Tagged with ',', ',''); ?>
</span></div>
</div>
<?php } ?>
</div>

Теперь мы получили гораздо более интересное представление галереи.

Наборы фотографий

Каждая запись является набором фотографий, который содержит все изображения, выводимые в миниатюрах с помощью шорткода [ gallery ]. Поскольку изображения, загруженные в каждую отдельную запись, определяются как вложения, любое из них можно просмотреть в увеличенном варианте на странице вложений.

Возможно, вам понадобится разработать должное представление для отдельной записи, чтобы она полностью соответствовала существующим наборам фотографий. В большинстве случаев можно обойтись применением post_class(). Иногда полезным оказывается следующий сниппет, проверяющий, является ли рубрика галереей, и если является, то выводит the_excerpt():

<?php if (is_category('gallery')) {
the_excerpt();
} ?>

Вы можете создать собственные шаблоны для включений (attachment.php) и изображений (image.php), что позволит более тщательно подойти к процессу стилизации.

Другой важный момент — это возможность комментирования изображений. Если вы нуждаетесь в данной функциональности, ее очень легко реализовать, ведь, насколько вы помните, наборы изображений расположены в записях. Следовательно, процесс комментирования изображений — это процес комментирования соответствующих записей.

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

Другое применение

В предыдущих подразделах мы рассмотрели возможность добавления галереи к любому сайту, содержащему большое число изображений, будь то персональный блог или новостной сайт, отражающий последние события. Здесь же мы остановимся на некоторых дополнительных применениях галерей. Для начала скажем, что шорткод [ gallery ] может использоваться вместе с идентификатором записи, что позволяет вывести галерею миниатюр: к примеру, [ gallery id=»952″ ].

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

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

Поделиться

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.

Предыдущая запись:

Следующая запись: