Галерея в стиле Вконтакте или Яндекс.Картинок

В ходе работы над проектом сайта Салон красоты «Чудо» потребовалось вывести логотипы партнеров. Сами партнеры — это отдельные страницы сайта, чтобы партнеров можно было добавлять, удалять, писать описания, менять логотипы и прочее.
 
Можно было просто взять сниппет getResources и выводить картинки из TV с помощью него. Но тут возникает проблема — обрезать логотипы, как обычно это делается с картинками при ресайзе, нельзя — логотипы должны быть целыми.
 
? 
 
И тут я вспомнил, что в новостях Вконтакте картинки выравниваются очень аккуратно:
 
?
 ?
 
И решил, что логотипы можно выравнивать так же. Написал сниппет и мимоходом решил адаптировать его еще и для галереи. Вот, что получается, если его использовать:
 
?
 
Код сниппета можно взять на github. Если будете использовать вместе с Gallery, то надо создать еще и чанк tpl.AlignImage: 
"[[+id]]":"[[+[[+tvPrefix]][[+processImage]]]]",
Сниппет AlignImage является сниппетом-оберткой и работает с любым сниппетом, который понимает offset и limit, например, getResources.
 
Сниппет Gallery не понимает ни offset, ни limit, но это один из самых популярных пакетов, поэтому для него в AlignImage есть свои строчки. Сниппет ресайзит изображения с помощью Imagick, поэтому у вас на сервере он должен быть (на modxcloud есть).
 
Вызов сниппета в паре с Gallery:
 
<div style="width: 400px; text-align: justify; line-height: 0;">
[[AlignImage?
  &snippet=`Gallery` <!-- любой сниппет, который
                     понимает offset и limit -->

  &lineLimit=`3`     <!-- сколько фоток в строке -->

  &limit=`6`         <!-- сколько всего выводить -->

  &lineWidth=`390`   <!-- какой должна получиться ширина строки -
                          чуть меньше ширины контейнера -
                          чтобы между фотками были расстояния -->

  &processImage=`image_absolute` <!-- имя плейсхолдера, в который
                                 сниппет - в данном случае Gallery -
                                 помещает картинку. Для getResources здесь
                                 пишем нужный TV -->

  &tpl=`tpl.galAlignImage` <!-- шаблон вывода:
     <a href="[[~8? &galItem=`[[+id]]` &galAlbum=`[[+album]]`]]">
       <img src="[[+image_absolute]]" style="margin-bottom: 8px;">
     </a> -->

  &crop=`1` <!-- обрезать ли лишний фон у картинок,
                 например, если это логотипы -->

  &album=`Фото салона` <!-- остальное идет -->
  &tvPrefix=``         <!-- в Gallery или getResources -->
]]
<img src="/img/s.png" style="width: 100%; height: 1px; opacity: 0;">
<!-- Картинка нужна для выравнивания последней строки -->
</div>
Вызов совместно с getResources:
[[AlignImage?
  &snippet=`getResources`
  &parents=`59`
  &sortby=`{"menuindex":"ASC"}`
  &lineLimit=`2`
  &lineWidth=`245`
  &processImage=`LOGO`
  &tpl=`tpl.partners`
  &crop=`1`
]]
Теперь в блоке партнеров логотипы можно менять местами просто перетаскивая ресурсы в дереве элементов — картинки сами отресайзятся под нужный размер.
 
Думаю, новичкам будут интересны подробности алгоритма и комментарии кода. G+

Илья, отличное решение! Зачет!:-)

На гитхабе сниппет AlignImages, а здесь в примере AlignImage ;)

FreeCode.Academy

Галерея в стиле Вконтакте или Яндекс.Картинок

Добавить комментарий