How to show and hide custom popup content based on a column in your datasheet
You might have some custom popup content you'd only like to display under certain circumstances.
Luckily, with just a bit of custom HTML, this is possible.
In the above example, some popups display a video and some text, while others display a photo and some text. This is achieved by hiding the photo and photo text when there is no photo. To get started with hiding content in custom popups,
- 1
- Add your custom content to your popup. In this example, we added four custom content columns to the data tab in our datasheet: an image and a video column, and a column for some text to display. We set some of our popups to display images, and some to display videos.
-
- 2
- When hovering over dots with only images, you'll notice that there's a space beneath them for a video – even when you haven't selected a video to display.
-
- 3
- To avoid this, you can create another column called "media", set this to be either "image" or "video" in your datasheet and then wrap your video in a <div> with a class of "media". Here's what our custom HTML and our datasheet look like now:
-
<h1>{{species_type}}</h1> <img src="{{image}}"/> <p>{{info_image}}</p> <div class="{{media}}"> <iframe src="{{video}}" width="220" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <p>{{info_video}}</p> </div> <style> .image{ display:none; } </style>
-
- We added a style to set the class "image" to "display:none", which makes everything in that class disappear.
-
Click here to duplicate the example and get started with your own custom popups.