SimpleGallery, sgController, prepare - Вывод картинок в зависимости от количества по блокам

Всем привет, вот день мучаюсь вопросом
Есть вызов группы галерей

[!sgController?
&count=`1` 
&prepare=`help`
&tpl=`@CODE:<div class="block">
<h1>[+pagetitle+] [+count+]</h1>
[+images+]
</div>` 
&sgOuterTpl=`@CODE: [+wrapper+]`
&sgRowTpl=`@CODE:<a href="[+sg_image+]"><img src="[+thumb.sg_image+]" /></a>`
!]

Хочу сделать так, чтобы если загружена 1 картинка то выводит

<div class="grid_1">
    <a class="im_1" href="1.jpg"><img src="1.jpg" /></a>
</div>

Если загружено две картинки то

<div class="grid_2">
    <a class="im_1" href="1.jpg"><img src="1.jpg" /></a>
    <a class="im_2" href="2.jpg"><img src="2.jpg" /></a>
</div>

И так далее до 5-ти, а если картинок больше, то так

<div class="grid_5">
    <a class="im_1" href="1.jpg"><img src="1.jpg" /></a>
    <a class="im_2" href="2.jpg"><img src="2.jpg" /></a>
    <a class="im_3" href="3.jpg"><img src="3.jpg" /></a>
    <a class="im_4" href="4.jpg"><img src="4.jpg" /></a>
    <a class="im_5" href="5.jpg"><img src="5.jpg" /></a>
    <a href="6.jpg"><img src="6.jpg" /></a>
    <a href="7.jpg"><img src="7.jpg" /></a>
</div>

После 5-й буду скрывать, Хочу сделать галерею как в соц сетях в посте, может быть еще если высота больше ширины, то class добавлять, чтобы норм сверстать потом
Не знаю даже как данные в prepare засунуть, c PHP плохо дружу

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

avatar
Вот документация по sgController. В конце страницы есть пример с count. Вы можете сделать такой tpl:
<code>&tpl=`@CODE:<div class="block">
  <h1>[+pagetitle+]</h1>
  <div class="grid_[+count+]">
    [+images+]
  </div>
</div>`</code>
А вот общая документация по SimpleGallery. Там есть про поле sg_index, которое можно использовать. Тогда будет как-то так:
<code>&sgRowTpl=`@CODE:<a [+my_class+] href="[+sg_image+]"><img src="[+thumb.sg_image+]"></a>`</code>
И препаре
<code><?php
$data['my_class'] = ($data['sg_index'] > 5) ? '' : 'class="im_'.$data["sg_index"].'"';
return $data;</code>
Только нужно (насколько я помню) не &prepare, а &AfterPrepare, потому что sgController уже использует своё встроенное prepare.
Комментарий отредактирован 2020-05-22 07:01:11 пользователем Aharito
avatar
Прошу прощения, но как в &AfterPrepare передать значение [+sg_index+]?
Переменная [+count+] передается а вот все, что с sg_ нет.
avatar
А, точно — это при выводе галереи с помощью sgLister были бы доступны величины типа $data['sg_index'].

Попробуйте $data['images']['sg_index'], а если не получится — вам нужно смотреть код этого «родного» prepare для sgController, мне пока некогда копаться. Или задайте вопрос в Телеге, там скорее ответят.
Комментарий отредактирован 2020-05-24 16:21:53 пользователем Aharito
avatar
Если не трудно — ради интереса напишите потом, что сработало.
avatar
При $data['images']['sg_index'] общая ошибка Error: Illegal string offset 'sg_index' а где в телеге есть такой чат?
я в принципе версткой добился такого состояния

Но хотелось бы конечно разобраться в вопросе, возможно в prepare поставлю условие на присвоение своего класса для вертикальных фото, что бы более красиво отображались, мало ли кому такая галерея понадобится, а то на JS есть что то похожее, но там скрипт и библиотеки разные, а тут 10 строк кода, потом выложу сюда (если получится)
avatar
Окей, конечно, выкладывайте. Вот Телега t.me/evolutioncms
avatar
Можно кстати и [+iteration+] попробовать или что-то подобное, я просто деталей не помню, в доках гляньте.
avatar
Что в итоге? получилось?
avatar
Вот ))) &AfterPrepare
Я про это не знал, спасибо огромное, а то с &prepare не работало ни как.
БЛАГОДАРЮ!!!
avatar
Есть BeforePrepare, prepare и AfterPrepare. Если препаре занято, то нужно пользоваться остальным. Как именно — есть в доках, погуглите.
avatar
В общем решение подсказали такое, если кому нужно, написали сниппет в общем

