Issue with accessing alt for image

Develop, Build & Integrate CMS Development
1

Hello,

I’m struggling to access the alt information for the image inside the files.
Here’s my markup:

<img class=“logo-blob” src=“{% image_src “client_logo”, label=“Client Logo”, src=”{{ get_asset_url(‘/xebia-theme/images/logo01.svg’) }}“, no_wrapper=True %}” alt=“”>

The place of the image is inside the files and it has alt attribute assigned. I’m really struggling to access this data. Does anybody can help, please?

Screenshot 2024-07-16 at 10.32.16.png
Screenshot 2024-07-16 at 10.32.16.png573×732 65.5 KB

2

Hi @RKrohne,

there are a few things you should consider:

  • {% image %} tags do not need to be placed inside an -tag
  • {{ get_asset_url }} won’t get you the alt-text since it’s providing only the URL
  • {{ get_asset_url }} won’t get you data from the file-manager unless you put the whole URL into it and - therefore make the get_asset_url more or less obsolete :wink:
  • {{ get_asset_url }} is used inside themes for theme files that are located inside the theme-folder

If you want to display a default image of a module, write your code like this:

{% module 'SOME-NAME' path="@hubspot/linked_image" img={"alt":module.image.alt, "src": module.image.src or get_asset_url("PATH-TO-IMAGE")}%}

My personal recommendation would be to create a custom module which gives you unlimited possibilites in terms of customization. This could be a great start:

{% if module.image.src %}
 <img src="{{ module.image.src }}" alt="{{ module.image.alt }}" class="customClass">
{% endif %}

best,

Anton

Moderator note: While this solution may not address the original poster’s specific situation, it could be helpful for other community members facing similar challenges.

3

Hello @Anton,

Thank yoy very much for your response. I was trying your solution in many different ways but I still cannot access the image data.
The best way to access data is through this line:

{{ content.widgets.client_logo }}

But I still don’t get the alt data:

 {body={src=https://697348.fs1.hubspotusercontent-na1.net/hubfs/697348/Anonymous%20Icon.svg}, css={}, child_css={}, id=client_logo, name=client_logo, type=image_src, order=8, smart_type=null, styles={}}