home

В теме ELiS теперь можно задать фоновый рисунок

С появлением MacOS и Windows 11 можно ожидать моду на размытые фоны на весь экран (с использованием фильтра blur).

Теперь в ELiS можно также поставить картинку в качестве фона во всю страницу.

page_background_url.jpg

Как поставить фоновое изображение[править]

В поле field_config появился новый параметр pageBackgroundUrl. Вы можете установить изображение как на весь сайт на странице admin/config/content/elis, так и переопределить в какой-то папке в поле настроек стандартным для field_config способом.

Пример field_config:

{
"pageBackgroundUrl":"https://elis.psu.ru/sites/default/files/images/psu-fountain-blur.jpg"
}

Требование к изображению[править]

Есть простые рекомендации:

  • изображение должно быть достаточно большого размера, например 1920x1080, но можно и под 4K;
  • формат должен быть один из png, jpg, svg;
  • лучше, чтобы изображение было небольшим размером в 100-200 Кбайт для быстрой загрузки страницы, поэтому лучше использовать jpg с сильным сжатием;
  • изображение желательно размыть (наложить фильтр blur) и осветлить, чтобы темный текст поверх изображения был читаем.

Размытие и осветление изображения[править]

Есть два способа, один путем использования графического редактора, работающий во всех браузерах и второй с помощью CSS, работающий в Chrome и Safari на момент написания инструкции.

Размытие в графическом редакторе paint.net[править]

Откройте изображение в paint.net.

В меню выберите Эффекты -> Размытие -> Несфокусированность и установите радиус размытия около 20.

В панели "Слои" создайте новый слой, по умолчанию он будет выше фотографии.

Залейте новый слой белым цветом.

Двойным кликом по слою в панели "Слои" уменьшите непрозрачность слоя с 255 до, например, 200.

Сохраните результат в формате jpg с сильным уровнем сжатия, при котором артефакты сжатия еще не будет заметны, например со сжатием в 60%.

Размытие средствами CSS[править]

На странице admin/structure/block создайте блок с фильтром ввода FullHTML и разместите его в подвале (footer) сfqnf.

В блоке разместите подобный код, который сделает тоже самое, что описано в обработке изображения графическим редактором, но средствами CSS:

<style>
  body {
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(10px);
  }
</style>

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