Card component: development notes

Hey Lee, thanks for bringing this up, I tested this a bit further and noticed that what we currently have works fine as is, but there are some downsides, like the fact that you cannot pass the "media" field that easily and you need to get to the image src

So what I will do later on is to change the card component image handling a bit, so it can take both forms, image field in core or media field and you get a proper result, passing the image to the card_body is not optimal and shouldn't be the case.

The problem you are facing is due to the fact that you need to get to the src of the image you uploaded whether in your image field or media, for that you need to invoke file_url function. (I will update the README of the component itself and the documentation for better examples)

ie. for an image field: card_image_src: file_url(content.field_image[0]['#item'].entity.uri.value)

Will push a change so you can just pass content.field_media and such for an easier experience.

Attached a working example with this piece of code:

{% include 'radix:card' with {
  card_title_tag: 'h4',
  card_title: label,
  card_header: 'CARD HEADER',
  card_footer: 'The card footer',
  card_body_tag: 'div',
  card_body: 'This is the card body',
  card_text_tag: 'p',
  card_text: content.body,
  card_link_url: url,
  card_link_text: 'Read more...',
  card_border: false,
  card_utility_classes: ['col-4'],
  card_image_src: file_url(content.field_image[0]['#item'].entity.uri.value),
  card_image_cap: 'top',
  } %}

Note again, will update the README and the docs

Sohail, regrettably I can't match your results with regards to the Card card_image_src field. I can't get any Media image to work in that particular field.

Your example does nothing for me:
file_url(content.field_media_image[0]['#item'].entity.uri.value),

This version yields the following result:
file_url(content.field_media_image[0]['#media'].field_media_image.entity.uri.value
/sites/default/files/image.jpg

And this version yields the following:
content.field_media_image[0]['#media'].field_media_image.entity.uri.value
public://image.jpg

deleted

Hey Lee, I just pushed a fix for this so now you can just pass your field directly without the need to get the src of the image or the object and updated the README within the Card component and the docs here

Feel free to re-open if you find any breaking changes and thanks for your contribution

:( Some breakage has recently occurred to the Card component:

This breaks the site: card_text: content.body, whereas this works fine: card_text: content.body|default(),

Also, card_link_url is broken in that no URL renders. There's no <a href="/example"> in the web page source code.

This is the commit that breaks card_link_url.

My initial thought is because the include should really be an embed. It isn't such an easy edit to make however, without causing a hard crash.

Here's an explanation of how an embed differs from an include in a twig block.

This issue is blocking me at the moment, and I'm working on it.

Aha! I fixed card_link_url. I got card_link_url to work.

This is more of a documentation issue. The following is required in order to include a URL. If you carefully read the code, you can see this requirement.

Include this line in your template file:
button_html_tag: 'a',

What we can do just to make sure this works without the button_html_tag is to make sure if card_link_url exist, we use the a tag, I'll push a fix shortly

Pushed a possible improvement here: https://git.drupalcode.org/project/radix/-/commit/ea44976b59d6b7305e06c19950c222398d9e4862

Automatically closed - issue fixed for 2 weeks with no activity.