Title attribute missing

Created on 28 September 2023, 9 months ago
Updated 1 October 2023, 9 months ago

Problem/Motivation

After updating Blazy from 2.4 to 2.18 the title attribute is missing and the alt attribute is empty. I am using the title attribute to output the credits of the image with a small js. So every media image is missing the credits now. Anyway the title atrribute should be there.
Any hint and help is appreciated.

The img tag looks like this:
<img alt="" decoding="async" class="media__element b-lazy img-responsive b-loaded" loading="lazy" src="/sites/default/files/styles/standard/public/2021-09/andrea-cau-nV7GJmSq3zc.jpg?itok=3OoNIg9-" width="1200" height="800" typeof="foaf:Image">

🐛 Bug report
Status

Fixed

Version

2.18

Component

Code

Created by

🇩🇪Germany gaia

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

Comments & Activities

  • Issue created by @gaia
  • 🇮🇩Indonesia gausarts

    Thank you.

    Mind screenshoting your formatter?

    If anything related, this issue is the closest:
    🐛 Entity (vanilla) Field Formatter loses "View mode" Fixed

    Let me know?

  • 🇩🇪Germany gaia

    Here is a screenshot. Thanks a lot

  • Status changed to Postponed: needs info 9 months ago
  • 🇮🇩Indonesia gausarts

    I think it is related to this line:
    https://git.drupalcode.org/project/blazy/-/blob/8.x-2.x/src/Theme/Attrib...

    There was a request to remove title attribute when it contains a file name which I agreed it looked ugly. So happens he paid me for the job :)

    To prove that is the case, try inputting the title without file name, e.g.:
    photo.jpg into photo.

    You'll get your titles back.

    However since updating title images is a tedious job, hook_blazy_item_alter comes to rescue:
    https://git.drupalcode.org/project/blazy/-/blob/8.x-2.x/blazy.api.php?re...

      if (!$blazies->get('image.title') && $item = $blazies->get('image.item')) {
        if ($title = $item->title ?? '') {
          $blazies->set('image.title', $title);
        }
      }
    

    You may want to \Drupal\Component\Utility\Html::escape($title); accordingly.

    Would that do for you?

  • Status changed to Active 9 months ago
  • 🇩🇪Germany gaia

    Thanks

    To prove that is the case, try inputting the title without file name, e.g.:
    photo.jpg into photo.

    No. Almost every title are without filename, e. g. unsplash.

    You may want to \Drupal\Component\Utility\Html::escape($title); accordingly.
    Would that do for you?

    Thanks but not really, as i am not a coder.

    And why is the alt attribute empty?

    I updated another site to 2.18 and same problem there. I tried roll back to blazy 2.4 and it is not possible.

  • Status changed to Postponed: needs info 9 months ago
  • 🇮🇩Indonesia gausarts

    Hm, weird.

    Both alt and title in 2.17 and 2.18 are fine at my end, except for title containing file extensions which was intentionally removed as said in #6.

    Have you verified Alt and Title fields are also enabled:
    /admin/structure/types/manage/article/fields/node.article.field_image

    Change article and field_image accordingly.

    If they are, no other ideas for now.

  • 🇮🇩Indonesia gausarts

    Please also screenshot that page (/admin/structure/types/..) to the end of Save settings button so I know if any translated elements got in the way, etc.

  • Status changed to Active 9 months ago
  • 🇩🇪Germany gaia

    on the nodetype field it s not possible to enable the title, as it is a reference to a media image.
    The screenshot ist from here: /admin/structure/media/manage/image/fields/media.image.field_media_image

  • 🇮🇩Indonesia gausarts

    It's getting tough with translatable elements :)

    Please confirm:
    Does this issue stand with basic English site only?

    If yes, it must be a bug. If not, please investigate your site setups:
    /admin/config/regional/content-language
    and other pages, including their translated fields, etc.

    The latest Blazy overrides Media with translated one if any:
    https://git.drupalcode.org/project/blazy/-/blob/8.x-2.18/src/Media/Blazy...

    It might be related to some translations unless proven otherwise.

  • 🇮🇩Indonesia gausarts

    BTW, is it node display (/node/123), or Views-embedded blazy blocks, or both, having the issue?

    So I , or you, can better investigate it further.

  • 🇩🇪Germany gaia

    Please confirm:
    Does this issue stand with basic English site only?

    Default language is german, the other one is english. and the title attribute is missing on both languages

    BTW, is it node display (/node/123), or Views-embedded blazy blocks, or both, having the issue?

    everywhere nodes and views

    here is a screenshot of /admin/config/regional/content-language

  • 🇮🇩Indonesia gausarts

    We do have different setups.

    If it persists on Node display, a Bug then as said.

    I tend to trust you better than my lacking of setups, especially after the last DEV storms where misses were just discovered later :)

    I also just remembered I might hardcode $langcode somewhere into "en", that might be an issue, as well.

    I'll get back to it tomorrow.

    If you have any more info, that would help further checks.

    Thank you for staying cool :)

  • Status changed to Postponed: needs info 9 months ago
  • 🇮🇩Indonesia gausarts

    I think I can reproduce your issue :)

    See your screenshot again:
    https://www.drupal.org/files/issues/2023-09-28/formaxyz.png

    Is this all, or cropped?

    • If cropped, please upload the entire screen so we can match the options.
    • If all, then we have another Bug to talk about. In that case, please temporarily use DEV so we know 2.18 has this issue, and re-verify.

    The Blazy Media formatter should have Main stage option. Read more its desc:
    > Main background/stage/poster image field with the only supported field types: Image or Media containing Image field. You may want to add a new Image field to this entity. Be sure to reuse the exact same image field (normally field_media_image) across various entitiy types (Image, Remote video, Local audio/video, etc.) within this particular entity (says, Media). Required by some lightboxes as image triggers. For (remote|local) video, this allows separate high-res or poster image. Be sure this exact same field is also used for bundle Image to have a mix of videos and images if this entity is Media. Leaving it empty will fallback to the video provider thumbnails, or no poster for local video. The formatter/renderer is managed by blazy_media formatter. Meaning original formatter ignored.

    This Main stage associates Image to its Media entity. Without it, the formatter will pickup the default Media thumbnail, not the actual Media ImageItem. And normally having EMPTY title as identified here:
    > // Title is NULL from thumbnail, likely core bug, so use source.
    https://git.drupalcode.org/project/blazy/-/blob/8.x-2.18/src/Media/Blazy...

    Please see my screenshot, and verify against yours, so we can narrow the issue better.

  • 🇮🇩Indonesia gausarts

    Some likely me forgot to upload the screenshot.

  • 🇮🇩Indonesia gausarts

    Changing this back to Support since 2.18 is fine with Media entity.

    Only Paragraphs or non-media entities with Vanilla stuffs had the View mode issue mentioned above.

    No need to use DEV if you don't have Paragraphs, or vanilla formatters.

    • gausarts committed 9f08631d on 8.x-2.x
      Issue #3390399 by gaia, gausarts: Title attribute missing
      
  • Status changed to Active 9 months ago
  • 🇩🇪Germany gaia

    Is this all, or cropped?

    This is all

    If all, then we have another Bug to talk about. In that case, please temporarily use DEV so we know 2.18 has this issue, and re-verify.

    I will try that later, will be away from the computer for a couple of hours, and get back to you. Thanks a lot for your help!

  • 🇩🇪Germany gaia

    In that case, please temporarily use DEV so we know 2.18 has this issue, and re-verify.

    I installed dev and the problem still persists.

  • 🇮🇩Indonesia gausarts

    Got it, thanks.

    The OP problem has been able to reproduce and identified as missing Media image option value at front-end.
    A new problem arose that you didn't see Media image option at back-end while I did as seen in the screenshot #16.

    I need your help to investigate it further: potential admin theme issues, etc.

    Please provide more details:

    1. Did you hire a dev to customize the Blazy Media formatter? If so, you might need an update against 2.18.
    2. Browser name and version?
    3. Admin theme? If not Claro, please use Claro, or Seven for older Drupal versions, for a mo. Media image option still hidden?
    4. Screenshot: /admin/structure/media/manage/image/fields
      Change "image" in the URL, if you have other names for this, be sure to inform that.
      If using Standard profile, you must have "field_media_image" on this page.
    5. /admin/structure/media/manage/image/fields/media.image.field_media_image
      This must be done DEV/ STAGING environments:
      Uncheck "File" and Save, if you only need to translate image attributes and don't upload different image "File" for each media item.
      Re-sync with /admin/config/regional/content-language if any difference. It may take a while if you have lots of translation.
      Do nothing if "File" was already unchecked.

    Please see my screenshot, and apply, and put your own screenshot:

    • Press F12,
    • click the "Inspect element" arrow button on the top left, and
    • select "Media switcher" option with classes ".grid.form-item--media-switch".
    • Position it on the topmost.
    • Collapse each ".grid" nodes if they are expanded so we can see "Media switcher" node down to "Media stage" (".grid.form-item--image").

    The latest found problem is Media stage option not available in your setups.
    Once this is place, and filled in by field_media_image, you should have your translation back, technically.

  • 🇩🇪Germany gaia

    Did you hire a dev to customize the Blazy Media formatter? If so, you might need an update against 2.18.

    No

    Browser name and version?

    Firefox latest 118.0 and Chrome latest 117.0.5938.132

    Admin theme?

    Claro

    Screenshot: /admin/structure/media/manage/image/fields

    Screesnshot is attached. I am using Standard profile.

    Uncheck "File" and Save, if you only need to translate image attributes and don't upload different image "File" for each media item.
    Re-sync with /admin/config/regional/content-language if any difference. It may take a while if you have lots of translation.

    Done

    Press F12,
    click the "Inspect element" arrow button on the top left, and
    select "Media switcher" option with classes ".grid.form-item--media-switch".
    Position it on the topmost.
    Collapse each ".grid" nodes if they are expanded so we can see "Media switcher" node down to "Main stage" (".grid.form-item--image").

    Screenshot is attached

  • Status changed to Postponed: needs info 9 months ago
  • 🇮🇩Indonesia gausarts

    Thank you, but still not there :)

    Could you screenshot the Blazy Media (not Blazy Image) formatter like your previous #5 💬 Title attribute missing Active , perhaps here:
    /admin/structure/types/manage/article/display

    Change article accordingly.

    And please also disable Twig dev mode for a mo here:
    /admin/config/development/settings

    That Twig add extra info we need to get rid of for a mo to see Main stage option.

  • 🇮🇩Indonesia gausarts

    I think I could reproduce your issue again, thanks to screenshots :)

    Temporary solution till I provide a patch:

    • /admin/structure/types/manage/article/fields/node.article.field_media
      Under Media type, enable one of these types: Audio, Video, or Remote video so to trigger Media stage option visible. It's fine even if you don't use. Only needed just to make the Main stage option visible.
    • /admin/structure/types/manage/article/display
      Find the Main stage option, and choose your Image.

    Change article and field_media to your setups.
    Save, and clear your cache.

    Hopefully that brings back your image attributes. If not, another work to do then :)

  • Status changed to Needs review 9 months ago
  • Open in Jenkins → Open on Drupal.org →
    Core: 9.5.x + Environment: PHP 7.4 & MySQL 5.7
    last update 9 months ago
    50 pass
  • 🇮🇩Indonesia gausarts

    Changed it back to Bug.

    The immediate workaround for 2.18 without patches is to enable Audio, Video, or Remote video along with Image bundle so to trigger Main stage option for selection, then select the Image (field_media_image).

    Attached is to fix for ordering issue, the OP issue. Basically, media metadata should be provided earlier which was an obvious oversight from the previous works.

    Also made Main stage option visible to avoid guessing works above specific to this title attribute issue.
    It is required to make image title available since core Media thumbnail had been identified to return NULL title here:
    https://git.drupalcode.org/project/blazy/-/blob/8.x-2.18/src/Media/Blazy...

    • gausarts committed d7708a9a on 8.x-2.x
      Issue #3390399 by gausarts, gaia: Title attribute missing
      
  • Status changed to Active 9 months ago
  • 🇩🇪Germany gaia

    Hey gausarts. Thank you very much for the patch. I applied it and it works. Title and alternative text are there again. Do you still need anything from me?

  • Status changed to Fixed 9 months ago
  • 🇮🇩Indonesia gausarts

    2.19 was just out, no patches were needed any more.

    Thanks for kind reports and confirms :)

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

Production build 0.69.0 2024