Change number of items in a row in gallery card

516
2
Jump to solution
04-15-2021 01:51 AM
MattiasEkström
Regular Contributor

Is there anyway to modify the gallery card so it can displays for example 6 items in a row?
I Think the item-boxes are to large on a big screen and would like them to be a bit smaller that more items would fit in each rows.

I would also like the whole box to be clickable not just the button, or at least the thumbnail image, is this possible?

Tags (3)
1 Solution

Accepted Solutions
KlaraSchmitt
Esri Contributor

Hi Mattias,

There is not presently any method to adapt the gallery card to 6 cards as the pattern was established to optimize the set for multiple device sizes within the typical fixed width site layout and 12 column grid used by Bootstrap 3. However, the good news is that Gallery Cards today are clickable in their entirety. 

If you are comfortable using CSS & HTML, you could use a static card layout (found under the plus icon) within the Text Card to add three cards to your Text Card canvas. Then using the Edit in HTML button at the bottom, you can switch to the code editor and add an additional 3 more cards. You will want to switch the Bootstrap grid container from col-md-4 to col-md-2 in order to get 6 cards. You might also want to tweak the col-sm-* class because 6 is very skinny in tablet devices. Lastly, these are not clickable in their entirety, so they do operate a bit different from our dynamic gallery card. You could wrap the thumbnail in a link though to get your desire effect. Also, unfortunately, uploading replacement images is not as easy as it could be, but you can read how to do it in my post here: https://community.esri.com/t5/arcgis-hub-questions/unable-to-interactive-edit-card-images/m-p/103394...

Site displaying 6 skinny static cardsSite displaying 6 skinny static cards

View solution in original post

2 Replies
KlaraSchmitt
Esri Contributor

Hi Mattias,

There is not presently any method to adapt the gallery card to 6 cards as the pattern was established to optimize the set for multiple device sizes within the typical fixed width site layout and 12 column grid used by Bootstrap 3. However, the good news is that Gallery Cards today are clickable in their entirety. 

If you are comfortable using CSS & HTML, you could use a static card layout (found under the plus icon) within the Text Card to add three cards to your Text Card canvas. Then using the Edit in HTML button at the bottom, you can switch to the code editor and add an additional 3 more cards. You will want to switch the Bootstrap grid container from col-md-4 to col-md-2 in order to get 6 cards. You might also want to tweak the col-sm-* class because 6 is very skinny in tablet devices. Lastly, these are not clickable in their entirety, so they do operate a bit different from our dynamic gallery card. You could wrap the thumbnail in a link though to get your desire effect. Also, unfortunately, uploading replacement images is not as easy as it could be, but you can read how to do it in my post here: https://community.esri.com/t5/arcgis-hub-questions/unable-to-interactive-edit-card-images/m-p/103394...

Site displaying 6 skinny static cardsSite displaying 6 skinny static cards

MattiasEkström
Regular Contributor

Thanks for your reply!

Good news about Gallery cards beeing clickable in their entirety, unfortunately my current project is a site within our portal so I guess I'll have to wait for that a little longer.

I will look into the static card layout within Text Card and give it a try and see if it would suite my needs better than the gallery card.

0 Kudos