Встроенная галерея WordPress и откуда берутся лишние 10px

Суббота, 16 Окт 2010 3:42

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

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

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

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

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

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

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

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

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

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

Встроенная галерея WordPress - вид в 4 колонки, размер миниатюр 150х150

Встроенная галерея 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

RSS комментариев

15 комментариев Комментировать

  1. BloggerMen пишет:

    16 Окт 2010 в 10:58 Reply to this comment

    1

    Я тоже никогда не пользовался встроенной галереей. Теперь обязательно потестирую.

  2. nikolas_sharp пишет:

    16 Окт 2010 в 12:19 Reply to this comment

    2

    BloggerMen, обязательно попробуй, это очень удобно. Без эффекта конечно такая галерея теряет наполовину в функциональности, потому поставь обязательно плагин какого-нибудь эффекта и прикрути его к галерее. Как правило достаточно задать только класс для изображений, причем сделать это можно в настройках админки.

  3. Елена пишет:

    14 Мар 2011 в 19:25 Reply to this comment

    3

    Добрый вечер!

    Где вы были раньше? На днях установила NextGEN Gallery. Намучилась очень,так как я «чайник» в этом деле. Наконец-то сегодня получилось создать небольшую галерею. Ее еще нужно доводить до ума. Но радует даже это. Теперь хочу попробовать выложить картинки по вашему описанию. Спасибо.

  4. codefather пишет:

    11 Окт 2011 в 11:07 Reply to this comment

    4

    Спасибо! а как удалить фото из галереи не удаляя с сервера? после добавления в галерею в списке «медиафайлах» рядом с фото пишется «используется в...» и название страницы, которая содержит галерею. как удалить эту связь? т.е. перенести в другую галерею?

    спасибо

  5. nikolas_sharp пишет:

    11 Окт 2011 в 11:13 Reply to this comment

    5

    @codefather, если я правильно понял, то в принципе связи тебе удалять не надо. Просто в следующих галереях в теге [gallery] (стандартный тег WP при вставке галереи) воспользуйся параметрами include="attach-id1,attachid2" — включает в галерею приложения с указанными id или exclude="attach-id1,attachid2" — исключает из галереи приложения с указанными id. Подробнее здесь — codex.wordpress.org/Gallery_Shortcode

  6. Владимир пишет:

    02 Апр 2012 в 11:28 Reply to this comment

    6

    Странно. Добавил галерею как Вы советовали, но почему-то все картинки расположились на странице в один столбец, хотя я указывал columns="#" и 2, и 3, и 4, и 5, и 10

  7. nikolas_ sharp пишет:

    02 Апр 2012 в 11:36 Reply to this comment

    7

    @Владимир, видимо, в теме не прописаны css-стили для галерей. Скопируйте их из дефолтовой или других тем в ваш style.css.

  8. Грег пишет:

    18 Апр 2012 в 19:15 Reply to this comment

    8

    В версии 3.3.1 в окне галерея нет «параметров галереи». Моск уже выносит. Nextgen не активируется, пишет что то про фатальную ошибку. Госпади как же люди галереи то делают на WP??

  9. nikolas_ sharp пишет:

    18 Апр 2012 в 19:39 Reply to this comment

    9

    @Грег, не разу не имел с ними проблем за пару лет :) Попробуйте перезалить вашу сборку. Также возможно стоит уточнить у поддержки хостинга наличие всех php-библиотек, необходимых для корректной работы WP, ну, и аккуратно разбирать тексты ошибок.

  10. Валентин пишет:

    16 мая 2012 в 20:03 Reply to this comment

    10

    Подскажите пожалуйста как быть, нужно добавить класс к ссылке, в которой превьюшка ( когда выводится галерея в посте). 

    Строка 1291:

    Код:

    $output = ( $this->linkifunknown ) ? '' . esc_html ($url) . '' : $url;

    вносил туда класс, но не выводится, почему? Подскажите как мне быть? 

  11. nikolas_ sharp пишет:

    16 мая 2012 в 20:25 Reply to this comment

    11

    @Валентин, скорее всего ваша задача имеет куда более тривиальные решения. Хакать ядро я бы вам точно не советовал! Вот несколько возможных решений: _http://wordpress.org/support/topic/edit-gallery-shortcode. Также напомню, что плагины вроде shadowbox всегда позволяют в своих настройках задать любой класс, к которому они в последствие применяются. Также напомню, что любой класс к чему угодно можно навесить через jQuery.

  12. Александр пишет:

    22 мая 2012 в 13:22 Reply to this comment

    12

    спасибо! Особенно про идентификацию id как посмотреть. Была с этим проблема.

  13. Анна пишет:

    24 мая 2012 в 11:12 Reply to this comment

    13

    Спасибо за статью! Столкнулась с такой проблемой: при добавлении в галерею изображений выводится только 10. Как увеличить количество выводимых изображений? Лазила в настройках — поставила по максимуму — 20 изображений, а выводится всё равно 10.

  14. Юлия пишет:

    23 мая 2013 в 23:12 Reply to this comment

    14

    Здравствуйте! Пытаюсь сделать встроенную галерею для блога путем "Куда будет вести ссылка с миниатюры:  на страницу вложения " Но попадая на страницу вложения, где находится сама картинка с описанием. описание есть, картинки нет. Миниатюра картинки работает. А вот полного изображения над описанием нету. Вместо картинки серое поле. Помогите решить проблемму.

  15. Aziz пишет:

    16 Июн 2016 в 8:01 Reply to this comment

    15

    Здравствуйте, а как отобразить подпись(caption) картинок в галерее, у меня не показывают?

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