[!DocLister? 
&tvList=`image_help` 
&count=`1`
&tpl=`@CODE: <div class="gr_bl">
[+content+]	
<div class="grid gr_[+count+]">	
[+images+]
</div>
</div>` 
&dateSource=`pub_date`
&dateFormat=`%d.%m.%Y в %H:%M`
&prepare=`help`
&orderBy=`menuindex ASC`
&w_options=`w=600` 
&h_options=`h=300` 
&mini.photo.w=`@CODE: <a href="[+img+]" class="[+class+] fancybox" data-fancybox-group="gallery"><img src="[+mini_photo+]"><i>+ [+plus+]</i></a>`
&mini.photo.h=`@CODE: <a href="[+img+]" class="[+class+] fancybox" data-fancybox-group="gallery"><img src="[+mini_photo+]"><i>+ [+plus+]</i></a>`
!]

Вот сам PREPARE help

<?php
$tpl = DLTemplate::getInstance($modx);  
$res = $modx->db->query('Select sg_image,sg_properties from '.$modx->getFullTableName('sg_images').' where sg_rid='.$data['id'].' order by sg_index desc limit 0,50');

$data['images']='';

while ($row = $modx->db->getRow($res))
{
  $prop = json_decode($row['sg_properties'],true);
  if ($prop['width']>$prop['height'])
  {
    $class="horisontal";
    $t = 'mini.photo.w';
    $opt_name = 'w_options';
  }
  else 
  {
    $class="vertical";
    $t = 'mini.photo.h';
    $opt_name = 'h_options';
  }
  $mini_photo = $modx->runSnippet('phpthumb',array('input'=>$row['sg_image'],'options'=>$_DocLister->getCfgDef($opt_name))); 
	
$data['count'] = $modx->db->getValue('Select count(*) from '.$modx->getFullTableName('sg_images').' where sg_rid='.$data['id']);
$plus = $data['count'] - 5;	
if ($data['count'] >= 6) {
$data['count'] = 6;
}
	  
  
  $data['images'].=$tpl->parseChunk($_DocLister->getCfgDef($t),
  array( 'img' => $row['sg_image'], 'mini_photo' => $mini_photo, 'class' => $class, 'plus' => $plus ), '[+', '+]' );
}

return $data;


И сам css код, решил сделать на flexbox, по другому что-то не получалось

.gr_bl { overflow:hidden; width:680px;  font-size:18px; margin-bottom:60px;}

.grid {display: flex; flex-wrap: wrap; flex-direction: row; width: auto; margin:0 -1px; font-size:0;}
.grid a {margin:1px; position:relative;}
.grid a img {width:100%; object-fit: cover; display:block;}

.gr_1 a {width:100%; display:block; }
.gr_1 .vertical {max-width:340px;}

.gr_2 a img {height:340px;}
.gr_2 .horisontal {width:44%; flex-grow: 1; }
.gr_2 .vertical {width:30%; }

.gr_3 a img {height:240px; }
.gr_3 .horisontal {width:32%; flex-grow: 1;  max-width:60%;}
.gr_3 .vertical {width:22%;}

.gr_4 a img {height:240px; }
.gr_4 .horisontal {width:40%; flex-grow: 1; }
.gr_4 .vertical {width:40%; flex-grow: 1;}

.gr_5 a img {height:220px; }
.gr_5 a:nth-child(1) {width:31%;}
.gr_5 a:nth-child(2) {width:31%;}
.gr_5 a:nth-child(3) {width:31%;}
.gr_5 a:nth-child(4) img {height:320px;}
.gr_5 a:nth-child(5) img {height:320px;}
.gr_5 .horisontal {width:40%; flex-grow: 1; }
.gr_5 .vertical {width:6.8%; flex-grow: 1;}

.gr_6 a img {height:220px; }
.gr_6 a:nth-child(1) {width:31%;}
.gr_6 a:nth-child(2) {width:31%;}
.gr_6 a:nth-child(3) {width:31%;}
.gr_6 a:nth-child(4) img {height:320px;}
.gr_6 a:nth-child(5) img {height:320px;}
.gr_6 .horisontal {width:40%; flex-grow: 1; }
.gr_6 .vertical {width:6.8%; flex-grow: 1;}
.grid a:nth-child(n+6) {display:none;}
.gr_6 a:nth-child(5) i {position:absolute; z-index:2; top:0; left:0; right:0; bottom:0; background:#00000075; font-size:64px; color:#fff; text-align:center;
 font-family: 'Open Sans', sans-serif; font-weight:800; font-style:normal; letter-spacing:-4px;
display: flex;
align-items: center;
justify-content: center;}



Должно вот такими блоками получится
Саму галерею взял тут photoswipe.com/
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.