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

В ходе работы над проектом сайта Салон красоты «Чудо» потребовалось вывести логотипы партнеров. Сами партнеры — это отдельные страницы сайта, чтобы партнеров можно было добавлять, удалять, писать описания, менять логотипы и прочее. Можно было просто взять сниппет 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+