Best way to create custom card gallery with connected data?
We are creating a site which will use an internal collection to generate 'Our Services' pages. We also want to create a 'main' Services page, which should have a clickable media card gallery - i.e., one card for each service, containing an image and descriptive text. The design we're aiming for is this:
We're savvy with CSS, so not afraid of customising the look of the cards by hand-coding. However, as Duda newbies, we're getting a bit confused and stuck on some basic points:
Question 1: What is the best widget to use for this?
It seems both the 'List' and the 'Photo Gallery' might be good candidates. The Photo Gallery seems to be easier for us to customise - we can achieve the look we want with a lot less CSS fiddling. But it seems that if we populate the content of the Photo Gallery via connected data, it can only be used as a 'photo lightbox' - i.e., clicking the cards always opens a photo lightbox, and we can't seem to be able to configure it to go to that service's page. Is that the intended use, and we are really supposed to use the 'List' widget here? Or are we missing something obvious?…
Question 2: How do we link each card to its corresponding dynamic page?
In our test collection, each page has its 'item' field with a unique URL, as required. However, regardless of whether we use the Photo Gallery or List widget, the 'Link' option in the connected data dialogue always seems to be grayed out:
Are we supposed to create a 'link' field in the collection, in order to be able to link here? Seems redundant, considering that each record already has a URL - are we missing something?…
Best Answer
-
Hi @visioncraft,
Great questions. I reached out to the team and got some helpful answers below:
Once you connect one of the widgets in that list (looks like you are working with the photo gallery), it'll enable the "Enable links" feature, which will no longer display the lightbox but instead redirect to the individual service page.
https://support.duda.co/hc/en-us/articles/360061888093-Add-Lists-to-Display-Dynamic-Pages
For the links themselves, your links/buttons will get set to the individual dynamic page automatically as well.
If you're still getting stuck our Support team can help!
1
