Фоновое изображение - новый модуль Drupal 8

1. TL; DR Представляем новый, простой в использовании модуль Drupal 8 для фоновых изображений: https://www.drupal.org/project/background_image...
2. Обязанность
3. юридические лица
4. кэширование
5. оптимизация
6. Предварительная загрузка изображения / цвета
7. наследуемости
8. растяжимость
9. Монтаж
10. Шаг 1: Начальная настройка
11. Шаг 2: Новый регион
12. Шаг 3: Разрешения
13. Шаг 4: Добавить блоки
14. Шаг 5: Добавить глобальное фоновое изображение
15. Шаг 6: Тест
16. Дорожная карта будущего

TL; DR

Представляем новый, простой в использовании модуль Drupal 8 для фоновых изображений: https://www.drupal.org/project/background_image

Если ваш сайт разработан с использованием фоновых изображений, то этот модуль для вас! Если вам нужна хирургическая реализация, которую могут реализовать только администраторы / разработчики или предоставить пользователям возможность прикреплять свои собственные фоновые изображения к сущностям, этот модуль поможет вам.

Если вы просто смотрите, как настроить этот модуль, вы можете перейти к Монтаж раздел.

Эта проблема

За последний месяц я пытался решить множество проблем, связанных с отображением предоставленного пользователем изображения (через пользовательский интерфейс Drupal) на визуализированной странице в виде background-image: url (...);) в Drupal 8 ,

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

Теперь вы можете подумать: «Отличный другой модуль, который делает то же самое, что и другой модуль, но лишь немного отличается». Вы бы были правы, но на самом деле это немного отличается от любой предыдущей реализации.

В Drupal 7 многие из «решений» были в основном ориентированы на использование пользовательских типов полей или форматеров полей. Для этого требовалось применить один и тот же тип настроек поля или средства форматирования к каждому отдельному объекту / пакету, для которого вам нужна эта функция. До сих пор требовалось согласованное внедрение во всех движущихся частях (именно поэтому пользовательская реализация часто была проще).

Решение в Drupal 8 теперь может быть реализовано совершенно другим способом. Тот, который облегчает процесс установки, а также предоставляет более удобный интерфейс для ваших пользователей.

Бэкэнд и внешние интерфейсы Tag1 являются одними из ведущих разработчиков кода в Drupal 8 во всем мире.

Обязанность

Я думаю, что одной из самых больших проблем во всей этой теме всегда было «Чья ответственность за обработку пользовательского интерфейса, а затем вывод указанного фонового изображения?» В прошлом никогда не было четкого определения того, относится ли эта ответственность конкретно к модулю или теме. Конечно, в Drupal 7 некоторые модули использовали поля, но часто вам все равно приходилось настраивать вывод (обычно в теме) с учетом ваших конкретных потребностей.

В Drupal 8 темы теперь имеют очень ограниченную «мощь» в том, в каких хуках и плагинах они действительно могут участвовать. Это по своей сути и значительно увеличивает ответственность за необходимость выделенного модуля для обработки всех тонкостей, необходимых для правильного отображения фонового изображения. предоставлено пользователем.

юридические лица

Drupal 8 принес много замечательных и замечательных вещей, наименьшее из которых - возможность создавать новые сущности (из коробки) очень простым в реализации способом. Нет необходимости зависеть от модуля contrib или разбираться со сложными схемами базы данных. Ядро просто обрабатывает большую часть того, что вам нужно, если вы просто настроите его правильно.

Этот модуль реализует действительно выделенный объект. Нет больше общих пользовательских «фоновых изображений» узлов пакета. Нет новых полей. Нет форматеров поля. Нет больше тратить драгоценное время.

Это основное различие является основной причиной создания совершенно нового модуля, а не попытки «портировать» существующий. Не берите в голову дополнительные унаследованные преимущества возможности делать такие вещи, как права доступа к объектам.

кэширование

Как упоминалось выше, часто в Drupal 7 реализовывать пользовательские решения было проще. Обычно это означало переход к теме и предварительную обработку того, что вам нужно. Однако прошли те времена, когда простые «хаки тем» на уровне препроцессора могли выполнять то, к чему они привыкли.

