WIP: Unable to Set Custom Alt Text for Images Inside Components

[RicoGL]

Summary
Images placed inside components don’t allow setting a custom alt text. In contrast, images placed directly on a page template do have the “Custom alt text” field available.

Steps to Reproduce

• Create a component that includes an image element.
• Use the component on a page.
• Compare with an image placed directly on a page template.

Expected Behavior
Each image, regardless of whether it’s in a component or directly on a page, should allow setting a custom alt text. This ensures proper accessibility and SEO for each instance.

Actual Behavior
The “Custom alt text” field is missing when the image is inside a component. The attached screenshots illustrate the difference:

Screenshot 1: Image on a page template (Custom alt text available)

Screenshot 2: Image inside a component (Custom alt text missing)

Impact
This prevents defining context-specific alt text for images reused via components, limiting accessibility compliance and SEO optimization.

[Borlabs-Ben]

Not tested, just an idea: use Attributes, add an alt attribute, and bind it to a property.

[RicoGL]

Yes! This solution is working!

[Borlabs-Ben]

I’m glad to hear that

[Matej]

Hi @RicoGL,

I just tested this locally and it seems to work for me. Can you check with Bricks 2.3.1 version just in case if That issue was solved in the latest update?

I tested just like you see in the image above and the custom alt attribute is also showing on the frontend.

If it’s still not working, can you please copy and paste the component here to the forum, and I can then test with your component as well?

Thank you,
Matej

[RicoGL]

I checked in Bricks 2.3.1, but I still have the same issue.

Here is the component I created:

