Разработчикам

Медиа и файлы

Руководство разработчика PageCharm

Как хранить изображения, файлы и бэкапы через storage-провайдеры.

Storage

Sample использует локальное хранилище: медиа попадают в wwwroot/uploads, а бэкапы — в storage/backups. В пакетной архитектуре можно заменить storage-провайдер без переписывания UI.

Поля Image/File/Video

Медиа можно прикреплять к контенту или конкретному полю. В форме контента загрузка в поле работает до первого сохранения страницы: файл временно загружается в storage, а после сохранения CMS привязывает его к созданному атрибуту. При удалении контента CMS удаляет связанные медиа-активы и файлы из настроенного хранилища.

Для видео файл не загружается: в поле Video/Videos вставляется ссылка на youtube.com, vk.com, vkvideo.ru или rutube.ru. CMS сохраняет ссылку, провайдера, id ролика, preview и embed URL, если их удалось определить. Если preview не пришел автоматически, в поле можно указать URL картинки вручную. Максимальное количество роликов задается в настройках поля так же, как у картинок и файлов.

Пресеты изображений

Размеры картинок задаются в админке в разделе «Медиа» через кнопку настроек. Пресет описывает ширину, высоту, режим обработки (по ширине, fit, crop, pad), формат, качество и набор ширин для srcset. На уровне поля шаблона или настройки типа Image/Images выбираются только те пресеты, которые реально нужны этому месту сайта. Если пресетов нет или в поле они не выбраны, картинка отдается в оригинальном размере.

В Razor оригинал берется из media.Url, а resized-вариант — через media.GetPresetUrl("alias"). Первый запрос лениво создаст файл и положит его в storage-кэш; следующие запросы отдадут уже готовый вариант.

@{
    var cover = Model.Content.GetFirstMedia("foto");
    var gallery = Model.Content.GetImages("gallery");
    var documents = Model.Content.GetFiles("documents");
    var trailer = Model.Content.GetVideo("trailer");
}

@if (cover is not null)
{
    <img src="@cover.GetPresetUrl("kartochka-tovara")" alt="@cover.Alt">
}

@foreach (var image in gallery)
{
    <img src="@image.GetPresetUrl("kartochka-tovara")" alt="@image.Alt">
}

@foreach (var file in documents)
{
    <a href="@file.Url">@file.FileName</a>
}

@if (trailer is not null)
{
    <a href="@trailer.Url">
        @if (trailer.GetPreviewUrl() is { } previewUrl)
        {
            <img src="@previewUrl" alt="@trailer.Title">
        }
        Смотреть видео
    </a>
}

Точка фокуса

У изображения в медиатеке можно указать точку фокуса. Она хранится как относительные координаты FocalX/FocalY от 0 до 1 и используется при генерации crop-вариантов, чтобы автоматическое кадрирование не теряло важную часть изображения.

Копирование контента

При копировании контента копируются его дочерние элементы и медиа. Новые записи получают собственные storage keys.

Пример

options.UseLocalStorage(
    rootPath: "wwwroot/uploads",
    publicBasePath: "/uploads",
    backupRootPath: "storage/backups");

Бэкапы

Админка умеет создавать логические JSON-бэкапы и полные ZIP-бэкапы с медиа.