Новые возможности Albireo CMS
Сделал несколько новых интересных возможностей для Albireo CMS. Первая — это загрузка изображений прямо в текстовый редактор. Вторая — это поддержка dark-тем.
Загрузка изображений
В Albireo CMS теперь можно загружать изображения прямо в текстовый редактор. Это очень похоже на работу с обычными текстовыми программами, вроде Libre Office. Просто перетаскиваешь мышкой файл в текстовый редактор. Albireo CMS спросит какой должна быть итоговая ширина изображения и его качество. После этого система сама загрузит файл на сервер, повернёт его согласно exif (актуально для фотографий), уменьшит размер до заданного и преобразует в формат webp. Итоговый файл будет добавлен в позицию курсора в виде MarkDown/TextSimple кода:
Обычно в других системах вначале нужно отдельно загрузить файл (медиатека, галерея и т.п.), а уже потом использовать его адрес. Есть системы, точнее текстовые редакторы, вроде TinyMCE, где также можно с помощью отдельных плагинов сделать возможность загружать изображения на сервер. Но это визуальные редакторы, а в Albireo CMS — это самый обычный TEXTAREA.
Другая сложность такой функциональности — это неизвестный путь на сервере, где должен оказаться файл. Я не знаю как этот вопрос решается в других системах, но если следовать документации, то загрузка предполагает в какой-то единый предопределенный каталог.
Например в MaxSite CMS этот вопрос я решил следующим образом. Система автоматом создаёт для каждой странице отдельный каталог в uploads с привязкой с id записи. Под полем записи есть блок изображений и поле загрузки. Когда файл загружается, то он автоматом попадает именно в свой предопределенный каталог.
В Albireo CMS нет уникальных id, а адрес может произвольно меняться, поэтому здесь я просто придумал, что будет отдельное поле записи, где указывается адрес желаемого каталога, например:
images-dir: [UPLOADS_URL]2025
Таким образом система будет считать, что нужно загрузить файл в этот каталог. Если каталога нет, то он будет автоматом создан. Всё просто.
Поддержка dark-тем
Эта возможность напрямую связана с развитием Berry CSS. В будущей версии будет возможность использовать .dark для переключения на темную тему оформления. Пока ещё версия в процессе тестирования, но я решил её выложить на этом сайте.
Чтобы понять как это работает, обратите внимание, что в сайдбаре появился выпадающий список с готовыми темами оформления, а также кнопочка — это переключалка light/dark темы.
Само переключение реализовано на JavaScript + Alpine.JS. В релизе Berry CSS будут примеры кода. Мне хотелось бы сделать так, чтобы само переключение происходило как можно плавней и без перезагрузки страницы. Технически это связано с подгрузкой css-файла, что может приводить к задержками. Для примера сайт itc.ua.
Состояние сохраняется в LocalStorage, поэтому нужно сделать так, чтобы код сработал как можно раньше, иначе будет так, что вначале мелькнёт тема по умолчанию, а потом уже темная. Такие сайты тоже встречаются.
В Berry CSS всё работает на css-переменных, поэтому настройка темной темы происходит достаточно просто. Более того, поскольку я использую Material Design, где цвета задаются в виде классов primary, то сразу же появилась возможность подгружать и произвольную цветовую тему оформления. Таким образом у посетителя сайта есть возможность выбрать цветовую тему и её обычный или dark-вариант.
Сейчас dark-классы прописаны сразу для всего сайта, поэтому не учитываются особенности яркости цветов. Пока это тестовый вариант, но вообще я думаю, что более правильно было бы задать dark-тему прямо в файле цветовой темы. Придумывать дизайн темной темы для меня не очень привычно, поэтому я либо сам с этим повожусь, либо предоставлю типовой вариант, как сейчас, а кому нужно, тот подшаманит цвет уже под своё видение.