Hi everyone! I’ve got an Airtable database embedded on my WordPress site and it’s working great. The gallery view displays nicely and everything looks good. However, I’m running into an issue with user interaction.
When visitors click on any image in the gallery view, it only shows a larger version of the picture. What I really need is for those image clicks to redirect users to different pages on my website.
Airtable support recommended using no-code platforms like Softr or Nolocco, but those solutions are way over my budget right now. The pricing for their embed features is just too much for what I can afford.
Has anyone found a workaround for this? I’m looking for a budget-friendly way to make Airtable gallery images clickable and redirect to custom URLs. Any suggestions would be really helpful!
WordPress shortcodes with custom post meta fields work great for this. Had the same issue with a client site - needed clickable portfolio images from Airtable. Here’s what worked: I built a custom shortcode that pulls from both Airtable and WordPress custom fields. Each image gets matched to a WordPress post/page ID through meta fields. The shortcode spits out gallery HTML with proper anchor tags around each image. CSS makes it look exactly like Airtable’s native gallery. Best part? You control the click behavior instead of fighting Airtable’s lightbox. You’ll need to create the shortcode function, add custom fields to posts, and style with CSS. Way more reliable than JavaScript hacks and totally free.
Had the same issue last year. I solved it with JavaScript and custom fields in Airtable. Here’s what worked: I added a URL field to each record in my Airtable base, then used a simple JavaScript overlay on the WordPress page that intercepts clicks on gallery images. The script reads the image metadata and redirects to whatever URL I set in the corresponding field. You’ll need basic coding skills but it’s not complicated. Just modify your theme’s functions.php to load the custom script and make sure your Airtable records have the destination URLs. Took me half a day to set up and it’s been running perfectly for months - no subscription fees.
i use a wordpress plugin called “custom html” and build the gallery from scratch. more work upfront, but you control exactly where each image links. i export the image urls from airtable and create a basic html gallery with anchor tags. takes about an hour for 20-30 images and works great - no javascript issues or annoying overlays.
CSS pointer events and absolute positioning work great for this. Just overlay invisible clickable areas on top of your gallery images.
I did this for a client with an Airtable product catalog. Created transparent divs that sit exactly on top of each image - these divs hold the actual links to your pages.
Use jQuery to generate the overlay links from a mapping table. Inspect your Airtable gallery to grab the image selectors, then position your overlays with CSS transforms.
The tricky bit is keeping overlays aligned when the gallery resizes. I used viewport units and flexbox to keep it responsive.
This bypasses Airtable’s click behavior without any paid tools. You’ll just need a simple JSON file or WordPress custom fields that maps image names to URLs.
Takes 2-3 hours if you’re comfortable with basic JavaScript and CSS positioning.
