Было:
<div class="[ [+cls]]">
<a href="[ [+image]]" rel="colorbox" title="[ [+description]]">
<img class="[ [+imgCls]]" src="[ [+thumbnail]]" alt="[ [+name]]" />
</a>
</div>
Стало:
<div class="[ [+cls]]">
<a href="[ [+image:rezimgcrop=`min-800`]]" rel="colorbox" title="[ [+description]]">
<img class="[ [+imgCls]]" src="[ [+image:rezimgcrop=`min-150,c-150x130`]]" alt="[ [+name]]" />
</a>
</div>
min-800 означает, что минимальную сторону изображения мы уменьшаем до 800 пикселей с сохранением пропорций.
min-150,c-150x130 означает, что минимальную сторону изображения уменьшаем до 150 пикселей с сохранением пропорций, затем обрезаем изображение до 150 по ширине и 130 по высоте. Другие вариант можно найти в описании к пакету MODx.
Плейсхолдер +image ссылается непосредственно на изображение. При этом Rezimgcrop единожды применив фильтр создает версию изображения соответствующего размера и впоследствии обращается именно к ней.
Читайте статью как в rezimgcrop черный фон поменять на белый