Работа с ресурсами. Управление картинками, документами на сайте

Смотреть видео

Управление ресурсами

Ресурс - это фото или документ, прикрепленный к некой сущности (по entityCode и itemID).
Компонент дает возможность вывести галерею ресурсов (фото или документы), возможность редактировать их и возможность загрузить новые ресурсы. 

Ресурсы крепятся к некоторым сущностям (entityCode). О том как получить ссылку на ресурс можно ознакомиться здесь, о том как загружать файл, когда задействовано диалоговое окно читать здесь

 


Вывод и функции зависят от 2 режимов: 
isSingle  - определяет будет ли привязываться 1 ресурс для данной сущности (например аватар человека) или целая коллекция ресурсов.
read/write - может ли пользователь управлять коллекцией ресурсов (загружать, редактировать, удалять) или нет.

Создание ресурса

1.Добавляем на страницу сниппет компонента:

<div class="as-resourceManager" data-code="{typeCode}" data-itemid="falcon-space--rabota-s-resursami"></div>

2. В меню "Компоненты" выбираем "Типы ресурсов", далее нажимаем кнопку "Добавить" и вводим код ресурса (имя).

Также здесь стоит упомянуть  и о загрузке файлов с drop областью и гибкой разметкой (загрузка файлов путем перетаскивания их на нужную область страницы сайта, а также без использования дополнительного диалогового окна). Сниппет компонента:

<div class="as-files" data-code="productImages" data-itemid="5" data-disabledeleteconfirm="1" data-successmsg=" "></div>

 

Настройка ресурса

   Код - код типа ресурса (используется в сниппете)

   Код объекта - код некоего объекта в системе (не привязан жестко к какой-то таблице).
   Не путайте код сущности (Товар) и код Типа ресурса (настройка как будет работать компонент).
   К одной сущности может быть в итоге привязано несколько типов ресурсов. 

   Роли на чтение - кто может просматривать картинки (через запятую без пробелов. Если указано all - то доступ имеют все. Если * - то только авторизованные пользователи).

   Роли на запись - Кто может загружать и редактировать записи (через запятую без пробелов. Если указано all - то доступ имеют все. Если * - то только авторизованные пользователи). Также о об установке прав доступа на менеджер ресурсов можно почитать здесь.

   Галка Одиночная картинка - если Да, то работаем только с 1 ресурсом для сущности.

   Галка Показывать настройки загрузки - отображать при Upload дополнительные опции загрузки (для картинок).

   Возможность загрузки - если Да, то можно будет загружать файлы (для ролей на загрузку).

   Показать сразу в полный размер - если Да, то в менеджер грузятся сразу полноразмерные картинки а не thumb.

   Загружать без трансформации (LoadWithoutTransform). Если да - то картинки не меняют размеров при загрузке.  Также эта настройка влияет на обработку имен файлов. Если она стоит Да, то имя файла никак не обрабатывается (через dbo.str_processURL для исключения различных спецзнаков и транслитерации).

   Показать галерею - если да, то можно будет просматривать список ресурсов.

   Максимальный размер файла в МБ - насколько большой файл можно загружать. Внимание! Есть системное ограничение на файлы в 12Мб.

   Фильтр для файлов - регулярное выражение на фильтрацию файлов (Regex). 

   Высота и ширина картинки - задает прямоугольник, в который должно быть вписано изображение.

   Высота и ширина миниатюры - задает прямоугольник, в который должно быть вписано thumb изображения.

   Отношение для обрезки - соотношение сторон для ручного обрезания фото (как загружать фото с обрезкой можно почитать здесь).

   Картинка по умолчанию - путь к фото, которое будет показываться когда нет элементов для отображения в менеджере. 

   Водяной знак - URL путь к картинке водяного знака (будет ставить посередине каждого изображения при Upload).
   Внимание! Не влияет при установке на уже ранее загруженные изображения. 

   Качество сохранения картинок - качество сохранения картинки от 10 до 100. 

   Добавлять поля к картинке (и миниатюре) при загрузке - при несовпадении пропорций и размеров картинка будет дополняться белыми полями. 

   Путь сохранения - указывается некий путь в /uploads к файлу или папке. Если папка, то в нее будет сохраняться файл со своим именем.
   Если файл - то имя файла будет жестко определено этим параметром. Например: если указали /docs, то сохранение файлов будет идти в /uploads/docs/

