встроенная галерея WordPress

Встроенная галерея WordPress

А знаете ли вы что для того, чтобы сделать свою небольшую галерею на WordPress, далеко не обязательно устанавливать громоздкий NextGen Gallery, и для большинства случаев вполне можно обойтись встроенной галереей WordPress. К своему стыду до сегодняшнего дня я даже не знал, что таковая имеется, но когда узнал, был этому несказанно рад, ведь теперь на некоторых своих сайтах я создаю галереи изображений нажатием всего на одну кнопку, и никаких тебе плагинов. Точно не могу сказать, с какой версии в WordPress появилась встроенная галерея, но она уже точно есть на WP 2.9.0. Создается галерея следующим образом:

1. Ставим курсор в место в записи, где хотим вывести галерею.

2. Загружаем все картинки, которые хотим разместить в записи через стандартную вставку картинки (кстати, пользуйтесь мультизагрузкой! Для этого в окошке Browse выделяйте все картинки либо с cntr, либо c shift, и WordPress загрузит любое количество картинок за раз).

3.Переходим на вкладку «Галерея» и задаем там все настройки, а затем нажимаем на «Вставить галерею».

Встроенная галерея WordPress

После этих нехитрых манипуляций в нужном месте в записи мы получаем тег[gallery] с заданными нами параметрами, а на странице что-то вроде этого:

Встроенная галерея WordPress - вид в 4 колонки

В галерею вставляются миниатюры, размеры миниатюр можно задать в «Настройки» -> «Медиафайлы». Для галереи можно задать следующие настройки:

• Куда будет вести ссылка с миниатюры: на файл изображения или на страницу вложения (в иерархии шаблонов WordPress вид страницы вложения-картинки задают файлы в папке шаблона attachment.php -> image.php)
• Вид сортировки изображения в галерее: в порядке меню (кстати, здесь же можете менять этот порядок с помощью простого drag&drop), по заголовку, по дате и времени, случайным образом
• Порядок сортировки: возрастающий/убывающий
• Количество колонок галереи: у меня почему-то начинается только с 4-х и не всегда корректно срабатывает. В таком случае можно задать любое количество колонок вручную: [gallery columns="4"]

Примечание: заметил интересую особенность, если вставлять галерею, находясь в WYSIWYG на вкладке «Визуальный редактор», то при попытке вставить в одну и ту же запись вторую галерею кнопка «Вставить галерею» заменится на «Обновить параметры галереи». В то же время, если вы находитесь на вкладке «HTML», то кнопка «Вставить галерею» всегда будет оставаться на месте, сколько бы галерей уже не было вставлено в запись.

Вообще у тега [gallery] немалое количество параметров, позволяющих его кастомизовать, начиная от html, который будет формировать галерею, и заканчивая количеством колонок в галерее. Обо всех их можно почитать в соответствующем разделе Кодекса. Встроенную галерею картинок абсолютно любого поста WordPress можно выводить абсолютно в любом месте и на любой странице по id поста, можно также и через использование php-shortcode. Быстро, просто, удобно и не нужно никаких плагинов.

Из жизненно важный параметров [gallery], если вы хотите вставить в галерею не все картинки поста, а лишь некоторые, используйте параметры include, exclude.

1
2

[gallery link="file" columns="4" exclude="639,640,641"]
[gallery id="123" columns="3" include="50, 51, 52"]

Первая строчка исключит из галереи аттачменты с id = 639, 640, 641, вторая включит ТОЛЬКО аттачменты с id = 50, 51, 52. ID аттачмента можно посмотреть, если вставить его просто картинкой в текст, как еще можно посмотреть, я лично не нашел.

Как видите, даже без единого плагина в WordPress можно организовать отличную галерею превьюшек или, к примеру, кадров из фильма. Если в добавок к этому установить плагин wp-fancybox, то всего за пару минут к этой галерее можно добавить симпатичный эффект, пример которого можно увидеть в моей рецензии на фильм «Повелитель стихий».

Лишние 10px в .wp-caption

Возможно не все обратили внимание, но начиная с версии WordPress 2.9.0 при вставке изображения в статью, если ему задать подпись, то к ширине его обертки div.wp-caption почему-то автоматически добавятся лишние 10px. То есть вставили вы картинку шириной 350px с подписью, получили приблизительно такой код:

1
2
3
4

<div style="width: 360px;" class="wp-caption aligncenter">
<img width="350" alt="" title="" class="" />
<p class="wp-caption-text">Заголовок картинки</p>
</div>

Все бы ничего, да вот только эти 10px — как кость в горле для тех, кто хочет полностью кастомизовать вид обертки картинки в соответствие с дизайном. И если для выравнивания картинки по левому и правому краям еще можно выйти из ситуации, прописав в css .wp-caption {width: auto !important;}, то при выравнивании по центру этот прием уже не сработает, — div.wp-caption попросту растянется на всю ширину родительской колонки.

Выхода в этом случае есть всего 2:

1. В файле wp-includes/media.php на линии 375 заменить «10» на «0»

1

return '<div ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . (10 + (int) $width) . 'px">'

2. Воспользоваться самописным мини-плагином (на хостинге должен обрабатываться php5):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

<?php
/**
 * @package FixImageMargins
 * @author Justin Adie
 * @version 0.1.0
 */
/*
Plugin Name: FixImageMargins
Plugin URI: #
Description: removes the silly 10px margin from the new caption based images
Author: Justin Adie
Version: 0.1.0
Author URI: http://rathercurious.net
*/
class fixImageMargins{
    public $xs = 0; //change this to change the amount of extra spacing
    public function __construct(){
        add_filter('img_caption_shortcode', array(&$this, 'fixme'), 10, 3);
    }
    public function fixme($x=null, $attr, $content){
        extract(shortcode_atts(array(
                'id'    => '',
                'align'    => 'alignnone',
                'width'    => '',
                'caption' => ''
            ), $attr));
        if ( 1 > (int) $width || empty($caption) ) {
            return $content;
        }
        if ( $id ) $id = 'id="' . $id . '" ';
    return '<div ' . $id . 'class="wp-caption ' . $align . '" style="width: ' . ((int) $width + $this->xs) . 'px">'
    . $content . '<p class="wp-caption-text">' . $caption . '</p></div>';
    }
}
$fixImageMargins = new fixImageMargins();
?>

Этот код нужно просто сохранить как php-файлик с любым названием, залить его в папку плагинов WordPress и активировать из админки. Плагин запретит WordPress автоматически добавлять 10px к ширине .wp-caption, и вы сможете легко задать любой отступ просто через css. Будем надеяться, что в следующих версия WordPress этот баг пофиксят (возможно в 3.0 уже пофиксили).

Ссылочка на проблему и варианты ее фикса на wordpress.org: http://wordpress.org/support/topic/10px-added-to-width-in-image-captions.

Дорогу молодым: долго обещал человеку постовой, да простит он меня за такие задержки: много-много работы навалилось. Я редко читаю малоизвестные блоги, но некоторые из них, которые я открываю для себя впервые, часто поражают меня упорством и трудолюбием их авторов. Именно таким мне видится автор новенького блога с интересным названием «Сам ты мастер». Пишет часто, пишет по делу, пишет из личной пусть и пока что не слишком богатой практики, старается самостоятельно во всем разобраться и с радостью делится со всеми своими открытиями. А ведь именно так и нужно! Желать автору блога «Сам ты мастер» мне нечего, я уверен, что с таким усердием он и сам всего потихоньку добьется, могу лишь порекомендовать своим читателям почитать его статьи, наверняка найдете для себя что-нибудь интересное.

Ваш Перспективный блоггер

http://blogto4ka.ru

Также рекомендую прочесть

• Простым языком о несложных вещах: свойство hasLayout
• WordPress: вывод постов в 2 колонки
• IE6 BUG a:hover span
• br clear="all" vs div class="clear"
• Как WordPress стал популярнее Joomla