I spent some time thinking of a name for the cards that display the books and movies on the “reading” and “watching” pages. I settled on calling it “Media card” (.media-card) for now. I’m open to any suggestions you might have.

For the popup, I added some padding to ensure there was some space at the top instead of the popup taking up the entire page. I was confused about adjusting the height, but after some trial and error, adjusting the padding and checking the “scroll to the top of the popup” achieved the effect I was looking for.

As for the entrance and exit animations, I had to add “Interactions” to the media card. I used “Click” -> “Show Element” to target the popup template and also added “Click” -> “Start animation,” setting the animation to slideInUp.

Tip: I’ve learned that you need to include the “Template” element in the card and set it to the popup template you want to show. This will help the popup to show the correct post content. Otherwise, BricksBuilder confuses the postID with the current page ID or template ID, and the popup displays the wrong content.

For the exit animation, I set the interaction for the “go back” button. One might think to use “Click” -> “Hide Element,” but actually, only using “Click” -> “Start animation” and setting the animation to slideInDown was enough. Remember to target the popup. The issue I’m currently facing is that the animation doesn’t play when clicking outside the popup to close it. I’ll look into this further and let you know when I find the solution.

As for the content, since this template is used for both “reading” and “watching,” and they have different statuses and text fields like “book author” and “director/creator,” I set up conditions for those fields to only show if they are “not empty.”

I opened the developer tools, checked on mobile, and saw that it displayed well on mobile, including the animations. I’m super proud and satisfied with how this turned out. I’m looking forward to the launch of this website; this has been such a joy to build and is one of my favorite projects.

The next objective is to set up the single post template for the Media card. I don’t think anyone will visit this template, but in case this page gets indexed and someone visits it via a search engine, or if I decide to add share options to these media in the future, having the single post template for this page is best practice. It’s supposed to be as easy as copying and pasting the existing content from the popup to the single post template.

Stay tuned for more blog update, I will talk to you soon,
-Binh