Support » Fixing WordPress » Media Library’s grid view: show whole image

  • OsakaWebbie

    (@osakawebbie)


    In the list view, the thumbnails show in whatever shape they are – if they are long or tall, they just shrink to fit 60px wide, so I can see their shape at a glance. But in grid view, the CSS enlarges them to fill the square and hides whatever content hangs over (overflow:hidden). Is there a way to change that, to get the images to shrink to fit inside the square? When directly viewing the library it’s not so bad because I can flee to the list view, but when adding an image to a post/page, grid view is the only choice. If, for example, what I need is a wide banner-style image, I can’t tell which of the images are that shape unless I have them memorized.

    I’m not afraid to add CSS for this, but so far I haven’t figured out what CSS property would solve it – suggestions are welcome. Or if there is a plugin for this, that’s fine too.

Viewing 2 replies - 1 through 2 (of 2 total)
  • OsakaWebbie

    (@osakawebbie)

    I spent a little more time in browser dev tools and found CSS that will work, but I don’t know where to put it. Here is the CSS:

    .mode-grid .wp-core-ui .attachment .portrait img { max-height: 100%; }
    .mode-grid .wp-core-ui .attachment .landscape img { max-width: 100%; }

    But putting it in the CSS file for my theme (I use a child theme) has no effect.

    OsakaWebbie

    (@osakawebbie)

    It wasn’t easy, but perhaps I’ve got it. I had to install a plugin called “Add Admin CSS”, and inexplicably it didn’t appear when I searched for it in “Add New” plugins, so I had to download the ZIP file and install that. Then I discovered that .mode-grid can’t be part of the selector, even though I can see that div in the DOM. Without that, it does fix the grid view, but I don’t know how widely that CSS is affecting things elsewhere in my admin UI.

    I don’t understand why this isn’t the way WordPress works out of the box. Don’t people want to see the shape of the images they are considering inserting in their content?

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.