dimayakovlev.ru


Новая Twig функция svg_image() в Grav CMS

В версии системы управления контентом Grav v1.6.28 появилась новая Twig функция - svg_image(). В официальной версии справки Grav, доступной на момент публикации, описание функции отсутствует. Так как новая функция добавляет удобства при работе с Grav, считаю необходимым рассмотреть её, чтобы пользователи понимали и могли начать использовать новую встроенную Twig функцию в шаблонах и содержании страниц, не дожидаясь обновления справки.

Новая Twig функция svg_image() портирована из Grav v1.7 (была добавлена в Grav v1.7.0-rc.16) и предназначена для встраивания SVG файлов в HTML код страницы. Для того, чтобы понять, как работает функция, потребуется обратиться к изучению исходного кода /system/src/Grav/Common/Twig/TwigExtension.php.

В текущей версиии функция svg_image() принимает два обязательные параметра строкового типа:

  • путь к SVG файлу;
  • строку с перечисление CSS классов, добавляемых ко встраиваемому SVG коду.
{{ svg_image('/user/pages/page-with-svg/image.svg', 'white big') }}

В результате в код страницы будет встроен SVG код из файла /user/pages/page-with-svg/image.svg, к нему будут добавлены классы white и big.

Новая функция расширяет стандартные возможности Grav при использовании SVG, однако в текущей версии обладает следующими особенностями, которые надо учитывать пользователю:

  • функция обрабатывает пути к файлам относительно корня системы, а не относительно страницы, как в случае подключения файлов по ссылке. То есть, если встраиваемый файл находится в директории страницы page-with-svg в которой он подключается, то вместо image.svg должен был указан путь /user/pages/page-with-svg/image.svg. При этом путь к файлу обрабатывается методом Utils::fullPath(), поэтому файл может находиться в потоке Grav. Например, файл /user/images/image.svg может включаться функцией svg_image(), используя путь image://image.svg;
  • второй параметр функции обязателен, даже если нет необходимости добавления классов для стилизации. То есть, функция всегда должна вызываться с двумя параметрами, при этом, даже если второй параметр передаёт пустую строку, ко встраиваемому SVG будет автоматически добавлен CSS класс inline-block.

Если в вашей теме оформления или в контенте веб-сайта используются изображения в формате SVG и не требуется сохранение обратной совместимости с младшими версиями Grav, можете смело встраивать их новой функцией svg_image().