Навороченная фото галерея на cms DLE с помощью тега PAGEBREAK, каждая картинка будет иметь собственный url + title

Навороченная фото галерея на cms DLE с помощью тега PAGEBREAK, каждая картинка будет иметь собственный url + title
Совсем недавно я захотел обзавестись собственной фото галереей, перерыв весь интернет я так и не смог найти подходящий для меня вариант, даже платные модули меня не устраивали, особенно архитектура навигации по картинкам, везде что то не так. А обычные слайдеры уж точно не подходили не имея в себе оригинальный Url для картинки Title. Подумав немного я решил сделать галерею использую тег {PAGEBREAK}, он отвечает за постраничную навигацию внутри новости, и если разделить пачку изображений этим тегом получится каждая картинка обзаведётся собственным Url + Title. Но еще останется внести пару изменений в сам движок, чтобы добиться вместо вывода цифр постраничной навигации, превьюшки к тем самым картинкам находящейся на следующих страницах.

Оглавление

1 Демонстрация
2 Как добавлять материал (Особенность)
3 Реализация
4 Оформление
5 Скачать готовый шаблон
6 Адаптивность

Демонстрация

Вот так будет выглядеть фото галерея в самом конце пути:

Навороченная фото галерея на cms DLE с помощью тега PAGEBREAK, каждая картинка будет иметь собственный url + title


На картинке выше мы видим цифры 1,2,3 прямо на превьюшках, раньше вместо этих миниатюр были ссылки в виде 1,2,3. После того как мы внесли изменения в скрипт вместо обычных текстовых ссылок появились эти миниатюры, по ним можно кликать и перемещаться на страницу с оригинальным изображением, которое можно увидеть в самом низу. Его я решил переместить в низ, тк по моему это очень удобно. При этом во время клика по превью картинки страница прокручивается в самый низ к началу оригинального изображения, а по клику на оригинальное фото происходит переход на следующую страницу. Это делается с помощью html якоря.

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

Навороченная фото галерея на cms DLE с помощью тега PAGEBREAK, каждая картинка будет иметь собственный url + title


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

Как добавлять материал (Особенность)

В этой галерее есть один небольшой минус, хотя наверно он не один их несколько, но об этом я напишу немного ниже: Минусы, но эти минусы можно исправить с небольшим знанием php и html.

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

Навороченная фото галерея на cms DLE с помощью тега PAGEBREAK, каждая картинка будет иметь собственный url + title


Тут мы видим, что в краткой новости нам придётся выставлять ссылки на картинки, оборачивая их тегами "thumb", именно с краткой новости мы будем выдёргивать превьюшки для навигации. А в полной новости нужно помещать их в теги "center" и "img", а в конце каждой картинки ставить тег "PAGEBREAK", кроме самой последней. Именно такое строение новости будет идеальным.

Да и еще в админпанели, в настройках изображения, я задал параметры для картинок, вот такие:

Навороченная фото галерея на cms DLE с помощью тега PAGEBREAK, каждая картинка будет иметь собственный url + title


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

Реализация

Итак теперь остаётся всё это реализовать на своём сайте. У меня установлен движок DLE 10.5, если у вас другая версия, то скорее всего нечего страшного.

1. Открываем файл show.full.php, и вносим в него следующие изменения:

На 282 строчке ищем вот такой кусочек кода:

$news_seiten = explode( "{PAGEBREAK}", $row['full_story'] );
$anzahl_seiten = count( $news_seiten );


Перед ним вставляем:

//////////////////// фотога лерея  PAGEBREAK
$__fullstory=$row['short_story']; 
$__fullstory2=$row['full_story'];

//////////////////// фотога лерея PAGEBREAK
Получается как то так:
Навороченная фото галерея на cms DLE с помощью тега PAGEBREAK, каждая картинка будет иметь собственный url + title


2. Далее в этом же файле ищем где то на 453 строчке:

$tpl2->set( '{pages}', $listpages );
$tpl2->compile( 'content' );


И перед этим ставим следующий код:

