Создание галереи на YaPRO CMS

Галерея будет работать по типу: 1 картинка = 1 страница.

Требования к галерее для меня были следующими:

1) Массовая заливание фотографий

2) Работа с метками

3) Комментарии

4) Рейтинг

Все выше перечисленные пункты в YaPRO CMS присутствовали в коробке, кроме пункта №1, за это большое спасибо Николаю Лебеденко за создание плагина.

Создадим галерею в 3 этапа...

1. Установка плагина галереи

Будем считать что YaPRO CMS у вас уже установлена.

Если Вы используете версию CMS от 19.10.2010 или старее, то:

Скачиваем этот файл и кидаем в эту папку /admin/modules/pages/ с заменой.

Скачиваем плагин и распаковываем в эту папку /admin/modules/fields/include/

Далее создаем новое поле в Система - Формы и поля - Добавить поле со следующими параметрами:

Сноска автора плагина:

Обратите внимание, загрузка сразу нескольких файлов поддерживается только браузерами Firefox, Chrome, Safari.

Создаем еще одно поле для полной версии изображения:

Открываем файл любимым редактором php следующий файл: /admin/modules/fields/include/subclauses_html5_multiple_file_upload.php

В строке №36 после

1

@chmod($GLOBALS['SYSTEM']['config']['2'].$path.$name.$type, 0777);

Добавим создание превью для изображения

1

img_preview($GLOBALS['SYSTEM']['config']['2'].$path.$name.$type, $GLOBALS['SYSTEM']['config']['2'].$path.$name.'_thumb'.$type, 250, 180);

Последние два параметра указывают размеры по ширине и высоте соответственно. Меняем значение на необходимое.

Далее находим код

1
2
3
4
5
6
7
8

$data['img'] = '/'.$path.$name.$type;
 
if(mb_substr($name,-1)=='.'){ $name = mb_substr($name,0,-1); }
$data['name'] = $name;
 
$data['parent_id'] = $_GET['page_id'];
 
$data['url'] = $GLOBALS['pages']-> url_uniq($data);// формируем уникальный урл для страницы

И приводим к такому виду, ниже объясню зачем

1
2
3
4
5
6
7
8
9
10

$data['imgfull'] = '/'.$path.$name.$type;
$data['img'] = '/'.$path.$name.'_thumb'.$type;
 
if(mb_substr($name,-1)=='.'){ $name = mb_substr($name,0,-1); }
$data['name'] = $name;
 
$data['parent_id'] = $_GET['page_id'];
 
$data['url'] = $GLOBALS['pages']-> url_uniq($data);// формируем уникальный урл для страницы
$data['blog'] = 1;

В строке №1 мы добавляем оригинал изображения в поле imgfull для просмотра полной версии на новой странице, в строку №2 мы добавили _thumb для добавления в поле img (анонс) превьюшки, ну и строка №10 - отмечаем все записи как "Страница блога" для вывода их на главной под лозунгом "Новые" или "Недавно добавленные" изображения.

На этом установка плагина завершена. Можем смело создавать нужный раздел для своих картинок или фотографий.

Для тех у кого возникли ошибки или трудности при редактировании выкладываю готовый плагин с изменениями.

2. Добавление изображений в галерею

Создаем страницу со следующими параметрами:

URL-тип: разрешить метки

Шаблон страницы: шаблон для отображения вашей галереи

Позиция в правом меню: по усмотрению

Далее переходим к самому интересному - нажимаем Обзор у пункта Изображения раздела и выбираем картинки или фото для загрузки

Нажимаем создать.

После успешной загрузки фото мы увидим каждую картинку на отдельной странице имя которой соответствует имени файла.

Открываем для редактирования любую из страниц и смотрим нет ли ошибок

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

3. Оформление галереи

Вывод изображений в категории происходит через плагин подобный system_kids_.php как и всех остальных страниц. Создаем копию файла этого плагина и называем его к примеру gallery.php. Рассмотрим изменения в плагине на примере с сайта http://dimache.ru:

1
2
3
4
5
6
7
8
9
10
11

$document .= '
	<div id="work">
		<div style="border:3px solid #ccc;background:#fff url('.$r['img'].') center center no-repeat;">
			'.($r['img']? '<a href="'.$url.'" title="Название: '.$r['name'].'<br />
			Категория: '.$this-> data('name',$r['parent_id']).'<br />
			 Опубликовано:<br />
			'.date('j', $r['time_created']).' '.$this->ru['month'][date('n', $r['time_created'])].$year.' в '.date('H:i', $r['time_created']).'<br />
			'.($r['comments']?'Комментариев '.$r['comments'].'':'Комментариев нет').'">
			<p style="width:215px;height:140px;display:block;"></p></a>
		</div>
	' : '').'</div>';

Скачать измененный файл gallery.php

Для корректной работы такого title необходим любой из плагинов подсказок на jquery, мой выбор остановится на jquery tiptip. Так же при большой коллекции изображений неплохо было бы использовать jquery lazyLoad, который помимо своей основной задачи - загрузка картинок при прокруте а не сразу, добавляет еще и некого шарма всему происходящему на сайте.

Подключаем плагины.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

	<script type="text/javascript" src="/js/jquery.tipTip.minified.js"></script>
	<script type="text/javascript" src="/js/jquery.lazyload.js"></script>
	<script type="text/javascript">
		$(function() {
			$("img").lazyload({ threshold : 200 });
		});
		$(document).ready(function() {
			$('#headermenu a,#sidebar a,#work a,#partnerstable a').tipTip({
				'delay' : 0,
				'fadeIn' : 200,
				'fadeOut' : 200,
			});
		});
	</script>

Скачиваем плагины тут

Копируем файл inner.html и называем gallery.html

Содержимое gallery.html будет следующим:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{ header.html~}
<div id="middleOuter" class="centerOuter">
	<table id="middleInner" class="centerInner" border="0" cellpadding="0" cellspacing="0" width="100%">
		<tr>
			<td width=726 valign=top>
					<h1><!--NoReplace-->{ $this-> data('name')~}<!--/NoReplace--></h1>
					{ gallery.php~}
			</td>
		</tr>
	</table>
	<div id="footerBox">{ footer.html~}</div>
</div>
 
{ $this->SHPathStr~}
{ $this->SHPathCode~}
 
{ bottom.html~}

В коде убрано ~ перед открывающей скобкой чтобы парсер не ругался.

В строке №7 вызывается созданный нами плагин на основе system_kids.php

Применяем этот шаблон для страницы с изображениями.

Большое спасибо Николаю Лебеденко за помощь и консультации по работе с CMS YaPRO и за создание плагина массовой загрузки изображений.

Наслаждаемся работой плагина.