Изображения в Albireo CMS
Для загрузок файлов, например изображений, используется каталог uploads.
Загрузки через админ-панель
На странице «Images» можно загрузить один или несколько файлов, просто перетащив их мышкой в поле «drag». Файлы размещаются в указанном каталоге «Folder».
После загрузки, чтобы файлы появились в списке, следует обновить страницу (нажать F5).
Когда загружаются файлы изображений, а именно форматы jpg и png, то их можно автоматически конвертировать в современный webp. Для этого укажите желаемый размер по ширине и качество. Файл будет автоматически конвертирован по этим параметрам.
Загрузка по FTP
Для Albireo CMS не имеет значения как именно был загружен файл, поэтому вы можете их загрузить по FTP. Они сразу же появятся на странице «Images».
Просмотр изображений
Поскольку изображений может быть много, то все они выводятся только как имя файла. Чтобы их посмотреть, следует нажать на имя файла и откроется окно с этим изображением.
Если нужно посмотреть все изображения в каталоге, то следует нажать иконку . Откроется галерея этого каталога.
Адрес изображения
В Albireo CMS принято явно указывать адрес изображения. Если на него кликнуть, то в открывшемся окне будет поле с адресом — его нужно скопировать и вставить в файл страницы, там где оно будет использовано.
Если вы используете парсер TextSimple, то он поддерживает короткий URL:
Здесь // указывают на каталог «uploads». Если же нужно указать адрес относительно корня сайта, то можно использовать ##:
Изображение записи image-large
Есть несколько полей записи, которые предназначены именно для изображений.
Поле image-large содержит URL изображения записи. Чтобы его не указывать полностью, используется замена [UPLOADS_URL], которая указывает на URL каталога «uploads»:
image-large: [UPLOADS_URL]2024/code-profiling.webp
В поле image-large следует указывать большое изображение записи. Рекомендуется, чтобы это было 1200px по ширине и 628px по высоте — это рекомендации Facebook и Open Graph Protocol. Размер по ширине задаётся такой, чтобы он покрывал мобильные устройства, поэтому сейчас можно ориентироваться на минимальные 800x600px.
Поэтому при загрузке изображения лучше загрузить большее изображение, а потом на его основе сделать меньшее, чем наоборот, поскольку это сильно ухудшит качество.
Также следует заранее определиться где именно будет выводиться изображение. Если изображение будет в теле страницы, например в начале статьи, то лучше использовать минимальные 1200px, которые укладываются в максимальную ширину страницы в браузере.
Если же это изображение не на всю ширину, то лучше сразу подготовить его к 100% размеру отображения.
Изображение записи (поле image-large) также используется для создания миниатюр для архивных страницы (главная, рубрики, метки и т.п.). В них задан размер 800x600px, поэтому лучше, чтобы изображение было не менее этого размера.
Каталог изображений images-dir
С помощью поля images-dir можно указать на каталог, где могут хранится изображения для записи.
images-dir: [UPLOADS_URL]2024
После того, как это поле заполнено, оно будет использовано при редактировании файла в админ-панели. Для этого есть ссылка в правом нижнем углу «Images»:
Таким образом можно получить быстрый доступ к выбору изображений прямо со страницы редактирования.
Создание миниатюр
Для создания миниатюры используется функция hThumb(). В общем виде она используется так:
<?= hThumb('@UPLOADS_URL@2024/img.jpg', width: 900, attr: ['auto', 'alt/title'=>'Подсказка']) ?>
Она прописывается в том месте, где нужно вывести изображение в теле страницы. Функция на основе указанного файла создаст его webp-версию с заданными размерами и на выходе сформирует корректный тэг IMG.
В данном примере будет создан файл 2024/img@900-thumb.webp, где 900 — это ширина, а «-thumb» — суффикс чтобы отличать автоматически созданные файлы. Если этот файл удалить, то он будет опять создан функцией hThumb(). Если же файл уже существует, то функция просто отдаст готовый html-код.
Если у функции указан только один из итоговых размеров, то вторая сторона будет рассчитана автоматически для сохранения пропорции. Однако, можно указать две стороны, тогда изображение будет автоматически центрировано до указанных размеров.
<?= hThumb('@UPLOADS_URL@2024/img.jpg', width: 800, height: 600, attr: ['auto', 'alt/title'=>'Подсказка']) ?>
Использование лайтбокса glightbox
С помощью hThumb() удобно создавать лайтбоксы, где указывается только одно большое изображение. Для этого используйте такой вариант:
<?= hThumb('@UPLOADS_URL@2024/img.jpg', width: 800, height: 600, link: ['class' => 'glightbox', 'data-title'=>'Your title'], attr: ['auto', 'alt/title'=>'Подсказка']) ?>
Это создаст такой html-код:
<a href="https://путь-к-uploads/2024/img.webp" class="glightbox" data-title="Your title"><img src="https://путь-к-uploads/2024/img@800x600-thumb.webp" width="800" height="600" alt="Подсказка" title="Подсказка"></a>
Для того, чтобы ссылка сработала, следует включить glightbox:
use.glightbox: +
Формирование изображения с помощью hIMG()
Функция hIMG() помогает сформировать тэг IMG.
hIMG('@UPLOADS_URL@pages/file.jpg', ['width'=>'200', 'height'=>'100', 'alt'=>'text', 'title'=>'text', 'test']);
hIMG(UPLOADS_URL . 'pages/file.jpg', ['width'=>'200', 'height'=>'100', 'alt'=>'text', 'title'=>'text', 'test']);
hIMG('//pages/file.jpg', ['width'=>'200', 'height'=>'100', 'alt'=>'text', 'title'=>'text', 'test']);
эквивалентно:
<img src="путь-к-uploads/pages/file.jpg" width="200" height="100" alt="text" title="text" test="test">
Краткий формат:
hIMG('file.jpg', ['w'=>'200', 'h'=>'100', 'alt/title'=>'text']);
<img src="file.jpg" width="200" height="100" alt="text" title="text">
Если нужно вывести изображение записи, то можно указать его поле:
hIMG('[image-large]', ['alt/title'=>'text']);
Функция обратится к указанному полю записи и сформирует html-код IMG. Поле может быть произвольным:
test-image: [UPLOADS_URL]pages/file.jpg
...
hIMG('[test-image]', ['alt/title'=>'text']);
Лайтбокс glightbox без создания файла миниатюры
Для создания лайтбокса из изображения (то есть без создания файла миниатюры) нужно просто указать css-класс:
hIMG('//file.webp', ['alt/title'=>'подсказка'], link: '', linkClass: 'glightbox');
С TextSimple это может быть так:
!![подсказка](//file.webp width="300")
Конвертирование файлов в webp
Если вы загрузили файлы по FTP, то можно их все перекодировать в webp (исходные останутся без изменений). Для этого используется функция convertToWebp(). Создайте произвольную страницу и разместите в ней такой php-код:
pr(convertToWebp(UPLOADS_URL . 'gallery', quality: 95));
Параметр «quality» задаёт качество изображения (по умолчанию 85). Каталог задаётся как URL.
Функцияpr()— отладочная PHP-функция, которая выводит любое содержимое. В данном примере мы её используем для того, чтобы вывести в браузер результат работы функцииconvertToWebp().
Создание нового изображения с текстом
Можно создать новое изображение на основе существующего и добавить на него произвольный текст. Для этого используется функция createImageText().
В файле страницы разместите следующий код (тексты и имена файлов замените на свои):
createImageText(
# итоговый файл
result: UPLOADS_DIR . '2024/checkpoint-first.webp',
# текст, где // — это перенос строки
text: "Создание //нового //изображения //с текстом",
# исходное изображение
src: UPLOADS_DIR . 'backgrounds/47.webp',
# размер текста
sizeText: 70,
# цвет текста
colorText: 'F5F6FB',
# цвет тени текста
colorShadow: '48525B',
# путь к файлу шрифтов (см. uploads/fonts)
ttfFont: UPLOADS_DIR . 'fonts/RobotoCondensed-Regular.ttf',
# качество итогового изображения
quality: 85,
# автоматическое выравнивание текста по центру, может ошибаться, поэтому используйте пробелы в тексте
textAlign: true,
# создать файл, после создания, поставьте false
action: true
);
Соответственно в поле изображения записи нужно указать
image-large: [UPLOADS_URL]2024/checkpoint-first.webp
После того, как изображение создано, в функции укажите action: false, чтобы отключить её выполнение. Иначе каждый раз функция будет создавать новое изображение. То есть её нужно отключить после того, как вы подобрали подходящий фон и текст.
Учитывайте, что браузеры кэшируют старые изображения, поэтому при его подборе используйте не F5, а Ctrl+F5 для полной перезагрузки страницы.
Исходные изображения находятся в uploads/backgrounds. Сейчас это 115 абстрактных изображений размером 800x600px. Вы их можете посмотреть в галерее админ-панели.