topic Re: Resize image card in a row in ArcGIS Hub Questions

Resize image card in a row

Ed_ — Thu, 22 Jun 2023 18:57:24 GMT

I have a bunch of `image cards` in a `row` card, however I am unable to all of them have the same size. The `Scale Image to Fill` option does not work either. Like no matter what I am unable to have the last two image cards have the same size as the rest of the image cards.

How can I fix this?

Re: Resize image card in a row

Mark_Hébert — Thu, 22 Jun 2023 19:43:29 GMT

Hey Saadullah - can you share the config or code that is applied?

Re: Resize image card in a row

KlaraSchmitt — Thu, 22 Jun 2023 20:34:07 GMT

Hello @Ed_,

You are likely running into issues because you have 7 images and Hub uses a 12-column grid system to define our rows. At the moment you have 5 image cards that are each 2-columns wide (utilizing 10 columns) and that leaves you with only 2 spare columns of space, so each one of your remaining image cards can only be 1-column wide. You may want to consider stacking your images in two rows and adding spacers on either side.

Re: Resize image card in a row

PaulTHEDUDELang — Fri, 23 Jun 2023 02:14:35 GMT

I also spent many hours trying to format images but with Bootstrap 3 within HUB just not happening. Went with the Gallery Card for the best overall results. I do hear Bootstrap 4 may have flex grids

Re: Resize image card in a row

Ed_ — Tue, 27 Jun 2023 15:44:38 GMT

Hi Mark, thank you for the quick response. I didn't use any code as I dragged the image cards to the row.

Re: Resize image card in a row

Ed_ — Tue, 27 Jun 2023 15:45:59 GMT

Thank you for suggesting that.

Re: Resize image card in a row

Ed_ — Tue, 27 Jun 2023 19:45:19 GMT

Hi Klara, thank you for the quick response. However, this is not an ideal solution as you can see below that the image cards don't have the same size in both rows. Now, I know I can fix that by adding more spacers in the second row but, that's like a quick hack fix.

An ideal solution would be to have the ability to resize the image card just like in Adobe and/or Experience Builder.

Re: Resize image card in a row

KlaraSchmitt — Tue, 27 Jun 2023 20:38:24 GMT

@Ed_

Yes, I understand it's not ideal. However, until we redo our grid structure, which is a large-scale effort that is in fact on our radar, we're limited in how we can handle card resizing and the total columns used by cards in a row must equal 12. And yes, if you do not wish to write HTML to achieve your desired affect in a single 12-column Text Card, I would advise the use of more spacers.

Re: Resize image card in a row

Ed_ — Thu, 29 Jun 2023 12:21:40 GMT

Good day Klara,

I am glad to know that it's under consideration. Speaking of HTML, I am not super familiar to it so, can you please provide a sample code that I can try to modify for my use case?

Re: Resize image card in a row

Ed_ — Wed, 05 Jul 2023 14:19:04 GMT

Good morning @KlaraSchmitt, hope all is well, any update on the requested sample HTML code?

Thank you

Re: Resize image card in a row

KlaraSchmitt — Wed, 05 Jul 2023 14:59:58 GMT

Hello @Ed_,

Unfortunately, you would need to do something fairly complex to make seven images look good in a 12-column grid and you would likely need to have a sound understanding of css-grid, flex-box and/or media queries. I don't have much experience with css-grid and while I did try a quick implementation of your premise using flexbox on my own site, it did not look good when content was forced to wrap on smaller devices. Flexbox doesn't do wrapping automatically and I think even if I did provide you with baseline code, you wouldn't like the output. As you've stated that you aren't familiar with editing HTML, I think you would find it difficult to modify and I think you will have a better look if you use spacers. You may also try searching this forum for people who've done similar grid implementations and see if there's anything you want to try out.

Re: Resize image card in a row

Ed_ — Wed, 05 Jul 2023 16:32:33 GMT

No worries @KlaraSchmitt, I would actually greatly appreciate an ESRI instructor lead course on how to use HTML/CSS and similar coding techniques in Hub.

Cheers

Re: Resize image card in a row

AmyHox — Fri, 09 Aug 2024 22:26:51 GMT

Glad I found this thread! Thanks for your suggestion as well Paul. This is my first Hub that I've created so I'm just figuring things out. I have 8 sites that I am trying to link to and was originally using an Image that I was going to link a page to but I was having the same issue as you Ed, the image cards were all different sizes. When I used the Gallery card I was able to specify how many cards I want per row, using the Manual option and then going to Select Content and selecting Sites and Pages under the Collection group on the left side. So I'm still able to directly link to my Sites but have the images be the same size on the rows throughout. ALSO for anyone that is really confused about how to update the thumbnail so that the logo on the Gallery card is updated, it's not in the Hub Site itself, you have to go back to your AGOL user page and update THAT thumbnail associate with the Hub Page that was created in AGOL when you created the page in Hub... I just spent way too much time trying to figure that out 😅