Post Info Lightboxes in Oxygen using OxyExtras

This tutorial provides the steps to set up post content lightboxes in Oxygen using the Lightbox component of OxyExtras.

We shall set up a grid of six recent posts showing the featured image and title for each – which when clicked will show post’s title, excerpt, read more button and the image in a lightbox.

A Repeater component will be used – meaning you can show any data that is attached to posts for example, custom field values.

Step 1

Install and activate OxyExtras.

Tick Lightbox in OxyExtras’ settings to enable the component.

Step 2

Let us register a custom image size for our images.

Install and activate Code Snippets plugin.

Go to Snippets > Add New.

Title: Custom image sizes

Code:

add_image_size( 'latest-post', 320, 210, true );

Set the snippet to run everywhere. Save changes and activate.

Regenerate thumbnails if needed.

Step 3

Manual setup instructions follow. 1-click paste Hydrogen code is provided at the end.

In the Oxygen editor add a Repeater inside a Section.

In this example we shall set the WP Query to this manual query:

post_type=post&posts_per_page=6&no_found_rows=true

Repeater > Grid Layout > Enable Grid.

Tick “Auto-Fit Columns”.

Min Width: 300px
Gap: 60px (for both columns and rows)

Select the Repeater’s Div and add a Div inside. This will be the container for the elements that are shown for each post. You may want to add a featured image and post title.

To specify the custom image size for the image, select one of the default sizes like medium and replace that with latest-post in the generated shortcode.

At Advanced > Custom CSS, add:

cursor: pointer;

To specify that lightbox (to be added next) be opened on clicking this Div, add a class of open-lightbox to this Div.

Select the Repeater’s Div and add a Lightbox component.

Lightbox content: Inline (elements on current page)
Inline content: Display elements inside lightbox

Lightbox styles > Width: 85%

Add a Columns component (60 – 40).

Change the width of left Div to 70% and add post title, excerpt and a button that links to the permalink.

To add the excerpt, add a Text component > double click the text (and delete, if using Safari) > Insert Data button in the top toolbar > PHP Function Return value.

Function Name:
get_the_excerpt

Click INSERT.

In the right column Div, add the featured image.

Save and check on the front end.

If there are no further changes to be done you could set In-builder visibility for the Lightbox to Hidden.

To navigate from one post to another inside the lightbox, set Group into slides to Group.

That’s it!

If you would like to paste the entire Section using Hydrogen Pack or Hydrogen Paste, here’s the code:

