Коротко: изображение из TV сначала проверяют на заполненность, затем выводят в размере, подходящем для места на странице. Оригинал сохраняется в медиатеке, а посетителю отдаётся подготовленная версия.
Редактор может загрузить файл шире и тяжелее, чем требуется для карточки. Если вывести оригинал прямо в сетку статей, браузеру придётся передать лишние данные. Ниже — пример для MODX Revolution с установленным pThumb; перед применением проверьте дополнения и настройки своего проекта.
Сначала проверьте поле
На нашем сайте обложка статьи хранится в TV preview_img. Пустое поле не должно порождать пустой тег изображения:
{if $_modx->resource.preview_img?}
<img src="{$_modx->resource.preview_img | escape}" alt="">
{/if}TV должно быть привязано к шаблону статьи. Если условие не срабатывает, проверьте значение именно у открытого ресурса и то, в каком виде поле возвращает путь.
Запросите подходящий размер
Для обложки с пропорциями 3:2 можно запросить производный файл. Здесь w и h задают размеры, q — качество, а zc=1 разрешает кадрирование:
{if $_modx->resource.preview_img?}
<img src="{$_modx->resource.preview_img | pthumb:'w=960&h=640&zc=1&q=80'}"
alt="" width="960" height="640" loading="lazy">
{/if}Пустой alt здесь подходит лишь декоративной обложке, когда заголовок статьи уже стоит рядом. Если изображение сообщает что-то важное — например, показывает ошибку в интерфейсе, — напишите краткое описание.
Когда обрезать, а когда сохранять целиком
Кадрирование подходит для фото в одинаковых карточках. Сохранение всего кадра нужно для схем, скриншотов, документов и изображений с важными деталями у краёв. Один режим нельзя назначить всем картинкам сайта.
Чтобы не терять смысл, сравните итоговый файл с оригиналом. Откройте URL производного изображения, проверьте границы кадра, резкость и размер файла. Атрибуты width и height указывайте по итоговому изображению, чтобы браузер заранее отвёл ему место.
Что делать дальше
Когда для одной картинки нужны несколько ширин, следующим шагом будет srcset и sizes. Для нескольких изображений одного ресурса понадобится модель галереи, например MIGX с отдельным шаблоном элемента. В шпаргалке по Fenom собраны ещё два простых приёма вывода данных.