Lightbox with Posts (Tiles) element

[DanielExMachina]

Hi there. Last year I set up a video portfolio site using The Grid plugin. I just saw in your help article that The Grid is no longer active, and you recommend all X users switch to using Posts elements instead.

I’m trying to re-make a gallery of videos using Posts (Tiles). It’s almost done (you can see the home page here) - I just need to set it so a video player lightbox opens when you click on a tile.

With The Grid, I simply added a Play button icon in the Skin Builder, and it automatically opened a lightbox with the video ready to play (all the posts on my site have a Vimeo or YouTube video embedded at the top).

How can I link lightboxes to Posts (Tiles) elements?

[christian]

Hey @one_eyed_man,

There are 2 components you need to set up.

1. Inside the Post Tile, insert a Modal element then set it up to display a video inside the modal like shown in this user tutorial https://youtu.be/nKiGJWZIlws

2. The video in the tutorial is added to the modal content manually. What you’ll need is dynamic insertion of the video so you’ll need ACF Pro and the Dynamic Content feature to get the ACF Field data which is your video. If you’re new to setting up ACF Pro and Dynamic Content, please check out our video tutorial below.

Loopers: Getting Started with ACF Pro

Hope that helps.

[DanielExMachina]

Thank you, your advice led me in the right direction. It took quite a bit of fine-tuning but I got it all set up.

To anyone who reads this in the future - I started by creating a field group in ACF Pro with one text field and two image URL fields:

I created a separate post for every one of my videos and entered the Vimeo embed code in the video_url field, uploaded a thumbnail image to the static_thumb field, and uploaded a Vimeo-generated 4-5 second gif to the hover_gif field. I also manually entered my project role and video category into the Excerpt section of each post (e.g. Editor | Corporate Promo).

In Cornerstone I added the Posts (Tiles) dynamic element to an empty single-row section. My Article div has five children:

• Hover GIF div with Looper Provider input of {{dc:acf:post_field field=“hover_gif”}}, containing an Image element with source URL of {{dc:acf:post_field field=“hover_gif”}} and Looper Consumer set to All. Under Effects on the div I set the opacity to 0 so the gif fades in on hover. Z-index = 1
• Published field with HTML of {{dc:post:excerpt}}. Z-index = 0
• Modal containing a Video element with the Embed code set to {{dc:acf:post_field field=“video_url”}}. Also added custom attribute with this Name (and no Value) to prevent videos from autoplaying when toggle is not opened: data-rvt-offscreen-reset
• The Title headline field containing this text content: {{dc:post:title}}. Z-index = 0
• Static Thumbnail div with Looper Provider input of {{dc:acf:post_field field=“static_thumb”}}, containing an Image with source URL of {{dc:acf:post_field field=“static_thumb”}} and Looper Consumer set to All. Z-index = -4

The hardest part was trying to center the toggle (play button graphic) within the tile while still having the lightbox dark overlay be full screen when the toggle is open. This is the final code I added to the modal’s Element CSS:

/*Center modal play button within parent tile*/
$el {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
}

/*Force modal full screen when open*/
$el.x-modal {
  position: fixed !important; 
  width: 100% !important; 
  height: 100% !important; 
  top: 50% !important; 
  left: 50% !important; 
  transform: translate(-50%, -50%) !important;
}

/*Move lightbox close button out from under navbar on desktop*/
@media(min-width: 979px) {
  $el.x-modal .x-modal-close {
    top: 10%;
    right: 2%;
    }
}

Have fun. And thanks again for the resources X team!

[ruenel]

You are most welcome, @one_eyed_man as always.