Closed jacobthill closed 5 years ago
A simple (though not 100% ideal) solution to this is to make the following change to the .document-thumbnail img
selector here
img {
max-height: 100px; // was: max-height: 200px;
max-width: 100px; // was: width: 100px;
}
I believe that will ensure the thumbnail is never larger than 100x100, while maintaining the aspect ratio. Our result item rows have a min-height of 100px so, for example, the problem in the screenshot above would end up more like this:
The downside is, if the result item has enough metadata to make its row height over 100px (which is often the case) and the result item's thumbnail image is relatively narrow and tall (not as likely, but could happen with certain types of DLME resources), the thumbnail image could end up being 20x100 or something, when there is sufficient item row height to show it at 40x200.
But I think that might be a worthwhile tradeoff. So my inclination is to implement the SCSS update above, and then see how it works out with a range of DLME items and revisiting the solution if necessary.
Thumbnails currently overlap (in list view) when the record has little metadata to display. See example one, example two.