Мобильная галерея для WordPress своими руками

Сделал я однажды сайт на WordPress’е для альянса в одной игре, на которой сижу примерно с лета. Глава альянса выложила несколько скриншотов в посте, и я чуть в обморок не упал.

А потому, что когда выкладываю я, они у меня оптимизированы по высоте и ширине. Тут же изображения вылезали за пределы страницы. Но и это не самое страшное. Страшное началось, когда я решил посмотреть на всё это безобразие через браузер смартфона. Вот где мрак и ужОс.

Восстав из обморока я немного подумал… и сделал галерею с адаптивным дизайном для WordPress.

Главная задача моей галереи сделать так, чтобы при публикации с мобильного можно было бы выкладывать фото на страницу так как это делается обычно. Добавится одно простое действие. О нём далее.

Делаем галерею

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

Примерно вот так:

[mygallery]
Картинка 1
Картинка 2
Картинка 3
...
Картинка N
[/mygallery]

Т.е. по сути, мы лишь добавим два слова (в квадратных скобках) в пост! Это делается запросто как с мобильного приложения, так и из десктопной версии.

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

1. Для начала лезем в function.php активной темы и добавляем наш шоткод, вставив вот этот код:

//mygallery
function code_mygallery($atts, $content=""){
	return '<div class="gall">'.do_shortcode($content).'</div>';
}
add_shortcode("mygallery", "code_mygallery");

Можно сделать это в отдельном плагине, но я решил в этот раз не плодить сущности.

2. Теперь, добавляем в style.css активной темы следующие стили:

.gall{
display:block;
margin:10px 0;
text-align:center;
}

.gall a,
.gall img
{display:inline-block;}

.gall img{
margin: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
padding: 5px;
background-color: #fff;
max-height:500px;
max-width:100%;
}

.gall p{
padding:0;
margin:0;
display:inline !important;
}

3. И последний финт. У меня подключен плагин Easy FancyBox. Он помогает красиво открывать более крупную версию картинки при клике на ее миниатюру.

Картинки кликабельны.

Так вот, в галерее которую мы сейчас делаем, это тоже можно использовать. Ставим плагин Easy FancyBox и подключаем к теме js-файл (или вписываем нужный код в уже подключенный).

Вот код.

$('.gall img').removeAttr('width');
$('.gall img').removeAttr('height');
$(".gall p > img").unwrap();
$(".gall p a img").parent('a').unwrap();
$(".gall > img").each(function(e){
   $(this).wrap('<a></a>');
   $(this).parent('a').attr('href', j(this).attr('src'));
});	

$('.gall a').attr('rel', 'gall').fancybox();

Если будете именно подключать новый js-файл, то код, предложенный выше, заверните вот в такую обёртку:

var j = jQuery.noConflict();
j(document).ready(function($) {

КОД ПРЕДЛОЖЕННЫЙ ВЫШЕ

});

Как это работает?

Всё просто.

• Шоткод создаёт вокруг наших картинок контейнер с классом gall,
• JavaScript обрамляет каждую картинку в ссылку, с помощью которой плагин Easy FancyBox будет красиво ее открывать при клике для просмотра,
• ну а стили визуально приведут картинки в посте к нужному размеру по высоте и создадут рамки/тени.

Как это выглядит?

А выглядит всё примерно так, как на скриншотах (картинки кликабельны).

Вот десктопная версия.

Здесь я кликнул по картинке в галерее и смотрю ее увеличенную версию с помощью плагина.

А так галерея выглядит на экране мобильного. Как видите, теперь картинки не портят адаптивный дизайн сайта.

Миленько?)

Всё что потребовалось — добавить код в трёх местах и теперь картинки выводятся красиво без лишних усилий.

В общем — пользуйтесь на здоровье.

А на этом сегодня всё.

С вами был Доктор Лексиум.
Подписывайтесь, делитесь ссылкой на этот блог.
Всего вам доброго.