[Resolved] Caption and Lightbox

[Author]

Posts

[massimoB-3]

Hi, thanks for your assistance.
I created a template for a post type (Restauri), inside the card there is a single image and a gallery. Unfortunately I can't see the caption above the images and also in the lightbox. (annex 1,2,3)
I have tried to follow the many open tickets but I have not found the solution.

Another problem is that many closing X's appear randomly in the lightbox. (annex 4)

Can you help me solve these problems?

A warm greeting.

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

Both the Toolset's "Gallery" and the "Image Slider" block, support showing the captions from the image.

Can you please make sure that relevant images have caption text saved with their files in the media library and that the caption option is enabled in the "Gallery" and the "Image Slider" block's settings?

In case the issue still persists, you're welcome to share temporary admin login details, along with the link to an example page.

Note: Your next reply will be private and making a complete backup copy is recommended before sharing the access details.

regards,
Waqar

[Waqar]

Thank you for sharing the admin access.

I've performed some tests on my website and can confirm that the Toolset's "Image" and the "Gallery" blocks, don't support showing the caption text inside the lightbox window.

We have an internal ticket to include this in future releases and for now, you can include the following custom script, in your template's "JS editor" to include the caption text in the lightbox windows of these blocks:

jQuery(document).ready(function(){

	// code to set caption text for the gallery block lightbox
	jQuery('div.tb-brick__content').each(function(){
		var caption= jQuery(this).find('.tb-gallery__caption').html();
		jQuery(this).find('a').attr('data-title',caption);
	});
	// code to set caption text for the image block lightbox
	jQuery('.wp-block-image').each(function(){
		var caption= jQuery(this).find('.tb-image-caption').html();
		jQuery(this).find('a').attr('data-title',caption);
	}); 

});

As for the blocks used on your website's "Template for Restauri":

1. The "Image" block:

When I checked the image block in the template, no option was selected in the caption's "Source" field.

I've selected the "Post Title" to test and it is showing on the front end now.
Screenshot back end: hidden link
Screenshot front end: hidden link

2. The "Gallery" block:

For some reason, the gallery block used in the template is not showing the caption text, when it should. As I don't see this issue on my test website, it seems something specific to your website is involved.

To troubleshoot this, I'll suggest the following steps:

a. Please make sure that WordPress, active theme and plugins are all updated to the latest versions.

b. It would be interesting to test this with all non-Toolset plugins disabled and a default theme like Twenty Twenty-One.

If it's fixed, you can start adding the disabled items, one by one, to narrow down to a possible conflicting one.

c. In case the issue still persists, I'll need your permission to download the clone/snapshot of your website, to investigate this on a different server.

3. Multiple closing buttons for the lightbox window:

Again, I couldn't reproduce this on my test website, so this also seems specific to your website. I'll recommend the same troubleshooting steps as suggested in the previous point to narrow down which element is causing this and for a quick fix, you can include the following custom CSS code in the template's "CSS Editor":

#lightbox > .lb-dataContainer.tb-lb-dataContainer {
display:none !important;    
}
 
#lightbox > .lb-dataContainer.tb-lb-dataContainer:first-of-type {
display:block !important;    
}

This code will make sure that only one close button shows, at any time.

[massimoB-3]

Good morning Waqar,
thanks for your invaluable help. Lightbox and X are resolved.
I followed your instructions and found the problem. Unfortunately it is related to the wpml plugin.
I made several attempts but the caption text is not shown with Wpml active, as soon as I deactivate wpml everything works.

I have created a clean installation with only toolset and wpml but the problem continues to occur. I noticed that when I try to insert the caption in the single template image it appears "No caption because this image is not loaded from media library".
In addition, the caption "As defined in Media Library" disappears in the single image.

For the gallery instead it shows the caption in the template but not in the final page.

It appears that toolset cannot read caption information with wpml running.
I really need this because I want to use toolset for all my next sites. Please help me.

I have created a site where you can work without problems and with the problem active, how can I send you the login credentials?
Thank you very much.

[Waqar]

Thanks for the update and glad that my suggestions helped.

I'm setting your next reply as private so that you can share the access details for this staging/development website, along with the link to the example page(s).

[Waqar]

Thank you for sharing the admin access.

When I checked the content template "Template for Restauri 1" I noticed that when I selected the "As defined in Media Library" option in the "Alt Text" field of the image, I was able to also select the same option in the "Caption" section too.

At the moment, you'll see that the caption text is showing in both the image and the gallery blocks and the WPML plugins are still active.

Note: Unlike the staging website, your actual website doesn't have the "WPML Media" plugin active. Can you please test if activating it has any effect?

[massimoB-3]

Hello Waqar,
unfortunately as soon as I try to change images or upload new ones, the caption text disappears.
Feel free to try adding images. It would seem like a bug.

Let me know.
Thanks for your help.

[Waqar]

Thanks for writing back and I can see the issue on your staging website.

I'm currently running some more tests on my website, to narrow down the exact steps and cause of the issue and will keep you updated with the progress.

Thank you for your patience.

[Waqar]

Thank you for waiting.

During testing, I was able to confirm that when WPML is active, to show the custom field images data (like the caption), in the Gallery, block it is important that those images are translated at the individual post level.

This means, that first from WPML -> Settings, you'll set the "Restauri" post type to "Translatable".

Next, while you'll be translating an individual Restauri post, you'll see the options to translate the title, alt text, and caption text for each of the images uploaded in the Gallery field.

Once translated, this text will start showing correctly on the front end, in the gallery block's output.