РуководстваОснова Falcon SpaceОсновные компонентыВозможностиКоммуникация пользователейДизайн, стилизация, юзабилитиЛендингиУниверсальный APIИнтеграцииКаталогиНавигацияДокументыДополнительные компонентыПродвижение, SEOСистемные моментыСистемное администрированиеHOWTOТаблицыФормыПоля формыЗагрузка файлов, картинок
Работа с ресурсами. Загрузка картинок, файловУправление файлами на сервере (файловый менеджер)Загрузка на форме текстовых файлов и обработка их в процедуре SaveItemКак добавить в колонку таблицы управление файламиЗагрузка файлов с drop областью и гибкой разметкой (компонент as-files)Как приводить картинки к заданным размерам при загрузке на сайтИмпорт и парсинг файла CSVЧем отличается код типа ресурса от типа объектаКак получить ссылку на ресурсКак установить права доступа на менеджер ресурсов?Как загружать фото с обрезкой Как увеличить размер подгружаемых файлов (как загружать большие файлы)Передача файлов по FTPКак искать битые ресурсы, картинкиПодбор оптимальных параметров менеджера ресурсовПодгружаемые файлыМассовая загрузка картинок в систему ресурсовНе грузится файл через менеджер ресурсовФайлы загружаются на сервер, но при скачивании выходит ошибка 404.3 (загрузка ODT, Проблема с MIME типами)Поддержка Webp формата для оптимизации картинокМассовая оптимизация картинок в менеджерах ресурсовНе выводятся картинки на сайте (401, 403 ошибка при загрузке картинок)Как установить JS callback после выполнения crop картинкиНе отображается картинка юзера справа вверхуКак изменить текст "Нет файлов" в as-resourceManager?Обработка спецсимволов в названии файлов Как поставить водяной знак на картинку при загрузкеКак оптимизировать качество картинок при загрузке на сайтКак создавать для загружаемой картинки копии с разными размерамиКак загружать файл, когда задействовано диалоговое окноКак загрузить файл по конкретному путиКак сделать возможность грузить только 1 фотоКак поставить фильтр на типы файлов и ограничить форматы загрузки картинок?Как обработать событие после удаления или добавления файлов?
Не выводятся картинки в менеджере ресурсов. Что делать?Как вставить менеджер ресурсов в форму с заданным itemID
HOWTO SQLHOWTO JSHOWTO ВерсткаРешение проблем
Выгода от использования Falcon Space
В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Поддержка Webp формата для оптимизации картинок
Создание картинок webp через менеджер ресурсов
В системе есть следующие настройки (в /settings):
- webpQuality - число от 0 до 100. Качество картинки при конвертации в webp формат. Если указано больше 0, то при загрузке картинок через менеджер ресурсов будут создаваться копии картинок в webp формате с тем же именем. Если 0, то конвертация не будет произведена.
- webpLossy - если 1, то будет применяться формат с потерей качества (но сжатие будет очень сильным).
- imageFormatsForWebpContert - список расширений, для который будет срабатывать конвертация ресурсов в webp, по умолчанию - .jpg,.jpeg,.gif,.png,.tiff
Конвертация существующих картинок
Также есть внешнее действие по конвертации картинки в webp формат.
Type=webp
Параметры:
- sourcePath - исходный файл.
- destPath - конечный файл
- quality - от 0 до 100. Качество выходного файлла
- lossy - если 1, то сжатие с потерей качества.
Пример:
select 'webp' type, '/uploads/4.jpg' sourcePath, '/uploads/_111.webp' destPath ,
1 lossy, 10 quality Как выводить картинки на странице с webp
Для этого используем следующую разметку:
<picture>
<source srcset="opera.webp" type="image/webp" loading="lazy" alt="">
<img src="opera.jpg" alt="The Oslo Opera House">
</picture>
Т.е. выводим картинку webp и дополнительную картинку jpg (на случай если браузер не поддерживает webp).
Функция [dbo].[rs_webpImage] для генерации такой разметки для определенного ResourceID: https://pastebin.com/cNfHJki2
Пример вызова функции:
select [dbo].[rs_webpImage] (60, 1, 'alt text', 'class1', '200px', '100px')Отображение webp на сайте
Чтобы сайт корректно показывал webp картинки, необходимо сделать настройки в IIS: WebServer / MIME Types / Add / расширение .webp и тип image/webp
Детально: https://manage.accuwebhosting.com/knowledgebase/4818/How-to-Enable-WebP-MIME-Type-on-IIS-.html
Дополнительные ссылки
Как указать множество картинок для разных разрешений
https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Про использование webp в целом
https://pr-cy.ru/news/p/7417-kak-ispolzovat-webp-dlya-optimizatsii-kartinok-na-sayte
Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Google поиск по нашей документации
Нужна бесплатная консультация?
Планируете делать веб-проект?
- Шаг 1. Создать концепт проекта
- Шаг 2. Получить оценку бюджета (КП)
- Шаг 3. Заключить договор
- Шаг 4. Создать совместно техническое задание
- Шаг 5. Поэтапная реализация проекта