Встроенная галерея WordPress и откуда берутся лишние 10px
Суббота, 16 Окт 2010 3:42

встроенная галерея 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.
Дорогу молодым: долго обещал человеку постовой, да простит он меня за такие задержки: много-много работы навалилось. Я редко читаю малоизвестные блоги, но некоторые из них, которые я открываю для себя впервые, часто поражают меня упорством и трудолюбием их авторов. Именно таким мне видится автор новенького блога с интересным названием «Сам ты мастер». Пишет часто, пишет по делу, пишет из личной пусть и пока что не слишком богатой практики, старается самостоятельно во всем разобраться и с радостью делится со всеми своими открытиями. А ведь именно так и нужно! Желать автору блога «Сам ты мастер» мне нечего, я уверен, что с таким усердием он и сам всего потихоньку добьется, могу лишь порекомендовать своим читателям почитать его статьи, наверняка найдете для себя что-нибудь интересное.
Ваш Перспективный блоггер
16 Окт 2010 в 10:58
1Я тоже никогда не пользовался встроенной галереей. Теперь обязательно потестирую.
16 Окт 2010 в 12:19
2BloggerMen, обязательно попробуй, это очень удобно. Без эффекта конечно такая галерея теряет наполовину в функциональности, потому поставь обязательно плагин какого-нибудь эффекта и прикрути его к галерее. Как правило достаточно задать только класс для изображений, причем сделать это можно в настройках админки.
14 Мар 2011 в 19:25
3Добрый вечер!
Где вы были раньше? На днях установила NextGEN Gallery. Намучилась очень,так как я «чайник» в этом деле. Наконец-то сегодня получилось создать небольшую галерею. Ее еще нужно доводить до ума. Но радует даже это. Теперь хочу попробовать выложить картинки по вашему описанию. Спасибо.
11 Окт 2011 в 11:07
4Спасибо! а как удалить фото из галереи не удаляя с сервера? после добавления в галерею в списке «медиафайлах» рядом с фото пишется «используется в...» и название страницы, которая содержит галерею. как удалить эту связь? т.е. перенести в другую галерею?
спасибо
11 Окт 2011 в 11:13
5@codefather, если я правильно понял, то в принципе связи тебе удалять не надо. Просто в следующих галереях в теге [gallery] (стандартный тег WP при вставке галереи) воспользуйся параметрами include="attach-id1,attachid2" — включает в галерею приложения с указанными id или exclude="attach-id1,attachid2" — исключает из галереи приложения с указанными id. Подробнее здесь — codex.wordpress.org/Gallery_Shortcode
02 Апр 2012 в 11:28
6Странно. Добавил галерею как Вы советовали, но почему-то все картинки расположились на странице в один столбец, хотя я указывал columns="#" и 2, и 3, и 4, и 5, и 10
02 Апр 2012 в 11:36
7@Владимир, видимо, в теме не прописаны css-стили для галерей. Скопируйте их из дефолтовой или других тем в ваш style.css.
18 Апр 2012 в 19:15
8В версии 3.3.1 в окне галерея нет «параметров галереи». Моск уже выносит. Nextgen не активируется, пишет что то про фатальную ошибку. Госпади как же люди галереи то делают на WP??
18 Апр 2012 в 19:39
9@Грег, не разу не имел с ними проблем за пару лет
Попробуйте перезалить вашу сборку. Также возможно стоит уточнить у поддержки хостинга наличие всех php-библиотек, необходимых для корректной работы WP, ну, и аккуратно разбирать тексты ошибок.
16 мая 2012 в 20:03
10Подскажите пожалуйста как быть, нужно добавить класс к ссылке, в которой превьюшка ( когда выводится галерея в посте).
Строка 1291:
Код:
$output = ( $this->linkifunknown ) ? '' . esc_html ($url) . '' : $url;
вносил туда класс, но не выводится, почему? Подскажите как мне быть?
16 мая 2012 в 20:25
11@Валентин, скорее всего ваша задача имеет куда более тривиальные решения. Хакать ядро я бы вам точно не советовал! Вот несколько возможных решений: _http://wordpress.org/support/topic/edit-gallery-shortcode. Также напомню, что плагины вроде shadowbox всегда позволяют в своих настройках задать любой класс, к которому они в последствие применяются. Также напомню, что любой класс к чему угодно можно навесить через jQuery.
22 мая 2012 в 13:22
12спасибо! Особенно про идентификацию id как посмотреть. Была с этим проблема.
24 мая 2012 в 11:12
13Спасибо за статью! Столкнулась с такой проблемой: при добавлении в галерею изображений выводится только 10. Как увеличить количество выводимых изображений? Лазила в настройках — поставила по максимуму — 20 изображений, а выводится всё равно 10.
23 мая 2013 в 23:12
14Здравствуйте! Пытаюсь сделать встроенную галерею для блога путем "Куда будет вести ссылка с миниатюры: на страницу вложения " Но попадая на страницу вложения, где находится сама картинка с описанием. описание есть, картинки нет. Миниатюра картинки работает. А вот полного изображения над описанием нету. Вместо картинки серое поле. Помогите решить проблемму.
16 Июн 2016 в 8:01
15Здравствуйте, а как отобразить подпись(caption) картинок в галерее, у меня не показывают?