Masonry Cards
Permalink Browser Info Environment
Hi,
Is there a way to make the masonry cards all the same height regardless of the amount of text each card has. It would look nice.
Regards
Is there a way to make the masonry cards all the same height regardless of the amount of text each card has. It would look nice.
Regards
| Type: | Discussion |
|---|---|
| Status: | Archived |
Thanks for answering so quickly.
The fixed height is not quite what i meant. The height of the cards should line up with the one with the longest text, just like the bootstrap grid cards line up with h-100.
I've managed to implement this div structure in the built-in atomik page list's view.php, but I'm failing with your view.php. Any hints?
https://getbootstrap.com/docs/5.2/components/card/...
.
The fixed height is not quite what i meant. The height of the cards should line up with the one with the longest text, just like the bootstrap grid cards line up with h-100.
I've managed to implement this div structure in the built-in atomik page list's view.php, but I'm failing with your view.php. Any hints?
https://getbootstrap.com/docs/5.2/components/card/...
<div class="row row-cols-1 row-cols-md-3 g-4"> <div class="col"> <div class="card h-100"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> </div> </div> </div> <div class="col"> <div class="card h-100"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card title</h5>
Viewing 15 lines of 38 lines. View entire code block.
Masonry script is recalculating height of items and ignores flex properties that stretch cards to 100%.
You have to set heights of elements, one way or another.
Try add this piece of code and see how it works.
Maybe I'll add this as option, but first I have to test if it is not breaking or clashing with anything.
This code won't work with option "Divide gallery into parts and reveal them using JavaScript",
since we don't know heights of items that are hidden.
It will make all cards equal height (not equal height per row, like flex css).
packages/grand_gallery/blocks/grand_gallery/js_files/gallery-with-masonry.js: line 27
You have to set heights of elements, one way or another.
Try add this piece of code and see how it works.
Maybe I'll add this as option, but first I have to test if it is not breaking or clashing with anything.
This code won't work with option "Divide gallery into parts and reveal them using JavaScript",
since we don't know heights of items that are hidden.
It will make all cards equal height (not equal height per row, like flex css).
packages/grand_gallery/blocks/grand_gallery/js_files/gallery-with-masonry.js: line 27
// Set equal height of all cards // Not recommended to use with: "Divide gallery into parts and reveal them using JavaScript" var maxImageHeight = null; var maxCardTextHeight = null; var itemOuterNode = $(this).find('.js-gg-item-outer'); itemOuterNode.each(function(index) { var imageHeight = $(this).find('.gg-item').innerHeight(); if (imageHeight > maxImageHeight || maxImageHeight === null) { maxImageHeight = imageHeight; } var cardTextHeight = $(this).find('.gg-item-card-text').innerHeight(); if (cardTextHeight > maxCardTextHeight || maxCardTextHeight === null) { maxCardTextHeight = cardTextHeight; } });
Viewing 15 lines of 19 lines. View entire code block.
Thank you very much, perfect compromise, much better than the fixed height css solution.
nothing built-in, but you can add some css.
Easiest way would be setting the same height to .gg-item-card-text (wrapper for title + description + tags)
1. Edit block -> Settings tab -> Enable custom settings for this block -> Dimensions tab -> Masonry random heights
Set it to 100%.
You can also change it globally in Global block settings
/dashboard/grand_gallery/block_settings
Images will have equal height now.
2. Now you want to go to "Tracking codes" page in dashboard and add some css there in "Header Tracking Codes" field.
You can also paste it manually somewhere in you files (header.php) if you have FTP access.
This should make cards equal in height, change height in that css snippet to match highest card.
If you need, I can show you also:
how to change height for different screen breakpoints (obviously texts can have different height on phones/desktop)
or
make this code gallery specific.