[Entity browser]ย Small source images views display

Created on 23 March 2022, over 2 years ago
Updated 18 June 2024, 6 days ago

Problem/Motivation

On the entity browser view the images are behind the checkbox if the source images are small.

Steps to reproduce

Install entity_browser, add small source images (e.g. 16x16px icons).

  1. Create a View of Media.
  2. Click on Add button and select Entity Browser from the dropdown list.
  3. Choose Grid option in the Format field.
  4. Under Fields section, add Thumbnail field, Entity browser bulk select form fields. and rearrange in the sequence as a.Entity operation b.Thumbnail c. Media name.
  5. Choose Image style as Thumbnail (100x100) for the Media image field.
  6. Visit this URL /admin/config/content/entity_browser and click on Add Entity Browser button and create an Entity Browser.
  7. Under Widget Settings select Upload in the Add widget plugin field. Again select View in the Add widget plugin field.
  8. Now select the previously created View in the View: View display field.
  9. Now add a Media reference field in a content type and under Manage Form Display section select Entity Browser as widget option for the created media field.
  10. Now visit the node create page and add any image in the media field and check for the issue. Add media before creating node.

Proposed resolution

Center the .field-thumbnail__target-id content.

Remaining tasks

User interface changes

๐Ÿ› Bug report
Status

RTBC

Version

3.0

Component

Code

Created by

๐Ÿ‡ซ๐Ÿ‡ฎFinland sokru

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.

  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia djsagar

    Hi @sokru,
    Encountering an Error When Applying Patch Locally

    Code functions as intended, successfully resolving the issue.

    My recommend create MR.

    Thanks!

  • First commit to issue fork.
  • Status changed to Needs review 5 months ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Tirupati_Singh

    Created MR for the entity-browser alignment issue. Please review.

  • Pipeline finished with Success
    5 months ago
    Total: 212s
    #84172
  • Status changed to Needs work 10 days ago
  • Hello there,
    The steps to reproduce is not clearly mentioned over here, and I've digged up a lot, but haven't found any way to reproduce the issue.
    Can anyone kindly help me reproduce the issue, so that I can test the patch and help the issue move forward.
    Also the issue summary needs to be updated accordingly then, hence moving it to NW for now!
    Thanks!

  • Status changed to Needs review 10 days ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Tirupati_Singh

    @sourojeetpaul, updated the Steps to reproduce. Please have a look.

  • Status changed to Needs work 10 days ago
  • Hello @Tirupati_Singh,
    Thanks for the update, now I can successfully reproduce the issue. I've also cross checked whether the issue is arising on different themes as well or not, and as its only occurring with Gin theme,hence we can conclude that the issue of the Gin theme only and not the module which is being used here. I'll attach all the screenshots for reference.
    I've tried to apply your patch, though I haven't encountered any error on patch application, but unfortunately the patch is not helping to resolve the issue as well. So moving it back to NW state once again!

    Also as a suggestion I'd like to add that there should also be a breathing space b/w the checkbox and the image as well, as its there for other themes, and let's not only restrict for smaller images/icons. We should design in a such a way so that it doesn't seem to break irrespective of the image size!

  • Pipeline finished with Success
    6 days ago
    Total: 212s
    #201907
  • Status changed to Needs review 6 days ago
  • ๐Ÿ‡ฎ๐Ÿ‡ณIndia Tirupati_Singh

    Hi @sourojeet2001, I've fixed the Entity browser views display alignment issue and added space between the checkbox and the image as per the feedback. Attaching the screenshot for reference.

  • Status changed to RTBC 6 days ago
  • Hi @Tirupati_Singh,
    Thanks for putting efforts on making the recommended changes. The changes seems reasonable to me now, I've also applied the modified patch and can verify that it solves the issue, hence moving it to RTBC++
    Attaching before after screenshots for reference!

Production build 0.69.0 2024