Blog post with 1 gallery with text between photos

I would like to know how I would go about creating a similar type of post as the link. All of the photos on this post are clickable to expand view into a lightbox containing all photos in the post. Yet the photos are arranged separately in the post with text sections separating them.

Link to example post

I’m currently using X theme with the Ethos stack. Is there a way to get this done using the included extensions or built-in wordpress functions?

Hello @goods1904,

Thanks for writing in!

You can either use Essential Grid or Envira Gallery plugin to create gallery in blog posts. Both the plugins can be installed from X > Validation > Extensions. Here’s getting started guide that you can refer to learn more.

Thanks.

Thank you for the response.

I have used those extensions, which are great, but I haven’t found a way to use them how I would like to.

I’ve resorted to using multiple galleries in a post. When placing multiple grids in a post, the lightbox only shows the photos in that particular grid, not all of the photos on the page.

How do would I use either Essential Grid or Envira Gallery to create one single gallery and place text that breaks up the photos?


How Envira is currently working for me:
In order to place text between groups of photos, I must make and insert a gallery, then insert a text box, then make and insert another gallery, then insert a text box, and so forth.
Each gallery acts independent of each other, and has their own lightbox.

Working example shown here: https://enviragallery.com/demo/layouts-demo/

Link to photo example above


What I am trying to achieve:
One single gallery where I can insert text between photos.
Groups of photos are separated, yet all are connected to the same gallery and lightbox.

Working example shown here: https://petrolicious.com/articles/how-the-fulvia-coupe-1-6-hf-helped-chart-the-course-for-decades-of-lancia-world-rally-supremacy

Link to photo example above

Hi @goods1904,

We can achieve it with the lightbox and gallery shortcode.
See this: https://screencast-o-matic.com/watch/cq12iETplA

Add a Text element. Use the RICH TEXT option, click the Image icon then when the MEDIA popup opens, you can see Create Gallery on top left. See that all galleries are connected. I can just open one and I can access all other images.

Thank you for the response!

1.) How would I make the lightbox, display images at a smaller size?

I see the information available here https://theme.co/apex/forum/t/shortcodes-lightbox/165, and see that there is a shortcode for “prev_scale” and “next_scale”.

Is there a shortcode to adjust the scale of the image that is currently being viewed?

2.) I may have missed it, but how do I remove the border around the images displayed in the gallery?

3.) How do I decrease the default spacing/margin between images, for both columns and rows?

Hello @goods1904,

Thanks for updating the thread. :slight_smile:

As of now there is no shortcode for currently viewed image.

Please add following CSS under X > Theme options > CSS:

.x-img-thumbnail {
    border: none !important;
    box-shadow: none !important;
}

Please add following CSS under X > Theme options > CSS:

.x-img-thumbnail {
    border: none !important;
    box-shadow: none !important;
}

.x-block-grid.two-up>li {
    margin-right: 1%;
    width: 48%;
    margin-top: 1%;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

Thank you so much for the help and resources!

I am very close to, but not quite where I want to be with the post. I have inserted multiple galleries in separate sections in a post, as examples. I will include page link and credentials in secure note.

Section 2.) This is made with the [image] shortcode. This is the correct layout for what I want to do, but the lightbox does not behave how I want.

Section 3.) This is made with the [button] shortcode. The layout is not what I want, but the does lightbox behave exactly as I want.

Section 4.) This is made with the [block_grid] shortcode. The layout is not quite what I want, but more importantly, the lightbox does not behave how I want. (similar to Section 2)

Section 5.) This is made with the [gallery] shortcode. This results in neither the layout or lightbox being what I want.

Is there a solution for me to have the layout as Section 2, but with the lightbox behavior of Section 3? Perhaps a way to make the buttons into images?

Thank you again.

Hi @goods1904,

I can see the issue. I tried to add the section with the image setup. 2 rows, the first 1 column, next is 2 colummns. This happesn because of your OFFLOAD MEDIA settings. This issue happens because the image is not on your server. Because of this setup, lightbox adds an IFRAME when you open the image. When lightbox detect when the content you want to open is not on the site itself, it adds an IFRAME that wraps around the image. This is how it is setup by default. Please try to turn off that settings and try again. Should work as expected.

Thank you for looking into it and pointing out the OFFLOAD MEDIA issue.

I disabled the Offload Media, and have uploaded a new file directly onto my site and server and used that try to fix the issue. Unfortunately, even when using the new file and link directly from my site and server, I get the same results as before. Section 2, looking as I want on the post and Section 3 having the lightbox behavior I’m looking for.

I posted my examples if you don’t mind taking a look. The link is in a secure note, with the same login credentials as my last message.

Hi @goods1904,

Actually, it’s the Jetpack’s Site Accelerator is causing the lightbox issue, I did go ahead and deactivate that and the lightbox works fine now.

Now to what you’re trying to do, you can actually achieve that with a one lightbox shortcode and Classic Image elements

See what I did here. Notice that I only use one lightbox shortcode on the bottom of that page (inside a content area element).

[lightbox selector=".lbx" deeplink="true" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]

How did I link that one lightbox shortcode to all Classic Image elements
I simply add the CLASS lbx on those images.



Now with the layout that you’re trying to achieve, please use the capabilities of the ROW and COLUMNS to achieve the layout that you need.

Regretfully we can not provide support on customizing the look/layout of the lightbox, you can only configure the lightbox with the attributes given (lightbox).

Hope it helps,
Cheers!

1 Like

Thank you so much!

This is exactly what I was trying to achieve. I appreciate the technical support and the time you took to provide a working example!

You’re always welcome!

Glad this is now sorted out. Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.