topic Re: Gallery card links not working in ArcGIS Hub Questions

Gallery card links not working

AileenProfir — Thu, 23 Jul 2020 15:08:03 GMT

We are using some gallery cards (similar to these Calcite Bootstrap) on our hub page (City of Sioux Falls GIS) but the links no longer work. Clicking on the "view" button that contains the <a href="#"> link does nothing. Have tried with and without the target attribtute but it makes no difference.

Example Code:

<div id="ARTWORK" class="gallery-card ember-view">
<div class="calcite-web">
<div class="card-base" style="text-align:center">
<div class="gallery-image">
<a href="https://storymaps.arcgis.com/stories/3d782788afd546938c82d2b68eb925c6"><img src="https://gis.siouxfalls.org/images/dataworks/Cards/Artworks_sm.png"></a>
</div>
<div class="card-content">
<div class="gallery-card-title">
<h4>Artwork</h4>
</div>
<p class="gallery-card-desc-snippet">Discover locations and information about City owned artworks</p>
<a class="btn btn-primary explore-button" href="https://storymaps.arcgis.com/stories/3d782788afd546938c82d2b68eb925c6" target="_top">View</a>
</div></div></div></div>

Other buttons on our site work fine, just not within gallery containers - has this been deprecated?

Appreciate any thoughts on how to fix this.

Aileen

Re: Gallery card links not working

BrianRollison — Thu, 23 Jul 2020 15:34:19 GMT

Hi Aileen Profir‌ -- it looks as if you are manually constructing your gallery using the class names of our typical gallery, this is causing a collision where a pseudo element is preventing selection of the button on your cards -- see the ::before in the DOM.

Using your own unique class names and CSS would likely resolve what you are experiencing.

If you don't mind, I'm curious as to why you are manually constructing your own gallery instead of using the out-of-the-box layout card. We are considering improvements to the Gallery Card, so feedback is welcome!

Re: Gallery card links not working

AileenProfir — Tue, 04 Aug 2020 12:56:52 GMT

Hi Brian,

We construct them manually because we want unique thumbnails and description texts for this page rather than what is listed in the metadata/item details for each item. Being able to customize these two features in the gallery cards would certainly make things easier for us.

Thanks,

Aileen

Re: Gallery card links not working

DanielMx — Fri, 30 Sep 2022 12:53:47 GMT

Same here. I created my gallery cards for the same reasons as Aileen, they work perfect, but they needed a little hover effect, as soon as I added the class="gallery-card ember-view" the hover effect looks great but the links get broken. If I understand correctly I would need to use my own class names correct? I'm just a GIS user that can follow directions very well not a programmer, would you know where can I get the style for the class="gallery-card ember-view" to add the hover movement to the card?

Thank you!