Многие из этих «более простых решений» в Drupal 7 просто и естественно сдерживаются столь необходимым и массовым улучшением слоя кеширования в Drupal 8. Таким образом, темы больше не могут внедрять фоновое изображение (на уровне страницы), просто извлекая значение поля изображения для объекта сущности (узла) текущей страницы. Кэш рендеринга просто «прилипнет» к любому значению изображения, которое было запрошено первым

Это может быть большой "ошибкой" для начинающих Drupal 8. Они не знают о мощном слое кэширования, который по умолчанию используется в Drupal. Точные причины, по которым это происходит, чрезвычайно сложны, но достаточно сказать: нет контекста для изображения конкретной сущности на уровне рендеринга страницы.

Конечно, можно просто добавить контекст кеша конкретной сущности на страницу, но тогда вы будете рендерить / кэшировать каждую отдельную сущность (вариант). Это нехорошее решение, и оно на самом деле побеждает всю цель (рендеринга) кеширования. Вот где реализация выделенной сущности в Drupal 8 чрезвычайно мощна: сущности также являются отдельным кешируемым объектом.

оптимизация

Еще одна прекрасная особенность Drupal 8 - два недавно добавленных модуля: точка остановки а также Адаптивное изображение , Я хотел воспользоваться обоими (не обязательно, но настоятельно рекомендуется) для дальнейшей оптимизации фонового изображения; особенно когда речь идет о 2х множителях для дисплеев сетчатки.

Тем не менее, в отношении background-image: url (...); будет означать, что будет необходимо создать собственный CSS для каждого изображения для учета реагирующих медиа-запросов. Генерация CSS в Drupal обычно представляет собой конкатенацию строк, но это множество строк, чтобы гарантировать, что все «просто правильно».

Срезать ... Веточка! Drupal 8 также уже поставляется с Twig, и это выглядело как естественный подход, когда нужно было генерировать множество правил без добавления требования препроцессора (что всегда было обсуждаемая тема ).

Примечание: если вы включите Усовершенствованная агрегация CSS / JS модуль, этот сгенерированный CSS также будет минимизирован, когда CSS сайта подвергается предварительной обработке.

Используя шаблон .css.twig, генерация каждого правила медиазапроса была на самом деле очень приятной для реализации:

{# Media Queries #} {% для медиа в media_queries%} @media {{media.query}} {. {{Background_image_class}} :: after {background-image: url ("{{media.url}}") ; }} {% endfor%}

Очевидно, что генерирование этого CSS каждый раз будет огромным расходом ресурсов, особенно когда изображение или его настройки меняются. Сначала я попытался использовать ядро ​​\ Drupal \ Core \ Asset \ AssetDumper. Казалось бы, сохранить его таким образом можно, но вскоре я понял, что для получения фактического имени файла CSS мне нужно было сгенерировать файл сразу. Это вызвало проблемы с ожиданием ответа начальной страницы (подумайте BigPipe).

Вместо этого я взял страницу из собственного сборника игр стилей изображений и решил сгенерировать этот CSS только по фактическому запросу ресурсов CSS из браузера. Если бы он на самом деле не существовал в указанном месте, он бы, и только тогда, сгенерировал бы его на лету.

В настоящее время этот сгенерированный CSS может быть восстановлен после перестройки кэша всего сайта. Есть планы оптимизировать это еще дальше, предоставляя способ административного интерфейса для очистки только этих сгенерированных файлов.

Предварительная загрузка изображения / цвета

Хотя медиа-запросы, безусловно, помогают уменьшить ненужную загрузку массивного изображения на маленьком устройстве, это не помогает с задержкой в ​​сети и, как представляется, FOUC , Эта проблема может быть еще более острой, когда на странице используется темное изображение / стиль и у вас белый фон, ожидающий загрузки изображения.

Такие сайты, как среднее использование различные техники оптимизировать отображение изображений. Одно из их решений легко реализуемо в Drupal, учитывая, что оно стандартно сочетается со стилями изображений: генерировать очень маленькую версию изображения, предварительно загрузить его а затем использовать его в качестве исходного фонового изображения. Поскольку основа стилей изображения использует \ Drupal \ Core \ ImageToolkit \ ImageToolkitInterface, мы также можем извлечь средний «цвет» изображения, изменив его размер до размера 1x1.

Это означает, что то, что визуально видит конечный пользователь, в зависимости от задержки в сети, выполняется очень прогрессивно:

• Средний цвет фона, который напоминает изображение
• Предварительная загрузка изображения (100 x 67) в низком качестве / размытое изображение
• Резервное (мобильное) изображение, нормальное качество
• Привет разрешение изображения

наследуемости

В зависимости от дизайна сайта часто возникает необходимость «наследовать» изображение или его настройки в зависимости от различных условий. Для некоторых сайтов (таких как этот) требуется «глобальное» фоновое изображение. Для других отдельные лица должны иметь свои собственные изображения / настройки (см. Различные сообщения в блоге здесь). Этот модуль поддерживает несколько «типов» фоновых изображений, даже более запланированных:

• Глобальный
• Entity Bundle
• сущность
• Посмотреть
• Маршруты или Пути (или оба, запланированные)

Типы фонового изображения выше перечислены в порядке их наследования. Каждое фоновое изображение предоставляет возможность полностью унаследовать или переопределить изображение или отдельные параметры. Это допускает истинную настройку без подхода «все или ничего» в предыдущих реализациях Drupal 7.

растяжимость

Иногда ваши конкретные «потребности» не удовлетворяются тем, что вы получаете «из коробки» модулем. В случае фонового изображения вам может понадобиться программно добавить дополнительную информацию к наложенному тексту.

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

<? php / ** * Реализует hook_background_image_text_build_alter (). * * {@inheritdoc} * / function MODULE_background_image_text_build_alter (массив и $ элемент, массив и $ context) {/ ** @var \ Drupal \ node \ NodeInterface $ entity * / $ entity = $ context ['entity']; / ** @var \ Drupal \ Core \ Datetime \ DateFormatterInterface $ date_formatter * / $ date_formatter = \ Drupal :: service ('date.formatter'); / ** @var \ Drupal \ Core \ Render \ RendererInterface $ renderer * / $ renderer = \ Drupal :: service ('renderer'); // Немедленно вернитесь, если это не запись в блоге. $ entity_type = $ entity? $ entity-> getEntityTypeId (): FALSE; $ bundle = $ entity? $ entity-> bundle (): FALSE; if (! $ entity || $ entity_type! == 'node' || $ bundle! == 'blog') {return; } // Извлекаем автора блога и время его создания. $ user = $ entity-> getOwner (); $ созданный = $ entity-> getCreatedTime (); // Получить изображение профиля пользователя, используя «компактный» режим просмотра. $ picture = \ Drupal :: entityTypeManager () -> getViewBuilder ('user') -> view ($ user, 'compact'); // Добавляем метаданные кеша к элементу. $ meta = BubbleableMetadata :: createFromRenderArray ($ element) -> merge (BubbleableMetadata :: createFromRenderArray ($ picture)); $ Мета-> applyTo ($ элемент); // Добавляем пользовательский "профиль". // Примечание: не рекомендуется использовать пользовательскую разметку, подобную этой, однако она обрабатывается // с помощью средства форматирования текста, а не как объект MarkupInterface, поэтому требуется необработанный HTML. $ element ['# text']. = '<div class = "user-profile">'; $ element ['# text']. = $ renderer-> render ($ picture); $ element ['# text']. = '<div>'; $ element ['# text']. = '<h3 class = "name">'. $ user-> get ('field_full_name') -> value. </ H3> '; $ element ['# text']. = '<h4 class = "title">'. $ user-> get ('field_job_title') -> value. </ H4> '; $ element ['# text']. = '<time class = "date" datetime = "'. $ date_formatter-> format ($ созданный, 'custom', 'c'). '">'. $ date_formatter-> format ($ созданный, 'пользовательский', 'F d, Y'). </ Время> '; $ element ['# text']. = '</ div> </ div>'; }

Монтаж

Вы можете скачать и установить этот модуль с https://www.drupal.org/project/background_image , После установки вам нужно будет выполнить несколько шагов, прежде чем он начнет работать.

Рекомендуемые модули:

Ниже приведен список дополнительных модулей, которые могут оказаться полезными при работе с этим модулем:

• Усовершенствованная агрегация CSS / JS - Полезно для минимизации сгенерированного CSS для каждого фонового изображения.
• ImageMagick - Полезно в тех случаях, когда ошибка памяти PHP ограничена из-за обработки больших изображений.
• Качество стиля изображения - Полезно для дальнейшей оптимизации качества стиля фоновой картинки предварительной загрузки (рекомендуется настраивать где-то около 30%)
• Оптимизация изображения - Полезно для дальнейшей оптимизации всех фоновых изображений (прогрессивная загрузка)
• Inline Entity Form - В настоящее время мягкая зависимость, если вы хотите встроить фоновое изображение формы в другие объекты.
• знак - Предоставляет способ просмотра, какие токены доступны для использования при добавлении наложенного текста для фонового изображения.

Примечание. Модуль «Фоновое изображение» просто обеспечивает «мускул» для обработки фоновых изображений для сайта. Хотя этот модуль генерирует CSS, он предназначен только для логики отображения / позиционирования самих фоновых изображений. На самом деле он не стилистически оформляет тему фонового изображения или других элементов вокруг него или внутри (например, наложение текста).

Примечание: все последующие административные снимки экрана будут использовать тему «Семь администраторов» (входит в состав ядра), а все внешние снимки экрана будут являться пользовательской подтемой темы. Drupal Bootstrap базовая тема.

Шаг 1: Начальная настройка

1. Перейдите в / admin / config / media / background_image / settings на вашем сайте и выберите, какие пакеты сущностей вы хотите включить для поддержки фоновых изображений:
   
   • Включить - Указывает, поддерживает ли данный конкретный пакет объектов фоновые изображения.
   • Внедрить - встраивает форму добавления / редактирования фонового изображения в форму добавления / редактирования конкретного набора объектов (в настоящее время требуется Inline Entity Form модуль, с планами по удалению этой мягкой зависимости в будущем). Раскрывающийся список рядом с ним указывает, к какой «группе» добавляется форма. Группа «По умолчанию» поместит ее внизу всей формы. «Расширенная» группа поместит ее в «расширенную» группу, которая присутствует на некоторых объектах, и некоторые темы могут переместить ее на боковую панель (как в «Семи»).
   • Требовать - явно требует изображения какого-то вида.
2. Нажмите Сохранить конфигурацию.

Шаг 2: Новый регион

Модуль Background Image автоматически и динамически создает выделенную область background_image во всех активных темах. Это означает, что вам не нужно добавлять его в файл .info.yml вашей темы.

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

Как только вы определите, где вы хотите разместить этот регион, измените файл page.html.twig вашей темы, включив в него следующий код, чтобы он действительно мог отображать этот регион:

{# Фоновое изображение #} {% block background_image%} {% if page.background_image%} {{page.background_image}} {% endif%} {% endblock%}

Следующий код из кастома Drupal Bootstrap подтема и может дать представление о том, где этот регион должен быть размещен:

{# / ** * @file * page.html.twig * ... * / #} {% set container = theme.settings.fluid_container? 'container-liquid': 'container'%} {# Navbar #} {% if page.navigation или page.navigation_collapsible%} {% block navbar%} {% set navbar_classes = ['navbar', theme.settings.navbar_inverse? 'navbar-inverse': 'navbar-default', theme.settings.navbar_position? 'navbar-' ~ theme.settings.navbar_position | clean_class: container,]%} <header {{navbar_attributes.addClass (navbar_classes)}} id = "navbar" role = "banner"> {%, если не navbar_attributes.hasClass (контейнер )%} <div class = "{{container}}"> {% endif%} <div class = "navbar-header"> {{page.navigation}} {# .btn-navbar используется в качестве переключателя для свернутого содержимое панели навигации #} {% if page.navigation_collapsible%} <button type = "button" class = "navbar-toggle" data-toggle = "collapse" data-target = "# navbar-collapse"> <span class = "sr -only "> {{'Переключить навигацию' | t}} </ span> <span class =" icon-bar "> </ span> <span class =" icon-bar "> </ span> <span class = "icon-bar"> </ span> </ button> {% endif%} </ div> {# Навигация (складная) #} {% if page.navigation_collapsible%} <div id = "navbar-collapse" class = "navbar-collapse collapse"> {{page.navigation_collapsible}} </ div> {% endif%} {%, если не navbar_attributes.hasClass (container)%} </ div> {% endif%} </ header> {% endblock%} {% endif%} {# Фоновое изображение #} {% blo ck background_image -%} {% - if page.background_image -%} {{- page.background_image -}} {% - endif -%} {% - endblock%} {# Main #} {% block main%} <div role = "main" class = "main-container {{container}} js-quickedit-main-content"> <div class = "row"> {# Header #} {% if page.header%} {% заголовок блока %} <div class = "col-sm-12" role = "heading"> {{page.header}} </ div> {% endblock%} {% endif%} {# Sidebar First #} {% if page .sidebar_first%} {% block sidebar_first%} <aside class = "col-sm-3" role = "лишний"> {{page.sidebar_first}} </ aside> {% endblock%} {% endif%} {# Content #} {% set content_classes = [page.sidebar_first и page.sidebar_second? 'col-sm-6', page.sidebar_first и page.sidebar_second пусто? 'col-sm-9', page.sidebar_second и page.sidebar_first пусто? 'col-sm-9', page.sidebar_first пуст, а page.sidebar_second пуст? 'col-sm-12']%} <section {{content_attributes.addClass (content_classes)}}>> {# Highlighted #} {% if page.highlighted%} {% выделенный блок%} <div class = "selected"> {{page.highlighted}} </ div> {% endblock%} {% endif%} {# Help #} {% if page.help%} {% block help%} {{page.help}} {% endblock %} {% endif%} {# Content #} {% block content%} <a id="main-content"> </a> {{page.content}} {% endblock%} </ section> {# Sidebar Second #} {% if page.sidebar_second%} {% block sidebar_second%} <aside class = "col-sm-3" role = "лишний"> {{page.sidebar_second}} </ aside> {% endblock% } {% endif%} </ div> </ div> {% endblock%} {% if page.footer%} {% block footer%} <footer class = "footer {{container}}" role = "contentinfo" > {{page.footer}} </ footer> {% endblock%} {% endif%}

Для возможности настройки модуль не предполагает, что фоновое изображение всегда будет отображаться в предоставленной области background_image или в каком порядке эти элементы отображаются.

Вместо этого он предоставляет несколько блоков на основе фонового изображения, которые позволяют вам контролировать то, что отображается и где. Цель сделать это двоякая:

1. Это позволяет каждому элементу фонового изображения кэшироваться независимо, используя различные контексты кэширования, которые предоставляет этот модуль. Это особенно полезно, если вы «наследуете», скажем, фоновое изображение, но изменился только наложенный текст. Он не делает недействительным все фоновое изображение и вынуждает генерировать новый файл CSS с этим изображением.
2. Будущее. Со временем будут добавлены новые функции, такие как предоставление кредита / атрибуции для изображения (которое запланировано), и предоставление отдельных блоков для каждого из этих элементов рендеринга позволит таким функциям добавляться обратно совместимым образом без «повреждения» существующие сайты.

После того, как вы добавили регион в шаблон page.html.twig, вам необходимо очистить кеш. Вы можете использовать drush cr или перейти к / admin / config / development / performance и нажать Очистить все кэши:

Шаг 3: Разрешения

Перейдите в / admin / people / permissions и настройте следующие разрешения:

Шаг 4: Добавить блоки

1. Перейдите в / admin / structure / block на вашем сайте и нажмите «Поместить блок» для области «Фоновое изображение»
   
2. Добавьте фоновое изображение и фоновое изображение - текстовые блоки:
   

   Предупреждение: не устанавливайте какие-либо настройки «Видимость», если вы не знаете, что делаете. Модуль Background Image автоматически определяет #access блока, основываясь на том, есть ли фоновое изображение для текущего запроса или нет.

   
   

3. Убедитесь, что блоки были добавлены в область background_image (должно выглядеть примерно так):
   

   Примечание: из-за того, как работает установка блоков в конфигурации ядра, этот модуль не может обеспечить «размещение блоков по умолчанию»; Вы должны разместить эти блоки самостоятельно, чтобы модуль работал правильно.

Шаг 5: Добавить глобальное фоновое изображение

1. Перейдите в / admin / config / media / background_image на своем сайте и нажмите Добавить фоновое изображение:
   
2. Введите метку (например, «Весь сайт») для типа фона «Глобальный» и нажмите «Продолжить»:
   
3. Выберите фоновое изображение (я собираюсь использовать https://unsplash.com/photos/JgOeRuGD_Y4 для этого примера):
   
4. По умолчанию модуль «Фоновое изображение» определяет, является ли изображение «темным», на основании цвета фона предварительной загрузки, который рассчитывается по среднему цвету при изменении размера изображения 1x1. Вы можете переопределить эти настройки по умолчанию здесь:
   
5. Полная настройка просмотра:
   
6. Настройки размытия:
   

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

   • Прокрутка - текущая полоса прокрутки определяет радиус размытия (не превышая максимальный радиус размытия). Это означает, что когда полоса прокрутки равна 0, размытие равно 0.
   • Прокрутка (Full Viewport) - если включена настройка «Full Viewport», то это будет вести себя так, как описано выше. Если это не так, то он будет вести себя так, как будто выбрана опция «Постоянный».
7. Наложение текста:
   

   Это форматированный текст, позволяющий использовать различные токены. Вы можете настроить это по своему усмотрению, но на следующем снимке экрана показано, как настроено глобальное фоновое изображение этого сайта, чтобы дать пример того, насколько легко и эффективно это использовать с токенами:

   <h2> [node: field_lead] </ h2> <h1> [node: title] [user: field_full_name] [view: title] </ h1>

   Первая строка показывает настраиваемое поле «лидер», которое находится в каждом узле узла на нашем сайте. Это просто позволяет нам показывать больше словоблудия, которое не влияет на заголовок узла. Вторая строка на самом деле является заголовком страницы для различных типов объектов (поэтому мы можем отображать вне основного контейнера содержимого). По умолчанию, если токен не заменяется реальным значением, он удаляется.

   Это позволяет нам использовать несколько токенов в зависимости от того, какой тип объекта просматривается. Таким образом, последующим «дочерним» фоновым изображениям на самом деле не нужно переопределять это значение, поскольку оно автоматически наследует это значение из глобального фонового изображения и отображает правильный заголовок.

   Примечание: чтобы пользователи (или вы сами) могли просматривать доступные токены (ссылка, отображающая диалоговое окно, как на скриншоте), вам необходимо установить знак Модуль Contribu.

8. После того, как вы настроили глобальное фоновое изображение, нажмите «Сохранить».
9. Вы будете перенаправлены обратно на страницу со списком фоновых изображений (/ admin / config / media / background_image) и увидите только что созданное фоновое изображение «Global: Site wide»:
   

Шаг 6: Тест

Перейдите на свою домашнюю страницу, вы должны увидеть что-то вроде следующего:

Без включенного параметра «Полный видовой экран» (размыто):

При включенной настройке «Полный видовой экран»:

Напоминание: этот модуль не генерирует стилистический CSS. Ваша подтема отвечает за стилизацию разных цветов в зависимости от того, является ли изображение «темным» или нет. Следующие скриншоты должны доказать, что это «предполагаемое поведение» (без стили подтем). Пожалуйста, не открывайте вопрос о том, что он «сломан»; это не.

Марк Карвер (Mark Carver), сопровождающий Drupal Bootstrap и старший инженер по производительности Frontend, создает поддерживаемые и отзывчивые внешние интерфейсы Drupal для клиентов Tag1.

Дорожная карта будущего

Я очень надеюсь, что если вы сделали это так далеко, вы так же взволнованы этим модулем, как и я! Я знаю, что это не охватывает каждый случай использования, и, вероятно, есть несколько вещей, которые все еще нуждаются в некоторой настройке, как только он пережил свой дебют в реальном мире. Просто знайте, что это только начало.

Я уже упомянул несколько запланированных функций, которые войдут в модуль, но вот еще больше идей, которые были в моей голове, пока я работал над этим:

• Разъедините мягкую зависимость от Inline Entity Form модуль для встраивания формы фонового изображения в другие объекты.
• Больше конфигурации на основе пользовательского интерфейса. В настоящее время существует много жестко заданных значений конфигурации, но все они разработаны таким образом, чтобы можно было легко настраивать каждое значение конфигурации из пользовательского интерфейса (или вручную в файле конфигурации). Такие параметры, как определение резервных и предзагрузочных стилей изображения, какую конфигурацию адаптивного изображения использовать, правила медиа-запросов Retina, базовый класс CSS для использования и т. Д.
• Маршруты и / или типы фонового изображения на основе пути
• Возможность кредитования / атрибута владельца фонового изображения.
• Новые эффекты / фильтры изображения (например, эффект размытия при прокрутке, который вы видите здесь).
• Интеграция медиа API (все еще ждет инициатива приземлиться в ядре стабильно).
• И больше... отправить запрос на добавление функции !