Дополнительные параметры сниппета ресурсов (as-resourceManager):

  • data-title="Товар 1" - задаем внешнюю подпись у картинки. Если не указано, то используется подпись, связанная с ресурсом (по умолчанию это имя файла).
    Это поле также используется в заголовке диалогового окна (при показе полноэкранной картинки). 
  • data-hideTitle="1"  - скрываем подпись у картинки (находится под картинкой).
  • data-hideLinks = "1" - скрываем ссылки в режиме редактирования.
  • data-link="/product/1" - если задана ссылка, то при клике на картинку идет переход по данной ссылке. Если нет ссылки - то показ полной картинки в диалоговом окне. 
  • data-carouselEnabled="1" - если указано 1, то при нажатии на картинку будет показываться слайдер из картинок в диалоговом окне. 
  • data-bigFirst="1" - если 1, то первая картинка в показе будет большой, а все остальные маленькие (например, для использования на странице товара).
  • data-compact="1" - если 1, то галерея картинок (или документов) будет показана в уменьшенном виде.
  • data-ultracompact="1" - если 1, то галерея картинок (или документов) будет показана в очень уменьшенном виде. Обычно используется для вывода в таблицах.
  • data-emptyText="Нет фото" - Если нет элементов, то будет показана эта надпись. Если пробел - то не выводится сообщение, что нет элементов.
  • data-uploadTitle - задает заголовок окна загрузки файлов.
  • data-hideEmpty - если равно 1 и совсем нет элементов, то всему компоненту ставится класс hide.
  • data-progressStyle - стилизация полоски прогресса - заменяет стилизацию в элементе .progress-bar. Пример: progress-bar-striped bg-success. https://getbootstrap.com/docs/4.0/components/progress/
  • data-immediateSelectFile="" - если 1, то при нажатии на кнопку Загрузить появляется модальное окно и автоматически нажимается кнопка Выбор файлов.
  • data-downloadArchive="1" - если 1, то будет кнопка скачивания всех файлов через упаковку в zip (обновление сентябрь 22). Аналогичная настройка есть у as-files.

Специальные настройки в /settings

  • "resource.blockExtensions", по умолчанию - ".js,.html,.htm,.asp,.php,.aspx" - файлы с какими разрешениями нельзя пропускать (иначе возникает риск атаки XSS - злоумышленник загружает файл со скриптами, а пользователь открывает его)
  • "resource.maxFilenameLength", по умолчанию "160", максимальная длина названия файла (у операционной системы сервера может быть ограничение на длину пути к файлу). 
  • "resource.disableProcessName", по умолчанию "0" - если 1, то имя файла не будет обрабатываться через dbo.[str_processURL] (по умолчанию имена файлов обрабатываются, чтобы в URL к файлу не было спецсимволов). 

 

Дополнительные действия после выполнения операции с ресурсами

Вы можете выполнить некоторые действия после загрузки (upload), удаления (delete) или обновления полей ресурса (edit). 
Для этого необходимо реализовать процедуры rs_{entityCode}_{action}_callback (редактировать их можно будет в управлении типами ресурсов). 
action - upload, delete, edit.
На вход принимает: typeCode(тип ресурса), itemID, resourceID (если загрузка нескольких файлов - то первый файл), username.
На выходе:

SELECT 1. ResultModel(Result, Msg, Actions). Actions позволяют сделать некоторые действия в браузере (например, обновить часть экрана). 

SELECT 2. Вызов внешних действий

Примечание

  1. Файлы хранятся в папке /uploads/rs/{entiyCode}/{itemID}
  2. Не путайте entityCode (код сущности, например product) и typeCode (настройки вывода компонента, например manageProdyctImages)
  3. Если необходимо проверить права доступа дополнительно (на основе itemID), то необходимо создать хранимую процедуру с именем rs_{entityCode}_hasAccess.
    На входе typeCode, username, itemID, right (read or write). На выходе - модель ResultModel (поля Result bit, Msg nvarchar(256)). Управление процедурой есть на странице управления компонентом.
  4. Для не картинок используются типовые иконки типов - pdf, excel, word, text и other. 
  5. Вы можете установить по умолчанию картинку для варианта, когда не загружено ресурсов.
    Для этого прописываем путь к картинке в параметре
    defaultImagePath для ResourceType.
  6. Вы можете обрезать картинки. Установите в пикселях для типов ресурсов Width и Height. Картинка в итоге впишется в этот прямоугольник по размерам и сохранится в jpg. 
  7. Для картинок также сохраняется thumbUrl. Его размеры управляются через тип ресурса - thumbWidth, thumbHeight.
    Для других типов в роли превью выступает значок типа файла. 
  8. Для получения URL картинки в SQL можно использовать функцию [dbo].[rs_resourceLink] (entityCode, itemID, isThumb)
Пример: 
SELECT [dbo].[rs_resourceLink] ('product', 1014, 0)

 Также по теме:

 

Возможные проблемы и их решения:

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK