topic Re: Gallery App vs Maps and Apps gallery in ArcGIS Instant Apps Questions

Gallery App vs Maps and Apps gallery

ChristopherJennings4 — Wed, 27 Jul 2022 15:23:31 GMT

The previous version of the Gallery was much more configurable. The ability to turn off the summary, author, etcetera was very useful. Now it is just a default template with a limited configuration that you cannot style to your environment. I have legacy Maps and Apps Gallery I still deploy on my hub page that now cannot be switched out or configured to match the legacy display on the hub page. Please add the additional configurable ability back.

Re: Gallery App vs Maps and Apps gallery

KellyHutchins — Wed, 27 Jul 2022 15:50:13 GMT

Hi Christopher

Thanks for the feedback. If you toggle off the Express option at the top of the config panel you'll see that there are options to disable the author, item type, date, view count etc. There isn't a config option for disabling the summary but we can look into that for a future release.

However you can turn off the summary using the Custom CSS option that can be found in the Theme and Layout section of the config panel. If you paste this css into the input box it will hide the summary and make the item cards a bit smaller:

.card-gc__snippet{display:none;} .card-gc__details-container{min-height:200px;}

Re: Gallery App vs Maps and Apps gallery

ChristopherJennings4 — Wed, 27 Jul 2022 16:50:22 GMT

Thank you, Kelly.
This does make the gallery app more useful as we did not want to obscure the content with a summary. One step further, the ability to add color to the cards and background? This will help with styling in a larger site such as Experience Builder and Hub sites.
Thanks again for the help!

Re: Gallery App vs Maps and Apps gallery

KellyHutchins — Wed, 27 Jul 2022 17:10:09 GMT

We have the ability to theme the app on our roadmap. In the meantime if you know css you can also style the app using the custom css options. Here is a quick - not very attractive example- that you could use to play around with. The colors in the example below are defined using hex codes. You can use a tool like this one to find a hex color for various color values: https://htmlcolorcodes.com/color-picker/

If there is a portion of the app you'd like to style that isn't covered by the css below let me know on this thread and I'll see what I can do to help.

/*The background color for the app header*/ .fg__header { background: #00bcd4; } /*The text color for the app header*/ .fg__header-title-section{ color:#fff; } /*The color of the back of the card that contains the thumbnail and desc*/ .card-gc__container, .card-gc__thumb-container{ background:#ddd; } /*Color for the background of the main area that contains the gallery*/ .fg__row{ background-color:#738593; } /* Text color for the text that shows the # of results*/ .fg-input-area__result-count{ color:#fff; } /*Colors for the navigation buttons at the bottom of the gallery*/ .nav-pager__btn{ color:#fff !important; }

Re: Gallery App vs Maps and Apps gallery

ChristopherJennings4 — Mon, 01 Aug 2022 13:07:39 GMT

Fantastic Kelly. We are very pleased with this solution. It has expanded our customization ability for the gallery.

Re: Gallery App vs Maps and Apps gallery

ChelseaRozek — Wed, 20 Dec 2023 17:46:57 GMT

Thanks for the CSS! How do you get the SVG icons in the bottom right corner to change their color? Also, is there a way to change the height here to get rid of empty space?

Update: Looks like I can get the icons with this. Please let me know if there's a more specific way.

/*Colors for icons on cards*/
svg {
fill:#344c5f !important;
}

Re: Gallery App vs Maps and Apps gallery

KellyHutchins — Thu, 21 Dec 2023 17:20:38 GMT

Chelsea,

You can try the following to reduce the amount of white space when no description is shown.

.card-gc__details-container{ min-height:0; }

Re: Gallery App vs Maps and Apps gallery

ChelseaRozek — Fri, 22 Dec 2023 14:07:57 GMT

works great! Thanks so much!

Re: Gallery App vs Maps and Apps gallery

swoiak — Fri, 27 Dec 2024 18:49:35 GMT

This thread has been really helpful. Is there a way to completely remove the icons at the bottom of the cards? I'm currently seeing the authoritative badge & the app launch icon (which is unnecessary because the thumbnail launches the app) & I'd like to not have these or the extra space at the bottom of the card. Attaching image. Thanks!

Re: Gallery App vs Maps and Apps gallery

KellyHutchins — Fri, 27 Dec 2024 19:18:01 GMT

You should be able to hide that using this custom css:

.card-gc__sub-container{ display:none;}

Re: Gallery App vs Maps and Apps gallery

swoiak — Mon, 30 Dec 2024 15:05:21 GMT

Thanks for the quick response. This did not work for me, though. Any other suggestions?

Re: Gallery App vs Maps and Apps gallery

KellyHutchins — Mon, 30 Dec 2024 20:56:16 GMT

I can take a look if your app is public and you send the link. Also are you using Online or Enterprise? If Enterprise which version?

Re: Gallery App vs Maps and Apps gallery

swoiak — Mon, 30 Dec 2024 21:25:05 GMT

Hi Kelly.

Here's the app (in ArcGIS Online) - Fairfax County Interactive Map Gallery

Re: Gallery App vs Maps and Apps gallery

KellyHutchins — Mon, 30 Dec 2024 22:15:42 GMT

Looks like there was a typo in the custom css with an extra closing brace } located after the title logic.

I made a few other updates to the css - can you try replacing all of your css with this:

.card-gc__container, .card-gc__thumb-container{ background:#eaeff1; } .fg__row{ background-color:#eaeff1; } .fg-input-area__result-count{ color:#d13636; } .nav-pager__btn{ color:#d13636; } .card-gc__title, .card-gc__sub-container, .card-gc__details{display:none;} .card-gc__details-container{ min-height:130px; }

Re: Gallery App vs Maps and Apps gallery

swoiak — Tue, 31 Dec 2024 13:26:55 GMT

Perfect! Thank you! Since you're an expert on this 😊, perhaps you also know if the hover over display can be adjusted. So, instead of seeing "Open in new tab", it could display the item summary, but still functionally launch the app when clicking on the thumbnail.

Re: Gallery App vs Maps and Apps gallery

swoiak — Tue, 31 Dec 2024 14:08:05 GMT

Also, is there a way to set the sorting of items to be reverse (descending) by title?

Re: Gallery App vs Maps and Apps gallery

KellyHutchins — Tue, 31 Dec 2024 19:01:18 GMT

I don't see a way to do this via custom css or the app config.

Re: Gallery App vs Maps and Apps gallery

KellyHutchins — Tue, 31 Dec 2024 19:02:08 GMT

You can use this url param to set the sortOrder to descending

https://fairfaxcountygis.maps.arcgis.com/apps/instant/filtergallery/index.html?appid=10af9929a4d2415793f475547c8f20e5&sortOrder=desc

&sortOrder=desc