Media Library thumbnails distorted due to plugin CSS

  • Resolved GermanKiwi

    (@germankiwi)


    9 years, 6 months ago

    Hi, after I installed your plugin today, I noticed that all of the image thumbnails (including for non-SVG images) on the Media Library page were displaying as 60x60px squares, regardless of their original proportions.

    This means the thumbnails which are actually rectangular, are now showing as squares and are therefore distorted – no longer in their correct proportions.

    I traced the problem down to this bit of CSS in the ‘svgs-admin.css’ file which is included with your plugin:

    table.media .column-title .media-icon img {
    width: 60px;
    height: 60px;
}

    Is there a reason for this? As far as I can see, it shouldn’t be there.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Benbodhi

    (@benbodhi)

    9 years, 6 months ago

    Hi,

    Thanks for your support and your feedback!

    There sure is a reason for this. The SVG thumbnails need to have their height and width set to show up in the media library, otherwise they don’t have a size.
    I will look in to applying it only to SVG thumbs as soon as I can.

    Thread Starter GermanKiwi

    (@germankiwi)

    9 years, 6 months ago

    Ah right, that makes sense!

    I just did a quick play around with the CSS and I found that it works well if you remove the height:60px and just leave the width:60px there – as follows:

    table.media .column-title .media-icon img {
    width: 60px;
}

    Then all the non-SVG images display with their correct ratios (not squished), and the SVG image also displays correctly too. At least for me it works fine.

    Plugin Author Benbodhi

    (@benbodhi)

    9 years, 6 months ago

    Thanks for pointing this out, a little bit of an oversight on my behalf and I think it works differently across browsers.
    But I have added this to the list of changes for the next release 🙂

    • This reply was modified 9 years, 6 months ago by Benbodhi.
    Thread Starter GermanKiwi

    (@germankiwi)

    9 years, 6 months ago

    Awesome, thanks!

    Plugin Author Benbodhi

    (@benbodhi)

    9 years, 4 months ago

    Hey @germankiwi, I hope you’re well!

    I’ve been playing around with this and can’t seem to replicate it. Maybe you could grab some screenshots of what you mean exactly?

    Plugin Author Benbodhi

    (@benbodhi)

    9 years, 4 months ago

    I have removed the height from the CSS in version 2.3

    Thread Starter GermanKiwi

    (@germankiwi)

    9 years, 4 months ago

    Thanks, that’s perfect!

    Prior to the v2.3 update, the images in my Media Library were all square and distorted, like this:

    Now that you’ve removed the height attribute, they look like this, with their correct proportions:

    Plugin Author Benbodhi

    (@benbodhi)

    9 years, 4 months ago

    I see, that’s strange, all my testing environments show 60×60 no matter what shape the image is, with or without my plugin installed.
    Anyway, glad it works for you now!

    Thanks for the support 🙂

    Thread Starter GermanKiwi

    (@germankiwi)

    9 years, 4 months ago

    You mean you always see the thumbnails from rectangular images as squares, all distorted or squished? That’s strange indeed! The images should always be shown with their correct width-to-height proportions. Anyway – yup, it works for me, so I’m happy! 🙂

    Plugin Author Benbodhi

    (@benbodhi)

    9 years, 4 months ago

    Well they aren’t squashed, kinda like a crop, the thumbnails look cropped to fit, keeping their proportions, but only displaying the middle 60x60px.

    But, this little change in the CSS barely affected the layout in a lot of tests I did, so we’re good to keep it that way now.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Media Library thumbnails distorted due to plugin CSS’ is closed to new replies.