Make Browse item cards all same height

[evanwill]

There are a couple approaches to make the Browse cards all the same height. First, note that the Browse cards have an image cap (.card-img-top) and a text card body (.card-body). In the default set up, neither is a set height. The image size is constrained by the width (a .col-lg-4 which will be around 400px on a large screen), but the height is what ever the natural ratio of the image is. The size of the card body will vary based on how much metadata the item has.

So if you wanted the images to all be the same height (but not distort the ratio), there is a couple options:

• you could process all the "thumbs" images so that they are cropped to a specific pixel height. This would allow you to curate the bit of the image that shows up in the thumb, so might be useful in some cases.
• you could add some CSS to constrain the image cap, like .card-img-top { height: 200px; object-fit: cover; }. Check the options for object-fit.

The card body is more difficult to make consistent size, since titles and metadata tend to vary in length quite a bit in most collection. One approach would be to hide some of the metadata to make the cards the same size, but generally you don't want to hide the information. The best option is probably to add .h-100 to the cards which will make all the cards in the same row an equal height (see BS docs. To do that you have to edit "_includes/js/browse-js.html" where it generates the cards in javascript. Check line 42 like, var card = '<div class="item col-lg-4 col-md-6 mb-2"><div class="card h-100">';

(re-posting from CB Slack discussion)