//////////////////// фотога лерея  PAGEBREAK	
if (stripos ( $listpages, "{image-" ) !== false) {

$images = array();
preg_match_all('/(img|src)=("|\')[^"\'>]+/i', $__fullstory, $media);
$data=preg_replace('/(img|src)("|\'|="|=\')(.*)/i',"$3",$media[0]);

foreach($data as $url) {
$info = pathinfo($url);
if (isset($info['extension'])) {
if ($info['filename'] == "spoiler-plus" OR $info['filename'] == "spoiler-plus" ) continue;
$info['extension'] = strtolower($info['extension']);
if (($info['extension'] == 'jpg') || ($info['extension'] == 'jpeg') || ($info['extension'] == 'gif') || ($info['extension'] == 'png')) array_push($images, $url);
}
}

if ( count($images) ) {
$i=0;
foreach($images as $url) {
$i++;
$listpages = str_replace( '{image-'.$i.'}', $url, $listpages );
$listpages = str_replace( '[image-'.$i.']', "", $listpages );
$listpages = str_replace( '[/image-'.$i.']', "", $listpages );
}

}

$listpages = preg_replace( "#\[image-(.+?)\](.+?)\[/image-(.+?)\]#is", "", $listpages );
$listpages = preg_replace( "#\\{image-(.+?)\\}#i", "{THEME}/dleimages/no_image.jpg", $listpages );

} 
//////////////////// фотога лерея  PAGEBREAK
if (stripos ( $listpages, "{fullimage-" ) !== false) {

$images = array();
preg_match_all('/(img|src)=("|\')[^"\'>]+/i', $__fullstory2, $media);
$data=preg_replace('/(img|src)("|\'|="|=\')(.*)/i',"$3",$media[0]);

foreach($data as $url) {
$info = pathinfo($url);
if (isset($info['extension'])) {
if ($info['filename'] == "spoiler-plus" OR $info['filename'] == "spoiler-plus" ) continue;
$info['extension'] = strtolower($info['extension']);
if (($info['extension'] == 'jpg') || ($info['extension'] == 'jpeg') || ($info['extension'] == 'gif') || ($info['extension'] == 'png')) array_push($images, $url);
}
}

if ( count($images) ) {
$i=0;
foreach($images as $url) {
$i++;
$listpages = str_replace( '{fullimage-'.$i.'}', $url, $listpages );
$listpages = str_replace( '[fullimage-'.$i.']', "", $listpages );
$listpages = str_replace( '[/fullimage-'.$i.']', "", $listpages );
}

}

$listpages = preg_replace( "#\[image-(.+?)\](.+?)\[/image-(.+?)\]#is", "", $listpages );
$listpages = preg_replace( "#\\{image-(.+?)\\}#i", "{THEME}/dleimages/no_image.jpg", $listpages );

} 
//////////////////// фотога лерея  PAGEBREAK


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

Например на 432 строчке заменив:
$listpages .= "<a href=\"$PHP_SELF?newsid=" . $row['id'] . "&amp;news_page=" . $j . "\">$j</a> ";

На:

$listpages .= "<a href=\"$PHP_SELF?newsid=" . $row['id'] . "&amp;news_page=" . $j . "\"><img src=\"{image-$j}\"></a> ";


То есть теперь тег image-1, стал рабочим в файле show.full.php, где цифру 1 задаёт переменная $j.

Оформление:

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

Если вы не хотите всё это проделывать, то можете скачать мой файл: show.full.zip [12,64 Kb] (cкачиваний: 12), далее отредактировать его под себя, удалить лишнее и тп.

Скачать готовый шаблон

Всё выше написанное наверно подойдёт для тех кто разбирается в DLE, им достаточно наверно одного кусочка кода, а всё остальное, плагины, оформление подключить для многих не составит труда, но есть люди для которых это будет сложно, поэтому я выкладываю ниже шаблон с подключенными скриптами, и со всей проделанной работой. Достаточно загрузить шаблон, заменить файл show.full.php, и оформить главную страницу будущего фотоальбома.

Скачать архив с шаблоном и файлом show.full.php можно тут: Desktop.zip [2,39 Mb] (cкачиваний: 27)

Если что получатся не будет, пишите в комментариях.


Ах да, чуть не забыл, вот демонстрация сайта на различных устройствах:
Ноутбук
Навороченная фото галерея на cms DLE с помощью тега PAGEBREAK, каждая картинка будет иметь собственный url + title


Планшет
Навороченная фото галерея на cms DLE с помощью тега PAGEBREAK, каждая картинка будет иметь собственный url + title


I pad
Навороченная фото галерея на cms DLE с помощью тега PAGEBREAK, каждая картинка будет иметь собственный url + title


Samsung
Навороченная фото галерея на cms DLE с помощью тега PAGEBREAK, каждая картинка будет иметь собственный url + title