Display as "Swiper Entity" shows the same image in all slider elements

Created on 18 November 2024, 2 months ago

Problem/Motivation

By using the Display Mode "Swiper Entity", all slides in a slider show the first image rendered.

Context:

  • fresh installed Drupal 10.3.8
  • php 8.3
  • Swiper Formatter: 2.0.x-dev
  • No other modules are installed apart of the usual installed during the installation.

Steps to reproduce

These are my steps, but maybe it can be reproduced with another steps.
I'm using Layout Builder to build the pages using Custom Blocks (both inline as normal blocks)

1. Create a Swiper template to apply to the formatter.
2. Create a custom Block "Gallery"
3. Add a Media Field ans select Image as Reference type and set it to be multiple.
4. In Manage Display, set Swiper Entity as a formatter.
5. Configure the formatter to use the swiper template you created in the Step 1 and the view mode "Media Library" as a renderer for the slides (see Image 1)
6. Create a Block in "Content > Blocks" with name gallery_thumbnails
7. Add some images to to the block.
8. Create content type which uses Layout builder
9. Create a node of this content type and add the custom Block "Gallery" you created in the step 2.

Now you should see a gallery with all slides showing the same image. Also, the first one.

Proposed resolution

As far as I can find the problem is in the service "Swiper.php" in the line 337:

   // Add an extra cache key to avoid conflict with
    // an original view mode cached version as a workaround to the current
    // implementation until the main logic is reworked.
    // Just in case it's not an entity, we add a check.
    $keys = $item['#cache']['keys'] ?? [];
    if (in_array('entity_view', $keys)) {
      $slide['#cache']['keys'][] = 'swiper-slide';
    }

Apparently this new key is causes a hit in the cache each time Drupal starts rendering a slider element.
(see Image3)

As soon as you randomize or make different the key for each element, all works, obviously, again as expected.
For example:
$slide['#cache']['keys'][] = 'swiper-slide-' . rand(0, 100);
(see Image 4)

I'm not really sure how it can be addressed because I don't know what is exactly the purpose of this key.
Isn't the element enough identified whit the keys found in $item['#cache']['keys'] ?

Remaining tasks

N/A

User interface changes

N/A

API changes

N/A

Data model changes

N/A

πŸ› Bug report
Status

Active

Version

2.0

Component

Code

Created by

πŸ‡¨πŸ‡­Switzerland juagarc4

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

Merge Requests

Comments & Activities

  • Issue created by @juagarc4
  • πŸ‡¨πŸ‡­Switzerland juagarc4
  • πŸ‡¨πŸ‡­Switzerland juagarc4
  • πŸ‡·πŸ‡΄Romania bbu23

    Hi,

    Thanks for reporting this issue, I'll try to reproduce it when I get the chance.

    The cache keys is an array of parts. In the case of node, a example is "['node', 5, 'teaser']". This means that the teaser representation of the node will be cached, but in Swiper's case it was a conflict because swiper is altering the representation. By adding the "swiper-slide" key we are creating two different "cache keys" depending on the scenario. And in theory, they are supposed to be unique. Randomising is not an option, so I first need to try to reproduce your scenario and investigate what happens to understand better.

    More information about the original issue here: https://www.drupal.org/project/swiper_formatter/issues/3395406 πŸ› Swiper formatter fails to wrap row in swiper-slide div intermittently Active

  • πŸ‡·πŸ‡΄Romania bbu23

    Though from your screenshots it might look like the keys are empty, so yes, in that particular case, the cache keys array will only contain the same key for all which is incorrect. Makes sense, I'll investigate.

  • πŸ‡·πŸ‡΄Romania bbu23
  • πŸ‡·πŸ‡΄Romania bbu23

    I have provided a fix for this, thanks again for reporting this issue.

    We made a small typo mistake when porting from version 1 to version 2. Please try out the patch and let us know if everything okay now.

    Regarding the Proposed steps, 8 & 9 are not necessary, but of course can be tested. This bug can be reproduced for any entity reference, and in this particular example after step 7 the block can be added directly to the block layout and will have the same behaviour.

  • πŸ‡ΊπŸ‡ΈUnited States the_turk

    I am having the same issue even after applying the patch.

  • πŸ‡·πŸ‡΄Romania bbu23

    Did you clear the caches after applying the patch? @the_turk

  • πŸ‡ΊπŸ‡ΈUnited States kerrymick Chicago

    @bbu23 I work with @the_turk. I believe our issue is actually that we are using the format of swiper paragraphs, not swiper entity which also has the same issue of displaying the same slide. If we disable cache we get different slides.

  • πŸ‡·πŸ‡΄Romania bbu23

    @kerrymick in this case, please describe the exact steps to reproduce your case, and when I get the time I'll check. Thanks

  • πŸ‡¨πŸ‡­Switzerland juagarc4

    Hi all,

    @bbu I just tested the current patch and it works in the case described in the issue.

    Then I've tested it with paragraphs too and I can confirm the same problem mentioned by @the_turk and @kerrymick.

    The steps are pretty simple:

    1. Create a Paragraph "Slide" and add a new field of type Media or Image. Set the multiplicity limited to 1
    2. In the Manage Display of the paragraph you can just set "Rendered Entity" as Formatter for the field.
    3. Create a new Block Type "Gallery" and a new field of type "Paragraph"
    4. Select Slide as "Paragraph Type" and set the multiplicity to unlimited.
    5. In the Manage Display of the block set "Swiper paragraph" as a formatter for the field.
    6. Create a Block in "Content > Blocks" with name Gallery
    7. Add some slides to to the block.
    8. Create content type or use one already existent which uses Layout builder
    9. Create a node of this content type and add the custom Block "Gallery" you created in the step 6.

  • πŸ‡·πŸ‡΄Romania bbu23

    @juagarc4 thank you for providing the detailed steps. I'll try to reproduce as soon as I get the chance.

  • πŸ‡·πŸ‡΄Romania bbu23

    Hi,

    I updated the MR. Please let me know if this fixes both issues.

  • πŸ‡ΊπŸ‡ΈUnited States kerrymick Chicago

    I can confirm that this fixes our issue with entity references on paragraphs. Thanks so much!

  • πŸ‡¨πŸ‡­Switzerland juagarc4

    Hi all,

    I re-tested it with paragraphs and I can confirm too, that the MR solves the problem.

    Many thanks and regards!!!

  • πŸ‡·πŸ‡΄Romania bbu23

    Thanks so much for confirming, reporting and helping with testing!

    • bbu23 β†’ committed 9b73de0a on 2.0.x
      Issue #3488101: Display as "Swiper Entity" shows the same image in all...
  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024