DS-767 Remove usage of image component from card

[MarcinMr]

Jira

https://pegadigitalit.atlassian.net/browse/DS-767

Summary

Support for image element was added.

Details

• Support for the Image Element is added,
• Backwards compatibility with the Image Component
• Card schema was updated to point to the Image Element instead of the Image Component,
• Image Component props were replaced with Image Element props in the pattern lab

How to test

Pull the branch. Check if by passing image element in the Card component to the media: { image: image

 {% set image %}
  {% include '@bolt-elements-image/image.twig' with {
    attributes: {
      alt: 'Image alt text',
      src: '/images/placeholders/landscape-16x9-mountains.jpg',
    },
  } only %}
{% endset %}

{% include '@bolt-components-card-replacement/card-replacement.twig' with {
  media: {
    image: image,
  },
  ...
  } only %}

renders the image element instead of the <bolt-image/> component

Release notes

When adding an image to the media inside Bolt Card component, please use a renderable image element for media.image instead of structured data.

[colbytcook]

@MarcinMr disregard the previous comment, for some reason when i pulled the branch it was out of date. Everything is looking correct now.

[MarcinMr]

@remydenton

Thanks for explaining, this was my misunderstood. I updated the template and PL files.

I have one more question regarding _card-replacement-media.twig

On line 16 we check if the Card component has horizontal prop and then we update the props with the ratio and cover (this is for the deprecated).

On line 24 I tried to do the same for the image-element, Whenever the horizontal prop is true I wanted to update the image element with the prop background: true (needed for cropping Image Element when horizontal card is used)

But the terminal throws an error:

Seems like I can't use the merge filter on that object?

So whenever we want horizontal cards with image elements we need to add background: true to the image element include:

{% include '@bolt-elements-image/image.twig' with {
  background: true,
  attributes: {
    ...
  },
} only %}

Is there a way to do it in the template? Or adding the background prop directly to the image-element include is ok?

[MarcinMr]

@remydenton thanks for explaining. I updated the docs and the pattern lab, so right now there shouldn't be more examples like this:

media: {
  image: {
    src: '/path/to/image,

[remydenton]

Looking really good, just one final comment/question on the wording in the docs.