{
  "components": [
    {
      "id": "nbfqog",
      "category": "",
      "desc": "",
      "elements": [
        {
          "id": "nbfqog",
          "name": "div",
          "parent": 0,
          "children": [
            "vdeeuf",
            "lqnpgz"
          ],
          "settings": {
            "tag": "article",
            "_cssGlobalClasses": [
              "cqzbiu"
            ]
          },
          "label": "Article"
        },
        {
          "id": "vdeeuf",
          "name": "div",
          "parent": "nbfqog",
          "children": [
            "ztqdso"
          ],
          "settings": {
            "_cssGlobalClasses": [
              "lwscoi"
            ]
          }
        },
        {
          "id": "ztqdso",
          "name": "image",
          "parent": "vdeeuf",
          "children": [],
          "settings": {
            "_cssGlobalClasses": [
              "pawjcq"
            ]
          }
        },
        {
          "id": "lqnpgz",
          "name": "div",
          "parent": "nbfqog",
          "children": [
            "scnbne",
            "nrdvsz"
          ],
          "settings": {
            "_cssGlobalClasses": [
              "cxcvwk"
            ]
          }
        },
        {
          "id": "scnbne",
          "name": "div",
          "parent": "lqnpgz",
          "children": [
            "ifisdy",
            "kdalfa",
            "ifujpm"
          ],
          "settings": {
            "_cssGlobalClasses": [
              "kyqevv"
            ]
          }
        },
        {
          "id": "ifisdy",
          "name": "text-basic",
          "parent": "scnbne",
          "children": [],
          "settings": {
            "_cssGlobalClasses": [
              "nxbqfk"
            ]
          }
        },
        {
          "id": "kdalfa",
          "name": "heading",
          "parent": "scnbne",
          "children": [],
          "settings": {
            "tag": "h3",
            "_cssGlobalClasses": [
              "puaisw"
            ],
            "_typography": {
              "font-size": "var(--text-m)"
            }
          }
        },
        {
          "id": "nrdvsz",
          "name": "text-link",
          "parent": "lqnpgz",
          "children": [],
          "settings": {
            "_cssGlobalClasses": [
              "idqjrm"
            ],
            "icon": {
              "library": "svg",
              "svg": {
                "id": 141,
                "filename": "icon-chevron-right.svg",
                "url": "#"
              }
            }
          },
          "themeStyles": []
        },
        {
          "id": "ifujpm",
          "name": "text",
          "parent": "scnbne",
          "children": [],
          "settings": {
            "_cssGlobalClasses": [
              "arlgrq"
            ]
          }
        }
      ],
      "properties": [
        {
          "label": "Direction",
          "type": "class",
          "group": "jaxaeo",
          "options": [
            {
              "id": "rajjwl",
              "label": "Vertical",
              "value": ""
            },
            {
              "id": "rjtsdm",
              "label": "Horizontal",
              "value": [
                "qnphdi"
              ]
            }
          ],
          "id": "rxrgwv",
          "default": [
            "rajjwl"
          ],
          "connections": {
            "nbfqog": [
              "_cssGlobalClasses"
            ]
          }
        },
        {
          "label": "Background color",
          "type": "class",
          "group": "jaxaeo",
          "id": "orpign",
          "connections": {
            "nbfqog": [
              "_cssGlobalClasses"
            ]
          }
        },
        {
          "label": "Query loop",
          "type": "toggle",
          "group": "aqsbby",
          "id": "sxcsev",
          "connections": {
            "nbfqog": [
              "hasLoop"
            ]
          }
        },
        {
          "label": "Query",
          "type": "query",
          "group": "aqsbby",
          "id": "zbxzwr",
          "connections": {
            "nbfqog": [
              "query"
            ]
          }
        },
        {
          "label": "Hide image",
          "type": "toggle",
          "group": "aqsbby",
          "id": "ypgpnw",
          "connections": {
            "vdeeuf": [
              "_hideElementBuilder",
              "_hideElementFrontend"
            ]
          }
        },
        {
          "label": "Image",
          "type": "image",
          "group": "aqsbby",
          "id": "juwatb",
          "connections": {
            "ztqdso": [
              "image"
            ]
          }
        },
        {
          "label": "Label",
          "type": "text",
          "group": "aqsbby",
          "id": "qvfuid",
          "connections": {
            "ifisdy": [
              "text"
            ]
          }
        },
        {
          "label": "Title",
          "type": "text",
          "group": "aqsbby",
          "id": "wbswyn",
          "connections": {
            "kdalfa": [
              "text"
            ]
          }
        },
        {
          "label": "Description",
          "type": "editor",
          "group": "aqsbby",
          "id": "pylmip",
          "connections": {
            "ifujpm": [
              "text"
            ]
          }
        },
        {
          "label": "Button text",
          "type": "text",
          "group": "aqsbby",
          "id": "ktwxyn",
          "connections": {
            "nrdvsz": [
              "text"
            ]
          }
        },
        {
          "label": "Link",
          "type": "link",
          "group": "aqsbby",
          "id": "dzmrtt",
          "connections": {
            "nrdvsz": [
              "link"
            ]
          }
        }
      ],
      "_created": 1773933892,
      "_user_id": 1,
      "_version": "2.3",
      "propertyGroups": [
        {
          "id": "aqsbby",
          "name": "Content"
        },
        {
          "id": "jaxaeo",
          "name": "Style"
        }
      ],
      "variants": []
    }
  ],
  "globalClasses": [
    {
      "id": "cqzbiu",
      "name": "article-card",
      "settings": {
        "_border": {
          "radius": {
            "top": "0.75rem",
            "right": "0.75rem",
            "bottom": "0.75rem",
            "left": "0.75rem"
          }
        },
        "_overflow": "hidden",
        "_cssCustom": ".article-card:hover .article-card__image {\n  transform: scale(1.05);\n}",
        "_width": "100%",
        "_gridTemplateColumns": "1fr",
        "_display": "grid",
        "_gridGap": "0"
      },
      "modified": 1773934728,
      "user_id": 1
    },
    {
      "id": "lwscoi",
      "name": "article-card__image-wrapper",
      "settings": {
        "_width": "100%",
        "_overflow": "hidden",
        "_position": "relative",
        "_aspectRatio": "16 / 9"
      },
      "modified": 1774254865,
      "user_id": 1
    },
    {
      "id": "pawjcq",
      "name": "article-card__image",
      "settings": {
        "_objectFit": "cover",
        "_width": "100%",
        "_display": "block",
        "_height": "100%",
        "_cssTransition": "transform 0.3s ease"
      }
    },
    {
      "id": "cxcvwk",
      "name": "article-card__body",
      "settings": {
        "_padding": {
          "bottom": "2rem",
          "top": "2rem",
          "right": "2rem",
          "left": "2rem"
        },
        "_display": "flex",
        "_direction": "column",
        "_width": "100%",
        "_columnGap": "1.5rem",
        "_flexGrow": "1",
        "_flexShrink": "0",
        "_justifyContent": "space-between"
      }
    },
    {
      "id": "kyqevv",
      "name": "article-card__content",
      "settings": {
        "_display": "flex",
        "_direction": "column"
      }
    },
    {
      "id": "nxbqfk",
      "name": "article-card_label",
      "settings": {
        "_margin": {
          "bottom": "0.5rem"
        }
      }
    },
    {
      "id": "puaisw",
      "name": "article-card__title",
      "settings": []
    },
    {
      "id": "idqjrm",
      "name": "article-card__button",
      "settings": {
        "gap": "0.5rem",
        "icon": {
          "height": "1.5em",
          "width": "1.5em",
          "fill": {
            "raw": "inherit"
          }
        },
        "_margin": {
          "top": "1.5rem"
        },
        "_typography": {
          "font-weight": "700"
        },
        "iconPosition": "right",
        "_alignSelf": "flex-start",
        "gap:hover": "0.75rem",
        "_cssTransition": "all 0.3s ease"
      }
    },
    {
      "id": "arlgrq",
      "name": "article-card__description",
      "settings": {
        "_margin": {
          "top": "1rem"
        }
      }
    },
    {
      "id": "qnphdi",
      "name": "article-card--horizontal",
      "settings": {
        "_gridTemplateColumns": "2fr 3fr",
        "_gridTemplateColumns:mobile_landscape": "1fr",
        "_cssCustom": ".article-card--horizontal .article-card__image-wrapper {\n  aspect-ratio: unset;\n}"
      },
      "modified": 1774254865,
      "user_id": 1
    }
  ]
}

[Matej]

Ah, I think I got it. If you can confirm, then I’ll create an internal bug report. Can you check this way:

• Open the component
• Select one image.
• Now you should see the custom alt control.
• You can now enter the data inside the Custom Alt Control.
• Connect the property to the image.
• Custom Alt Control should still be visible.

Here is a short gif of how it looks on my end.

Can you confirm this? If yes, then I’ll create an internal bug report.

Thanks,
Matej

[RicoGL]

I followed your steps. It works, but the custom alt control disappears. Custom alt is applied as expected.

[Matej]

Hey @RicoGL,

thank you for confirmation. I’ve added this to our internal bug tracker.

Best regards,
Matej

[martin.sauter]

I guess the underlaying problem is that the «Custom alt text» field of the image element is not shown unless you have chosen an image. This is not specific to images within components, but the general behaviour of the image element (which never made sense to me, BTW).