Обложка, подпись и доступность медиа
Медиафайл и его употребление в статье — разные объекты. Одну иллюстрацию можно использовать в нескольких местах, но её подпись и альтернативный текст зависят от контекста. Для «Редакционного дома» добавим обложку первой статьи и отдельно опишем, какую информацию она передаёт. Урок завершится связью с файлом, а не обещанием, что любой загруженный объект стал приватным.
Исходное состояние — Article с Author, Category, SEO и Resources. Новое состояние хранится в states/lesson-05/: добавлены cover, coverAlt, coverCaption. Проект не запускался, поэтому изображение из архива является авторской учебной схемой, а не снимком интерфейса или результатом выполненной загрузки.
Обложка как публичная иллюстрация
Поле cover имеет тип media, принимает один файл и ограничено изображениями. В Builder выберите Media, одиночный объект и соответствующий тип. Добавьте два обычных строковых поля для альтернативного текста и подписи. Ограничения длины служат редакционным ориентиром; они не оценивают, достаточно ли объяснено изображение.
В fixtures/cover.svg находится схема сетки: прямоугольник разделён на три столбца и две строки. Она не содержит чужих лиц, персональных сведений или заимствованного интерфейса. Её можно рассматривать как материал для статьи, но не как доказательство запуска лаборатории. Название внутри SVG прямо обозначает учебную схему.
Загрузите изображение через Media Library, если ваша локальная конфигурация допускает выбранный формат. При отказе не отключайте все ограничения ради одного SVG: используйте обычное растровое изображение, созданное из этой схемы подходящим инструментом. Поддержка формата и правила загрузки зависят от конфигурации проекта; файл в ZIP не гарантирует, что каждая установка принимает его без настройки.
Вернитесь к «Сетке карточек CSS Grid», выберите cover и задайте coverAlt: «Три столбца и две строки учебной сетки». В coverCaption укажите: «Учебная схема, созданная для курса». Ожидаемое состояние — файл связан с документом, а текстовые пояснения сохранены в самой статье. Если эту же схему затем использовать в другом уроке, соответствующие строки можно написать иначе.
Официальная Media Library описывает управление файлами и их метаданными. В нашем проекте библиотека содержит иллюстрации для публичного чтения. Не помещайте туда редакционные договоры, пароли или материалы, доступ к которым должен зависеть от опубликованного состояния Article.
Альтернативный текст объясняет смысл
Атрибут alt помогает, когда изображение не показано или читается вспомогательным средством. Он не должен повторять название файла cover.svg. Такое название описывает способ хранения, а не содержание. Не нужно также начинать каждый alt словами «картинка, на которой»: читателю уже известно, что это изображение. Лучше назвать существенные элементы и их отношение.
Рассмотрим две возможные подписи. «Красивые прямоугольники» почти ничего не сообщает о сетке. «Три столбца и две строки» передаёт структуру, но не описывает все визуальные особенности. Для нашей простой схемы этого достаточно, поскольку цвета и толщина линии не влияют на учебный вывод. Если бы схема показывала различие областей, обозначенных цветом, описание должно было бы передать и это различие словами.
Не все изображения требуют содержательного alt. Чисто декоративный фон обычно получает пустое значение, чтобы не отвлекать от текста. Но обложка, которая объясняет устройство Grid, не является просто украшением. Решение зависит от функции изображения на конкретной странице. Поэтому отдельное поле статьи полезно даже при наличии общей alternativeText в медиабиблиотеке.
Подпись visible для всех посетителей и альтернативный текст решают разные задачи. Подпись сообщает происхождение или уточняет пример. Alt заменяет информационную функцию изображения. Полное совпадение этих строк иногда создаёт повтор для пользователей вспомогательного чтения. В нашей паре alt описывает сетку, caption объясняет, что это авторская учебная схема.
Право чтения документа не закрывает файл
При локальном upload provider файл часто доступен по URL из uploads. Запрет Public find для Article защищает выдачу документа через Content API, но сам URL изображения может продолжать открываться. И снятие статьи с публикации не обязательно удаляет физический файл. Это важное различие между состоянием редакционного документа и правилами файлового хранилища.
Представьте черновик с конфиденциальной таблицей, прикреплённой как медиа. Если кто-то получил её URL, отсутствие статьи в публичном каталоге может не препятствовать загрузке. Для закрытых вложений нужен отдельный проект доступа: приватное хранилище, серверная авторизация или ограниченные ссылки, согласованные с выбранным provider. В этой серии такого хранилища нет; используем только безопасные публичные учебные иллюстрации.
Другой ошибочный случай — удаление «лишней» обложки из Media Library. Перед удалением следует выяснить, какие документы её используют. Пустое значение cover у одной статьи не доказывает, что файл нигде не нужен. В небольшом проекте это можно проверить вручную; в большом потребуется процесс поиска ссылок и правила архивации. Не заменяйте его предположением по имени файла.
Потребитель должен учитывать отсутствие media. Если cover не выбран, карточка может показать только заголовок и summary. Не вставляйте битую ссылку на изображение с пустым src: она создаёт лишний сетевой запрос и непонятный интерфейс. Если URL относительный, сервер сайта должен корректно разрешить его относительно CMS, а не собственного домена. В будущем расширении также нужно ограничить доверенные источники изображений.
У изображения есть и технические метаданные: размеры, MIME type, варианты обработки. Caption не должен заменять эти сведения, а имя файла не должно служить единственным способом узнать назначение. Если заменяете cover новым изображением, сравните пропорции и информационный смысл. Широкая схема и вертикальный портрет требуют разного места в карточке, хотя оба имеют тип images. Наш renderer пока не строит такую карточку; самостоятельное расширение должно выбрать отображение осмысленно. Сохраните исходник схемы, чтобы при изменении размеров не потерять возможность получить подходящий вариант без многократного ухудшения качества.
Наш минимальный сайт одиннадцатого урока запросит cover, но не отобразит его: так мы отдельно изучим контракт получения данных и простое безопасное построение текста. Для самостоятельного расширения добавьте figure только после объяснения относительного URL, alt и caption. Ожидаемый результат этого урока остаётся проверяемым в редакторе: прежний документ, один media object и две осмысленные строки. Файл входит в архив вместе с исходной SVG-схемой, поэтому последующие главы используют тот же предметный пример.