В ходе работы над проектом сайта Салон красоты «Чудо» потребовалось вывести логотипы партнеров. Сами партнеры — это отдельные страницы сайта, чтобы партнеров можно было добавлять, удалять, писать описания, менять логотипы и прочее.
Можно было просто взять сниппет 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` ]]
Теперь в блоке партнеров логотипы можно менять местами просто перетаскивая ресурсы в дереве элементов — картинки сами отресайзятся под нужный размер.
Илья, отличное решение! Зачет!:-)
На гитхабе сниппет AlignImages, а здесь в примере AlignImage ;)