Wrong html when there are multiple images

Created on 10 October 2023, about 1 year ago
Updated 11 October 2023, about 1 year ago

Problem/Motivation

When having one multi media field on an entity, each image is being rendered as their own gallery.
Thus there are no prev/next navigation buttons as instead of one gallery with n images there are n galleries with each one image.

Steps to reproduce

- Install bower-asset/photoswipe ^5 (currently results in 5.4.1)
- Install drupal/photoswipe 5.0.0-rc2 (currently in sync with the 5.x dev branch)
- Add a "Media" field to an entity which allows unlimited number of values
- Use the Photoswipe Format to display the images
- Create an entity with multiple media/images
- View the entity

Proposed resolution

Go over Different/wrong html when there is only one image Fixed again.

Remaining tasks

Update the code so it works with single images but also multiple images.

User interface changes

None.

API changes

None.

Data model changes

None.

🐛 Bug report
Status

Closed: works as designed

Version

5.0

Component

Code

Created by

🇨🇭Switzerland dpacassi Zürich, Switzerland

Live updates comments and jobs are added and updated live.
  • Needs tests

    The change is currently missing an automated test that fails when run with the original code, and succeeds when the bug has been fixed.

Sign in to follow issues

Comments & Activities

  • Issue created by @dpacassi
  • 🇨🇭Switzerland dpacassi Zürich, Switzerland

    I know that Different/wrong html when there is only one image Fixed is already in the dev branch and that the tests have been updated.
    But I need a quickfix for this, so for now, I'm uploading a patch which simply undoes the changes of Different/wrong html when there is only one image Fixed .
    That seems to work for me for now, though I haven't tested it with single images.

  • Assigned to thomas.frobieter
  • 🇩🇪Germany Anybody Porta Westfalica

    @dpacassi thanks for the report. I think if reverting works, then it may have worked accidentally before and we should look for a real fix here.

    But first we need the failing test that demonstrates the issue to fix, so we can be sure it's fixed afterwards and isn't just an individual issue.

    I'm wondering as I think we also have this describe use case and it works. Are you sure there's no other workaround or older override in place?

    @thomas.frobieter reading the issue summary steps, what do you think? Do we have a similar case?

  • Yes, sounds familiar. The photoswipe-gallery class should be set on the outer field-wrapper (from the entity media reference field, which has the photoswipe/photoswipe responsive formatter).

    But this is what we already did here https://git.drupalcode.org/project/photoswipe/-/merge_requests/93/diffs#... Different/wrong html when there is only one image Fixed .

  • Issue was unassigned.
  • 🇩🇪Germany Anybody Porta Westfalica

    Thanks!

    I think we have a test for this or we should have one, otherwise... and of course in the described combination it should work without manually setting the .photoswipe-gallery class I think.

  • Status changed to Postponed: needs info about 1 year ago
  • 🇩🇪Germany Anybody Porta Westfalica

    @dpacassi: The gallery wrapper is attached to the whole field here: https://git.drupalcode.org/project/photoswipe/-/blob/5.x/src/Plugin/Fiel...

    Are you doing special things with the field in theme, for example using Twig field value's |field_value filter or something else that might remove the wrapper element and thereby its class?

    So far I can't see an issue in the current module code here.

  • 🇨🇭Switzerland dpacassi Zürich, Switzerland

    So, I've checked again on a vanilla Drupal 10.1.5 instance and can confirm that everything works as supposed.
    When I've encountered this bug and saw the other issue, it seemed so obvious that there might have been a mistake in the fix, specially since I didn't overwrite any templates or implemented any hooks.
    It was a new entity type (paragraph) with a new media field but yeah, there's probably still a contrib or custom module interfering with the gallery on the real project.

    Closing the issue for now, I might come back with additional info on my installation once I've fixed it to work without the patch.

  • Status changed to Closed: works as designed about 1 year ago
  • 🇨🇭Switzerland dpacassi Zürich, Switzerland
  • 🇩🇪Germany Anybody Porta Westfalica

    Thanks for the feedback @dpacassi! :) Please let us know, what has been the reason for this, if anyone else should experience similar issues. Thank you!

  • 🇨🇭Switzerland dpacassi Zürich, Switzerland

    Well, I just found out the project's custom theme overrides a field template (field--entity-reference.html.twig) and has only following content:

    {% for item in items %}
      {{ item.content }}
    {% endfor %}

    I've created a new field template specifically for my newly created field (field--paragraph--field-photoswipe-images.html.twig) which has the content of the classy field template:

    {% if label_hidden %}
      {% if multiple %}
        <div{{ attributes }}>
          {% for item in items %}
            <div{{ item.attributes }}>{{ item.content }}</div>
          {% endfor %}
        </div>
      {% else %}
        {% for item in items %}
          <div{{ attributes }}>{{ item.content }}</div>
        {% endfor %}
      {% endif %}
    {% else %}
      <div{{ attributes }}>
        <div{{ title_attributes }}>{{ label }}</div>
        {% if multiple %}
          <div>
        {% endif %}
        {% for item in items %}
          <div{{ item.attributes }}>{{ item.content }}</div>
        {% endfor %}
        {% if multiple %}
          </div>
        {% endif %}
      </div>
    {% endif %}

    The gallery now works without my patch.
    Sorry for the fuss, should have tested it first on a vanilla installation :|

  • 🇩🇪Germany Anybody Porta Westfalica

    All good, thank you! :)

Production build 0.71.5 2024