Edit

Вивід зображень

Для демонстрації галереї використовується DocLister з контроллером onetable. Для більшої зручності виклик DocLister здійснюється через сніппет-обгортку sgLister; відповідно при виклику можна використати будь які параметри DocLister. В sgLister також здійснюється додаткова обробка виводимих даних, котра реалізована за допомогою параметру prepare при виклику DocLister.

Параметри сніпета sgLister

imageField

Ім'я поля з зображенням.

Значення за замовчуванням - sg_image.

parents

Для того щоб вивести зображення з вказаних ресурсів.

Можливі значення - id ресурсів, розділені комою.

Значення за замовчуванням - id ресурсу в якому викликається сніпет.

documents

Для виводу окремих зображень із всіх галерей.

Можливі значення - id записів в таблиці sg_images, розділені комою.

Значення за замовчуванням - порожньо.

BeforePrepare, AfterPrepare

Обробка даних до того, як вони будуть оброблені сніпетом sgLister, і після.

Можливі значення - імена сніпетів, через кому.

Значення за замовчуванням - порожньо.

thumbSnippet

Ім'я сніппета для генерації прев'ю при виведенні.

Можливі значення: ім'я сніппета, наприклад, phpthumb.

Значення за замовчуванням - порожньо.

thumbOptions

Параметри, що передаються сніппету, указаному в параметрі thumbSnippet. Для генерації одиничного прев'ю вказується стрічка з параметрами:

&thumbSnippet=`phpthumb`
&thumbOptions = `w=400&h=400&zc=1`

Шлях до картинки буде доступний в шаблоні через плейсхолдер [+thumb.sg_image+]

Для генерації декількох прев'ю параметри можна задавати в json-формате:

&thumbSnippet=`phpthumb`
&thumbOptions = `{
    "default":"w=400&h=400&zc=1",
    "small":"w=50&h=50&zc=1",
    "medium":"w=200&h=200&zc=1"
}`

Шляхи до картинок будуть доступні в шаблоні через плейсхолдери:

[+thumb.sg_image+]
[+thumb_small.sg_image+]
[+thumb_medium.sg_image+]

Значення за замовчуванням - порожньо.

tpl

Шаблон для виведення.

Можливі значення - ім'я шаблону, вказане за правилами задання шаблонів в DocLister.

Плейсхолдери

Дані таблиці sg_images:

[+sg_id+] — id зображення;
[+sg_index+] — позиція в галереї;
[+sg_image+] — посилання на зображення;
[+sg_title+] — назва зображення;
[+sg_description+] — опис зображення;
[+sg_properties+] - інформація про зображення в форматі json;
[+sg_add+] — додаткове поле;
[+sg_isactive+] — прапорець, щоб приховати якісь зображення з виведення;
[+sg_rid+] — id ресурсу, якому належить зображення (parentField);
[+sg_createdon+] — дата додавання зображення.

Для виведення екранованих данних (параметр є в DocLister):

[+e.имя_поля+]

Інформація про зображення (при використанні сніппета sgLister):

[+properties.width+] - ширина в пікселях;
[+properties.height+] - висота в пікселях;
[+properties.size+] - розмір файлу.

Прев'ю (при використанні сніппета sgLister і заданних параметрах thumbSnippet і thumbOptions):

[+thumb.sg_image+] - посилання на основний файл прев'ю;
[+thumb_имя.sg_image+] - посилання на додатковий файл прев'ю;
[+thumb.width.sg_image+], [+thumb_имя.width.sg_image+] - ширина прев'ю;
[+thumb.height.sg_image+], [+thumb_имя.height.sg_image+] - висота прев'ю.

Також доступні плейсхолдери, встановлювані сніппетом DocLister.

Приклад

[+pages+]
[!sgLister?
&ownerTPL=`@CODE: <div class="row">[+dl.wrap+]</div>`
&thumbSnippet=`sgThumb`
&thumbOptions=`400x300`
&display=`16`
&paginate=`pages`
&PrevNextAlwaysShow=`1`
&tpl=`@CODE:
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <a class="thumbnail" href="[+sg_image+]" target="_blank">
        <img class="img-responsive" src="[+thumb.sg_image+]" alt="[+e.sg_title+]">
    </a>
</div>
`
&TplWrapPaginate=`@CODE:<nav class="text-center"><ul class="pagination">[+wrap+]</ul></nav>`
&TplCurrentPage=`@CODE:<li class="active"><span>[+num+]</span></li>`
&TplPage=`@CODE:<li><a href="[+link+]"><span>[+num+]</span></a></li>`
&TplNextP=`@CODE:<li><a href="[+link+]"><span class="glyphicon glyphicon-forward"></span></a></li>`
&TplLastP=`@CODE:<li><a href="[+link+]"><span class="glyphicon glyphicon-fast-forward"></span></a></li>`
&TplFirstP=`@CODE:<li><a href="[+link+]"><span class="glyphicon glyphicon-fast-backward"></span></a></li>`
&TplPrevP=`@CODE:<li><a href="[+link+]"><span class="glyphicon glyphicon-backward"></span></a></li>`
&TplNextI=`@CODE:<li class="disabled"><span class="glyphicon glyphicon-forward"></span></li>`
&TplLastI=`@CODE:<li class="disabled"><span class="glyphicon glyphicon-fast-forward"></span></li>`
&TplFirstI=`@CODE:<li class="disabled"><span class="glyphicon glyphicon-fast-backward"></span></li>`
&TplPrevI=`@CODE:<li class="disabled"><span class="glyphicon glyphicon-backward"></span></li>`
!]
[+pages+]