Background Component Image Update

[colbytcook]

Summary

Updated the Background Component to use the Image Element instead of the Image Component

Details

In order to allow for a more performant Hero, we need to remove all the Image Component. On of the steps to do that is to replace the Image Element from the Background Component so we can leverage more perforrmant methods (for example, appending loading="eager" to all images in a hero).

How to test

• Review the code and pull down the branch.
• Review the Bolt Background, and the Bolt Band docs.
• Review the docs "Pages" folder

Release notes

The Background Component now leverages the Image Element instead of the Image Component. This is a step to create a more performant Hero

[remydenton]

This is nicely backwards-compatible, but what's the plan going forward? As it stands now, you have to pass data as expected by the deprecated image component. There's no way to do it "right" even if you know better. Annoying at best, but this may come back to bite us when we try to replace other image components with image elements in Drupal.

Here's a proposal-- what if within if item.pattern == image, we have a second check: if there's either a src or srcset prop, then we assume that the deprecated image component pattern is being used (since those props exist in image component but not image element). However, if neither of those props is present, we assume the user is actually passing data that's intended to be rendered with the image element.

Thoughts? We can handle this in a follow up PR.

[remydenton]

Following up on this, I realized we already have this logic at the bottom of this control statement:

{% elseif (item is iterable) %}
  <div class="{{ 'c-bolt-background__item' }}">
    {{ item }}
  </div>
{% else %}
  {{ item }}
{% endif %}

That allows you to just pass an already rendered (or renderable) item without resorting to the horrible pattern_template() design pattern. That is the preferred option for anyone who wants to use this pattern correctly. Our schema docs need some updates, but otherwise this is fine as-is.