Contrib.social

Error with macro inside navbar-brand.twig

Open on Drupal.org →
Created on 4 November 2020, over 4 years ago
Updated 15 March 2025, about 2 months ago

Problem/Motivation

The file src/components/navbar/navbar-brand.twig contains a macro to define the image used inside that component, and later on for example in the file templates/block/block--system-branding-block.html.twig, when we call it with the parameters, if for whatever reason we dont want to use the `path` parameter and it is ommited, the parameters into the macro are wrong and the width takes the value of the alt parameter.

A second error is also flagged while validating the html in both cases with the W3C validator:
If we dont have a assigned value to the height parameter and analyse the code, we get the following error:
Bad value auto for attribute height on element img: Expected a digit but saw a instead.

Steps to reproduce

- Make sure we have a logo in our site
- Create a subtheme and copy the templates/block/block--system-branding-block.html.twig file into ours (so we dont alter the radix one)
- remove the path in the copied file, or make it empty
- CR, and you will see the results: in the html, the width tag contains the alt value, and alt is empty (and in my case the sixe of the logo goes crazy)

Proposed resolution

Pass the missing parameters also in the else, (or at least a null value), like here:

{% else %}
  <span class="navbar-brand h1 mb-0 {{ utility_classes }}" aria-label="{{ text }}">
    {% if image %}
      {{ navbar_brand.image(image, width, height, alt) }}
    {% endif %}
    {{ text }}
  </span>
{% endif %}

for the second issue, the code could be as simple as:
height="{{ height|default('30') }}"
inside the macro (or any value that is related with the dimensions of the drupal logo (I forgot that '' also gives error in the validator)

Remaining tasks

User interface changes

API changes

Data model changes

Best,

🐛 Bug report
Status

Fixed

Version

5.0

Component

Code

Created by

🇧🇪Belgium gorkagr

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment about 2 months ago →
    🇬🇷Greece Pavel Ruban

    pavel ruban → made their first commit to this issue’s fork.

  • Merge request !136Issue #3180644: Fix height attr double check plain. → (Open) created by Pavel Ruban
  • Pipeline finished with Success
    about 2 months ago
    Total: 135s
    #448991
  • Comment about 2 months ago →
    🇬🇷Greece Pavel Ruban

    fix same as in #13 for 6.0.x

  • Pipeline finished with Success
    about 2 months ago
    Total: 134s
    #449003
  • Comment about 2 months ago →
    🇬🇷Greece Pavel Ruban

    Restore Op's initial logic to exclude height if its auto + keep check plain bug fix

  • Comment 24 days ago →
    doxigo
  • Comment 14 days ago →
    🇮🇳India Tirupati_Singh

    Hi, I was able to replicate the issue and found that when any height value, let's say 42px has been passed in the "block--system-branding-block.html.twig" template height variable then on the logo the height attribute is rendering as height="'42px'" instead of height="42px" due to which the image height is not getting height as per its attribute value.

    I've applied the provided MR !136 as a patch and it applied cleanly without any errors. After applying the patch, the height attribute issue has been fixed and it is rendering as height="42px" which is the correct. Additionally, when no height value or height auto has been passed into height variable then the render logo "img" tag does not have height attribute. I'm attaching the screenshots of before and after patch applied issue fixes. As the MR is resolving the issue, hence moving the issue status to RTBC.

    Thanks!

  • Comment 14 days ago →
    🇮🇳India Tirupati_Singh
contrib.social Blog FAQ Discussions
Production build 0.71.5 2024