How to get an image to popup in a larger version in X theme

[FinchleySociety]

Sorry for such an elementary question, but …

I have lots of images on my pages, and I’d like the user to be able to popup a larger version of the image by clicking on it (and then pressing Esc or something to collapse it)? I don’t mind using a plugin if necessary.

Can’t find a thread that explains how to do this - suspect I’m just not asking the question in the right way.

Using X Theme, version 7.2.3

Grateful for any pointers

[prakash_s]

Hello @FinchleySociety

Thanks for writing to us.

To open Image in the popup on the image click event. You can create image gallery through the “Envira Gallery” plugin. It is our bundled plugin.

You can install the plugin from the X—> Validation

To create gallery Envira Gallery—> Add New

Please have a look the doc Envira Gallery to learn more how to create a gallery

Envira Gallery | Themeco Docs

You can also use the Essential Grid plugin. It is also our bundled plugin. Please check the doc to learn how to use Essential Grid https://theme.co/docs/essential-grid and setup gallery.

Thanks

[FinchleySociety]

Thanks very much for the response. I know a bit about Essential Grid. Will have a look at Envira, which I don’t know at all.

[tristup]

Hi @FinchleySociety,

You are welcome, please let us know how Envira works for you.

Thanks

[FinchleySociety]

Envira looks very nice. Just to be sure I fully understand your suggestion …

I have a page with only one image, which I want to pop out to a larger size when I click on the image. So I create an Envira gallery with just one image, a sort of 1 x 1 grid, and then the single image pops out? That seems like it would work, but could result in a lot of galleries. Is there a more clever way to do this in Envira?

Thanks again

Stephen Yeo

[prakash_s]

Hello Stephen,

You can create Gallery in multiple grids as well. Go to Envira Gallery---->Edit

Now Click on the Configuration —>Number of Gallery Columns
You can set number for columns for the Gallery from here

Please have a look at the screenshot below

Thanks

[FinchleySociety]

I’ve made a little progress using the very helpful guidelines you provided:

1. I created an Envira gallery with just one image, and I was able to embed the gallery in an ordinary page, as well as in an Essential Grid post, using the shortcode (e.g. [envira-gallery id=“3099”]). That just about solves the problem, except that I can’t figure out a way of aligning the image generated by the short code, or wrapping text around the image. So I can generate a page, but it looks pretty clunky.
2. I also followed the documentation instructions to use an Envira gallery with Cornerstone (which I don’t normally use). It was interesting to learn more about Cornerstone, and I was able to achieve a better layout with cornerstone - essentially a one row two column layout in which row 1 column 1 has the title and row 1 column 2 has the image from the Envira gallery. This was a bit of work, but got me a reasonable layout. It doesn’t quite work either though, because I can’t figure out a way of using Cornerstone within an Essential Grid post, where only the classic WordPress editor seems to be available.

So progress, I guess, but I’m still stumbling around, a little in the dark. The two approaches almost, but don’t quite do what I want.

Anyway, I’m grateful for your assistance.

Stephen Yeo

[christian]

Hey Stephen,

I checked the grids in your site but regretfully, I couldn’t determine which one is having an issue. Please give us the URL of the page you’re working on so we could see the issue.

Thanks.