Lightbox in Cornerstone: Adapting my workflow to updates

Support
#1

So I’ve been building my blog in X Theme for 3 years.
I’ve recently had to update both the theme and Wordpress and I’ve spent the past couple days playing around and testing which will be the best way to adapt my workflow to all the changes.

It’s really annoying to have lost the easy access to shortcodes when working within Wordpress (Gutenberg in this case). My posts are basically text and images but I’ve always made an effort to lay them out beautifully. I always use the Gallery Post Type and have dozens of images mixed with the text. All these other images that are not attached to the post itself, hence are not part of the gallery, always open up in a lightbox and their thumbnails use the “circle” style.

Because Gutenberg doesn’t make it easy for me to use shortcodes, I decided to test what it would be like to start posting using Cornerstone.

My first frustration comes from the fact that the image element doesn’t offer the “circle” style I’ve used on every post since day 1. The classic element that does offer that style, seems to only show up because it was there in my template, but I can’t find it under the Elements list.

The other thing I am really really confused about is how to get these images to open up in a lightbox, like I’ve always done while working within Cornerstone.

Also, I used to use the blockgrid shortcode to creatively layout my images and text in columns, pairs, groups resembling a “wall” layout. Using the Classic Blockgrid within Cornerstone only allows me to put an image in the blockgrid via html, leaving me without an easy way to use the “circle” style and of course, the lightbox issue persists.

I’m going to spend more hours researching but the feeling right now is that both Gutenberg and Cornerstone are offering me less than the Classic Editor used to offer me in combination with the shortcodes. I’m frustrated and worried I’ll have to change my posts style radically because of the updates.

Any ideas on how to work around these specific issues?

PS: I know I can download a plugin and continue using the Classic Editor, but I’d rather catch up with the world if it’s not a complete headache…

#2

Hello @sininvierno,

Thanks for very detailed post information.

  1. With the image element, you will have full control over the image. Please keep in mind that to have a perfect circle image, you will need to update a square image. In the v2 image element, you can tweak the “Inner Border Radius” so that you can get a rounded corners. And if you use a perfect square image then it will result to a perfect circle. Rectangular images will gave you an ellipse or oblong shape images.

  2. You may need to use the classic shortcodes and add theme manually. You can check it here:

Hope this helps.

#3

Thank you Rue

1.Great to know about the inner border radius.

  1. I am used to using the lightbox shortcode, but haven’t been able to make it work when building within cornerstone. I was doing tests yesterday, designing the layout in cornerstone and adding the lightbox shortcode as raw code, but it wouldn’t work…
#4

Hey @sininvierno,

You might need to add a custom class to your image element and then you can use this class as the selector for your lightbox. Would you mind providing us the url of the page in questioned where you have added the image and your lightbox?

Regards.

#5

The tests I’ve been playing with are not published.
I was hoping I could avoid the extra step of adding a specific class.
I’ll ty that and let you know how it goes.
Also, it would be great if you guys could incorporate a more straight forward way for having images open in lightbox when building in cornerstone. It feels like a very basic feature lots of people probably use.

Thanks

#6

Hi there,

It was an old lighbox and there is no plan or news to change it as of yet. Direct integration of the lightbox isn’t implemented but noted that.

Let us know, Thanks!

#7

Hello there

Well, I did as you suggested but now I have a new and unexpected behaviour of the lightbox in this post, it looks like it’s loading, but it appears that it crashes and never shows the pic.

You can have a look here, the password for the post is: themeco

I really hope we can fix this so I can start posting again.

#8

Hi @sininvierno,

The lightbox will pick the URL of the link and not the src of the image. Please add image URL to your image element

Thanks!

#9

Ok. so for each image I need to add the url and the class and use the lightbox shortcode with a selector and it will work.
Thanks. It’s not very straight forward and I do hope you consider making it simpler but this will do.

M

#10

Noted that and glad it’s working now. Thanks!

#11

So the lightbox is working but I was trying to do the inner border radius thing with the newer Image element and the border options won’t show up… Look at the screenshot Neither do I see the padding controls, that are one of the main reasons I’d be interested in using this element over the classic one…

#12

Also, I keep having issues with the text element. It won’t update and when I try to save cornerstone crashes, forcing me to reload the site and having to remember to do a backup of the text elsewhere…
Can this be related to my php version, or how can I fix it so that the experience is seamless?

#13

Hi @sininvierno,

For the missing options, please make sure you’re on Advanced mode.

As for PHP version, please make sure it’s PHP 7.2 and above, it’s Wordpress latest recommendation. And for that, I recommend contacting your hosting provider to upgrade it for you. That’s to make sure they will solve possible issues with other software (like MySQL and so on).

Thanks!

#14

Hello there

I’ve updated php and changed settings to advanced. I keep having issues with cornerstone updating and saving the work I do in it. It’s been quite frustrating all day.
Any idea on how I can fix this? It keeps happening with the Text Element, the new one.
Also I can’t find the box to add a class to the Image Element.

Thanks again

#15

Hi @sininvierno,

Please make sure that there are no invalid characters that you have added into the page to avoid any issues while saving your changes.

Meanwhile, you can add a custom class to any v2 element by finding the “Customize” tab in the element settings.

Hope this helps.

#16

Thank you! I had not guessed that clicking on customise would bring up an entirely different menu :slight_smile:

So that’s sorted. Now I’m wondering how can I add a caption for when the image is opened in the Lightbox? If I manage to get that I think I’ll be done.

thanks again

#17

Hi,

Regretfully, that’s only possible when using a button shortcode.

eg [button class="btn-lightbox" href="image-1.jpg" lightbox_caption="I am a caption."]

You can try other third party lightbox plugin like simple lightbox

Thanks

#18

Hello Paul,

Thanks for your reply. I’ve been considering downloading a third party plug in since you don’t seem to be interested in supporting or improving x’s lightbox as you continue to update. However, I am worried that installing on of these plugins will create conflict with all my previous posts that use lightboxes through shortcodes, using selectors and captioning through the shortcodes as well. I’m talking about virtually EVERY post on my blog. Can you give me advice on whether this will be a problem or not or how to work around it?

Thanks

#19

Hi @sininvierno,

If the 3rd party plugin uses another library most probably you will have no problem. You can test the case by installing and activating the third party plugin and check the case.

I have another suggestion. It might not be the exact feature that you want but it might be a helpful one. You can use the Content Area Modal element:

It contains the Toggle option which you can add an image and change the border-radius and all the stuff there:

Also, you will have to add an HTML code for the Modal itself. It is not an out of the box Image/Lightbox feature for sure. Just wanted to be of a help here :slight_smile:

Thank you.

#20

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