eyJzb3VyY2UiOiJodHRwczovL294eWdlbi5sb2NhbCIsImNvbXBvbmVudCI6W3siaWQiOjIsIm5hbWUiOiJjdF9zZWN0aW9uIiwib3B0aW9ucyI6eyJjdF9pZCI6MiwiY3RfcGFyZW50IjoxMDAwMDIsInNlbGVjdG9yIjoic2VjdGlvbi0yLTIiLCJvcmlnaW5hbCI6eyJnbG9iYWxjb25kaXRpb25zIjpbXX19LCJjaGlsZHJlbiI6W3siaWQiOjIxLCJuYW1lIjoiY3RfaGVhZGxpbmUiLCJvcHRpb25zIjp7ImN0X2lkIjoyMSwiY3RfcGFyZW50IjoyLCJzZWxlY3RvciI6ImhlYWRsaW5lLTIxLTIiLCJvcmlnaW5hbCI6eyJmb250LXdlaWdodCI6IjUwMCIsImZvbnQtc2l6ZSI6IjQwIn0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwiY3RfY29udGVudCI6IkxhdGVzdCBQb3N0cyJ9LCJkZXB0aCI6MX0seyJpZCI6MjMsIm5hbWUiOiJveHlfZHluYW1pY19saXN0Iiwib3B0aW9ucyI6eyJjdF9pZCI6MjMsImN0X3BhcmVudCI6Miwic2VsZWN0b3IiOiJfZHluYW1pY19saXN0LTIzLTIiLCJvcmlnaW5hbCI6eyJ1c2VfYWNmX3JlcGVhdGVyIjoiZmFsc2UiLCJhY2ZfcmVwZWF0ZXIiOiJmaWVsZF82MDNkZjAzNDgyMDMzIiwiZGlzcGxheSI6ImdyaWQiLCJncmlkLWNvbHVtbnMtYXV0by1maXQiOiJ0cnVlIiwiZ3JpZC1jb2x1bW4tZ2FwIjoiNjAiLCJncmlkLXJvdy1nYXAiOiI2MCIsIndwX3F1ZXJ5IjoibWFudWFsIiwicXVlcnlfcG9zdF90eXBlcyI6W10sInF1ZXJ5X2FyZ3MiOiJwb3N0X3R5cGU9cG9zdCZwb3N0c19wZXJfcGFnZT02Jm5vX2ZvdW5kX3Jvd3M9dHJ1ZSIsImdyaWQtY29sdW1uLW1pbi13aWR0aCI6IjMwMCIsImdyaWQtanVzdGlmeS1pdGVtcyI6ImNlbnRlciIsIm1hcmdpbi10b3AiOiIzMCJ9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2V9LCJjaGlsZHJlbiI6W3siaWQiOjI0LCJuYW1lIjoiY3RfZGl2X2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6MjQsImN0X3BhcmVudCI6MjMsInNlbGVjdG9yIjoiZGl2X2Jsb2NrLTI0LTIifSwiY2hpbGRyZW4iOlt7ImlkIjoxMDQsIm5hbWUiOiJjdF9kaXZfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjoxMDQsImN0X3BhcmVudCI6MjQsInNlbGVjdG9yIjoiZGl2X2Jsb2NrLTEwNC0yIiwib3JpZ2luYWwiOnsiY3VzdG9tLWNzcyI6ImN1cnNvcjogcG9pbnRlcjsifSwiY2xhc3NlcyI6WyJvcGVuLWxpZ2h0Ym94Il0sImFjdGl2ZXNlbGVjdG9yIjoib3Blbi1saWdodGJveCJ9LCJjaGlsZHJlbiI6W3siaWQiOjk1LCJuYW1lIjoiY3RfaW1hZ2UiLCJvcHRpb25zIjp7ImN0X2lkIjo5NSwiY3RfcGFyZW50IjoxMDQsInNlbGVjdG9yIjoiaW1hZ2UtOTUtMiIsIm9yaWdpbmFsIjp7InNyYyI6IltveHlnZW4gY3Rfc2lnbl9zaGEyNTY9JzA0YWI3OThjOTkxMDk4OWJiZDU5NmVlZGFjZmRjNTJhMGRiYmJhMjJkODNjNDY3M2U4ODY2YzcwNTYzZGEwNGQnIGRhdGE9J2ZlYXR1cmVkX2ltYWdlJyBzaXplPSdsYXRlc3QtcG9zdCcgXSIsInNyY2R5bmFtaWMiOnRydWV9LCJjbGFzc2VzIjpbXSwiYWN0aXZlc2VsZWN0b3IiOmZhbHNlLCJjdF9jb250ZW50IjoiIn0sImRlcHRoIjoxfSx7ImlkIjoxMDUsIm5hbWUiOiJjdF9oZWFkbGluZSIsIm9wdGlvbnMiOnsiY3RfaWQiOjEwNSwiY3RfcGFyZW50IjoxMDQsInNlbGVjdG9yIjoiaGVhZGxpbmUtMTA1LTIiLCJvcmlnaW5hbCI6eyJ0YWciOiJoNCIsImZvbnQtd2VpZ2h0IjoiNTAwIiwibGluZS1oZWlnaHQiOiIxLjIiLCJmb250LXNpemUiOiIxOCIsIm1hcmdpbi10b3AiOiIxMCJ9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsImN0X2NvbnRlbnQiOiI8c3BhbiBpZD1cImN0LXBsYWNlaG9sZGVyLTEwNlwiPjwvc3Bhbj4ifSwiY2hpbGRyZW4iOlt7ImlkIjoxMDYsIm5hbWUiOiJjdF9zcGFuIiwib3B0aW9ucyI6eyJjdF9pZCI6MTA2LCJjdF9wYXJlbnQiOjEwNSwic2VsZWN0b3IiOiJzcGFuLTEwNi0yIiwiY3RfY29udGVudCI6IltveHlnZW4gY3Rfc2lnbl9zaGEyNTY9J2UwNTQ2MGQxZDg1YTYwZjU4YzBlMjhhNzU2NzYzNzE4YWIxMDYwZjhlOWMyMzIwY2QzZDM2OWJmZjJmYTc1ODEnIGRhdGE9J3RpdGxlJyBdIn0sImRlcHRoIjoxfV0sImRlcHRoIjoxfV0sImRlcHRoIjo2fSx7ImlkIjozMCwibmFtZSI6Im94eS1saWdodGJveCIsIm9wdGlvbnMiOnsiY3RfaWQiOjMwLCJjdF9wYXJlbnQiOjI0LCJzZWxlY3RvciI6Ii1saWdodGJveC0zMC0yIiwib3JpZ2luYWwiOnsib3h5LWxpZ2h0Ym94X2NvbnRlbnRfdHlwZSI6ImlubGluZSIsIm94eS1saWdodGJveF91cmwiOiJbb3h5Z2VuIGN0X3NpZ25fc2hhMjU2PSdhZGY3N2Y4M2RkZDBiM2U5YmM1MWJhNDAwMDkzYTRkNTJjNGQzYTU5ZTFkMzU2MTUxYzk2YjFhY2Q1MTJkNmNlJyBkYXRhPSdhY2ZyZXBhcnJheScgZmllbGQ9J3ZpZGVvJyByZXBlYXRlcj0nZmllbGRfNjAzZGYwMzQ4MjAzMycgXSIsIi0tZXh0cmFzLWxpZ2h0Ym94LWNvbnRlbnQtYmciOiIjZmZmZmZmIiwiLS1leHRyYXMtbGlnaHRib3gtd2lkdGgtdW5pdCI6IiUiLCItLWV4dHJhcy1saWdodGJveC13aWR0aCI6Ijg1Iiwib3h5LWxpZ2h0Ym94X2lubGluZV9jb250ZW50IjoiaW5uZXIiLCJveHktbGlnaHRib3hfbWF5YmVfbXVsdGlwbGUiOiJmYWxzZSIsIi0tZXh0cmFzLWxpZ2h0Ym94LWJ1aWxkZXItdmlzaWJpbGl0eSI6ImJsb2NrIn0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZX0sImNoaWxkcmVuIjpbeyJpZCI6MTMwLCJuYW1lIjoiY3RfbmV3X2NvbHVtbnMiLCJvcHRpb25zIjp7ImN0X2lkIjoxMzAsImN0X3BhcmVudCI6MzAsInNlbGVjdG9yIjoibmV3X2NvbHVtbnMtMTMwLTIifSwiY2hpbGRyZW4iOlt7ImlkIjoxMzIsIm5hbWUiOiJjdF9kaXZfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjoxMzIsImN0X3BhcmVudCI6MTMwLCJzZWxlY3RvciI6ImRpdl9ibG9jay0xMzItMiIsIm9yaWdpbmFsIjp7IndpZHRoIjoiNzAuMDAiLCJ3aWR0aC11bml0IjoiJSJ9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2V9LCJjaGlsZHJlbiI6W3siaWQiOjU2LCJuYW1lIjoiY3RfaGVhZGxpbmUiLCJvcHRpb25zIjp7ImN0X2lkIjo1NiwiY3RfcGFyZW50IjoxMzIsInNlbGVjdG9yIjoiaGVhZGxpbmUtNTYtMiIsIm9yaWdpbmFsIjp7InRhZyI6Img0IiwiZm9udC13ZWlnaHQiOiI1MDAiLCJmb250LXNpemUiOiIyMCIsImxpbmUtaGVpZ2h0IjoiMS4yIn0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwiY3RfY29udGVudCI6IjxzcGFuIGlkPVwiY3QtcGxhY2Vob2xkZXItNTdcIj48L3NwYW4+In0sImNoaWxkcmVuIjpbeyJpZCI6NTcsIm5hbWUiOiJjdF9zcGFuIiwib3B0aW9ucyI6eyJjdF9pZCI6NTcsImN0X3BhcmVudCI6NTYsInNlbGVjdG9yIjoic3Bhbi01Ny0yIiwiY3RfY29udGVudCI6IltveHlnZW4gY3Rfc2lnbl9zaGEyNTY9J2UwNTQ2MGQxZDg1YTYwZjU4YzBlMjhhNzU2NzYzNzE4YWIxMDYwZjhlOWMyMzIwY2QzZDM2OWJmZjJmYTc1ODEnIGRhdGE9J3RpdGxlJyBdIn0sImRlcHRoIjoxfV0sImRlcHRoIjoxfSx7ImlkIjo3MywibmFtZSI6ImN0X3RleHRfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjo3MywiY3RfcGFyZW50IjoxMzIsInNlbGVjdG9yIjoidGV4dF9ibG9jay03My0yIiwib3JpZ2luYWwiOnsibWFyZ2luLXRvcCI6IjIwIn0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwiY3RfY29udGVudCI6IjxzcGFuIGlkPVwiY3QtcGxhY2Vob2xkZXItODdcIj48L3NwYW4+PGJyPiJ9LCJkZXB0aCI6MSwiY2hpbGRyZW4iOlt7ImlkIjo4NywibmFtZSI6ImN0X3NwYW4iLCJvcHRpb25zIjp7ImN0X2lkIjo4NywiY3RfcGFyZW50Ijo3Mywic2VsZWN0b3IiOiJzcGFuLTg3LTIiLCJvcmlnaW5hbCI6e30sImN0X2NvbnRlbnQiOiJbb3h5Z2VuIGRhdGE9J3BocGZ1bmN0aW9uJyBmdW5jdGlvbj0nZ2V0X3RoZV9leGNlcnB0J10ifX1dfV0sImRlcHRoIjoyfSx7ImlkIjoxMzMsIm5hbWUiOiJjdF9kaXZfYmxvY2siLCJvcHRpb25zIjp7ImN0X2lkIjoxMzMsImN0X3BhcmVudCI6MTMwLCJzZWxlY3RvciI6ImRpdl9ibG9jay0xMzMtMiIsIm9yaWdpbmFsIjp7IndpZHRoIjoiMzAuMDAiLCJ3aWR0aC11bml0IjoiJSJ9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2V9LCJjaGlsZHJlbiI6W3siaWQiOjE1MSwibmFtZSI6ImN0X2ltYWdlIiwib3B0aW9ucyI6eyJjdF9pZCI6MTUxLCJjdF9wYXJlbnQiOjEzMywic2VsZWN0b3IiOiJpbWFnZS0xNTEtMiIsIm9yaWdpbmFsIjp7InNyYyI6IltveHlnZW4gY3Rfc2lnbl9zaGEyNTY9JzA0YWI3OThjOTkxMDk4OWJiZDU5NmVlZGFjZmRjNTJhMGRiYmJhMjJkODNjNDY3M2U4ODY2YzcwNTYzZGEwNGQnIGRhdGE9J2ZlYXR1cmVkX2ltYWdlJyBzaXplPSdsYXRlc3QtcG9zdCcgXSIsInNyY2R5bmFtaWMiOnRydWV9LCJjdF9jb250ZW50IjoiIn0sImRlcHRoIjoxfV0sImRlcHRoIjoyfV0sImRlcHRoIjoyfSx7ImlkIjoyNDQsIm5hbWUiOiJjdF9saW5rX2J1dHRvbiIsIm9wdGlvbnMiOnsiY3RfaWQiOjI0NCwiY3RfcGFyZW50IjozMCwic2VsZWN0b3IiOiJsaW5rX2J1dHRvbi0yNDQtMiIsIm9yaWdpbmFsIjp7InVybCI6IltveHlnZW4gY3Rfc2lnbl9zaGEyNTY9JzM0MDg2OWQ4NzAzNWUwZTgwN2VkMjg4NjMzN2MzM2EyMTllMDdhYTdmMTY1YzQ4NTllYTNlOWYxMjMwYWE0MTcnIGRhdGE9J3Blcm1hbGluaycgXSIsIm1hcmdpbi1sZWZ0IjoiMjAiLCJ1cmxfZW5jb2RlZCI6InRydWUifSwiYWN0aXZlc2VsZWN0b3IiOmZhbHNlLCJjdF9jb250ZW50IjoiUmVhZCBtb3JlIn0sImRlcHRoIjoxfV0sImRlcHRoIjoxfV0sImRlcHRoIjo1fV0sImRlcHRoIjo0fV0sImRlcHRoIjozfV0sImNsYXNzZXMiOnsib3Blbi1saWdodGJveCI6eyJvcmlnaW5hbCI6e319fSwiY29sb3JzIjp7fX0=