ilyautkin 11 апреля 2013 2 2
В ходе работы над проектом сайта Салон красоты «Чудо» потребовалось вывести логотипы партнеров. Сами партнеры — это отдельные страницы сайта, чтобы партнеров можно было добавлять, удалять, писать описания, менять логотипы и прочее.

Можно было просто взять сниппет getResources и выводить картинки из TV с помощью него. Но тут возникает проблема — обрезать логотипы, как обычно это делается с картинками при ресайзе, нельзя — логотипы должны быть целыми.

Неправильный и правильный ресайз логотипов

И тут я вспомнил, что в новостях Вконтакте картинки выравниваются очень аккуратно:

Выравнивание изображений в ВКонтакте
Выравнивание изображений в ВКонтакте

И решил, что логотипы можно выравнивать так же. Написал сниппет и мимоходом решил адаптировать его еще и для галереи. Вот, что получается, если его использовать:

Выравнивание изображений с помощью сниппета AlignImages

Код сниппета можно взять на 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+
2 комментария
Fi1osof1
Fi1osof 11 апреля 2013г в 07:04 #
Илья, отличное решение! Зачет!:-)
Fi1osof1
Fi1osof 27 июля 2015г в 01:59 #
На гитхабе сниппет AlignImages, а здесь в примере AlignImage ;)
Авторизуйтесь или зарегистрируйтесь (можно через соцсети ), чтобы оставлять комментарии.