Contrib.social

Multivalue field not working for Media items

Open on Drupal.org →
Created on 2 November 2024, 3 months ago

Problem/Motivation

Background Image Formatter doesn't work for multivalue fields when using 'Media' field (it does work when using multivalue fields for 'Image' field).

Steps to reproduce

1. Create new Field
For a content type add a new field and select 'Media'. For the field name I suggest using "Background Images". For Allowed number of values select "Unlimited". For media type select 'Image'.

2. Manage Display for the field
Click "Manage Display" tab and then for our new field of "Background Images" select "Rendered entity" and Save.

3. Add new View Mode
Under /admin/structure/display-modes/view scroll down to "Media" and then click "Add view mode for Media" and add (I suggest) "Background image formatter". For "Enable this view mode for the following Media types" select "Image".

4. Manage Display (for Media Image)
Under /admin/structure/media/manage/image click the "Manage display" tab and then below click the "Background image formatter". Then for the Image format select "Background image" and select the cog to the right to configure. Here the user is invited to add the selectors for the Background Images Formatter under Default CSS Settings.

It advises "A valid CSS selector that will be used to apply the background image. One per line. If the field is a multivalue field, the first line will be applied to the first value, the second to the second value... and so on."

For the selectors add the following on new lines:

.bg1
.bg2
.bg3
.bg4
.bg5
.bg6

Then click the Update button and finally the Save button.

5. Add new content (node) using the new field "Background Images".
Click to add new content and then for the field click on the "Add media" and select multiple images and then Save the node.

Then look at the source code for the page. It only outputs all the images using only the first selector ".bg1" and doesn't use the other selectors that were added on subsequent lines.

An example is below:

<style media="all">.bg1
 {background-color: #FFFFFF !important;background-image:  url('https://d10-cbd-dev.ddev.site/sites/default/files/styles/large/public/2021-12/acrylic-picker.jpg?itok=jh5uot1p') !important;background-repeat: no-repeat !important;background-attachment: scroll !important;background-position: left top !important;z-index: auto;}</style>

<style media="all">.bg1
 {background-color: #FFFFFF !important;background-image:  url('https://d10-cbd-dev.ddev.site/sites/default/files/styles/large/public/2021-12/quartz-picker.jpg?itok=6eJMqq8D') !important;background-repeat: no-repeat !important;background-attachment: scroll !important;background-position: left top !important;z-index: auto;}</style>

<style media="all">.bg1
 {background-color: #FFFFFF !important;background-image:  url('https://d10-cbd-dev.ddev.site/sites/default/files/styles/large/public/2021-12/wood-picker.jpg?itok=1kMuufc3') !important;background-repeat: no-repeat !important;background-attachment: scroll !important;background-position: left top !important;z-index: auto;}</style>

Proposed resolution

Update the module so that for multivalue fields the appropriate selectors are applied. That is, if the field is a multivalue field, the selector on the first line will be applied to the first value, the second to the second value... and so on.

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

1.17

Component

Code

Created by

🇬🇧United Kingdom mikee

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

Merge Requests

Comments & Activities

  • Issue created by @mikee
  • Comment 3 months ago →
    sourabhsisodia_
  • Comment 3 months ago →
    sourabhsisodia_

    @mikee On digging this issue I have found that this module overrides 

    ImageFormatter::viewElements

    . viewElements() is called per item, so every item is getting first selector . Each of the items is rendered individually.
    So according to the logic in this foreach loop on line number 573 

    /** @var \Drupal\file\FileInterface $file */
    foreach ($files as $delta => $file)
 $css_settings['bg_image_selector'] = $selectors[$delta % \count($selectors)];

    The value of $delta always remains 0 , and only the first selector gets applied as viewElements() is called per item.

  • Comment 3 months ago →
    sourabhsisodia_

    @mikee on dumping $files in BgImageFormatter.php , we can see that instead of getting all images in a single array or object , we are getting three separate individual array as viewElements() is getting called per image .

  • Comment 3 months ago →
    sourabhsisodia_

    Found a similar issue in another module - issue →

  • Merge request !123485197-multivalue-field-not: Added static variable and fixed the multi value... → (Open) created by sourabhsisodia_
  • Comment 2 months ago →
    sourabhsisodia_
  • Comment 2 months ago →
    🇮🇳India sagarmohite0031

    Hello,
    Getting error attaching screenshots.

  • Comment 2 months ago →
    🇬🇧United Kingdom mikee

    @sourabhsisodia many thanks for investigating and resolving this issue.

    FYI, on my installation for the module I updated the file 'bg_image_formatter/src/Plugin/Field/FieldFormatter/BgImageFormatter.php' with your updated version of the file and the Multivalue field for Media items is working.

    I copied your version from: https://git.drupalcode.org/project/bg_image_formatter/-/blob/c17f8a16707...

    To confirm, after making the above update the source code for the page outputs all the images using the appropriate selectors ".bg1, .bg2, .bg3, .bg4, .bg5, .bg6".

    The below shows the correct source code being generating by the module (8.x-1.17) + your updated file (BgImageFormatter.php) :

    <style media="all">.bg6
 {background-image:  url('https://d10-cbd-dev.ddev.site/sites/default/files/2021-12/hanex-picker.jpg') ;}</style>
<style media="all">.bg5
 {background-image:  url('https://d10-cbd-dev.ddev.site/sites/default/files/2021-12/avonite-picker.jpg') ;}</style>
<style media="all">.bg4
 {background-image:  url('https://d10-cbd-dev.ddev.site/sites/default/files/2022-07/corian-bath-drainer.png') ;}</style>
<style media="all">.bg3
 {background-image:  url('https://d10-cbd-dev.ddev.site/sites/default/files/2022-07/corian-bath-delight-8430.png') ;}</style>
<style media="all">.bg2
 {background-image:  url('https://d10-cbd-dev.ddev.site/sites/default/files/2022-07/corian-bath-delight-8420.png') ;}</style>
<style media="all">.bg1
 {background-image:  url('https://d10-cbd-dev.ddev.site/sites/default/files/2022-07/corian-bath-delight-8410.png') ;}</style>

    Many thanks for resolving this issue.

  • Status changed to RTBC 20 days ago
  • Comment 20 days ago →
    🇮🇳India sayan_k_dutta

    Reviewed the changes. Looks good. Attaching screenshot of the same and moving to RTBC.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024