How to show captions?
-
Hi, nice plugin ??
I have some problem with captions. I want to show image caption by adding css class on img tag.
LOOP:<li class="services-list__item service"> <figure class="service__thumb"> <?php the_post_thumbnail('large', ['class' => 'service__img light-box', 'title' => 'test']) ?> <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption> </figure> </li>
Caption and Description added on images, but but they are not shown.
What I am doing wrong?
Img alt, title, caption and description added, but none is shown.
Help please
-
I found a solution by adding a tag with data-ulbtitle and data-ulbdescription
Hi arsama,
Thanks for letting us know you found a solution, and sorry for not getting back to you sooner!
I am having a similar issue with title and captions. I can’t not get them to display. Tried adding a filter function. Tried many different options. I am using the “Images with Class Set below”. Verified “Show Overlay Text” is enabled. I am using Elementor Pro Edit Image. Then I added the “Add class to Elementor Image” plugin. This allows me to add my custom image class. I can see there is no title anywhere so not sure how to pass that to the lightbox. The gallery displays correctly. Just no caption, description, title or anything.
Second, how can you have the image icon scroll the images as you scroll the gallery instead of having to click the arrow?
Thanks!
Hello brad,
To add a caption to an image in WordPress, go to the Media library area of the WordPress admin and click to edit an image. There will be a field there to add in the image description.
Could you provide a URL to your page so we can take a look? There might?be some information in the browser developer console that could identify the issue you’re having.
Also, to try to isolate when this issue happens, could you please try creating a new page on your site and not using the Elementor editor? Enable the “All WordPress Galleries” option in our plugin and then place a WordPress gallery block on the new page. Does the lightbox correctly display the overlay/captions there?
For your second question, what do you mean? Are you talking about the thumbnails that show below the image in the lightbox? If so, then, unfortunately, there is currently no way to have it do that. It will select/highlight the thumbnail for the image that is currently being displayed, but, if you have more images than fit in the thumbnail view, it won’t automatically scroll.
-
This reply was modified 3 years, 1 month ago by
jaysupport.
Jay,
https://dev.eyekandie.com/bloody-marys/
I created the new page and did what you requested and I can see the captions displayed under the images. I tried many different variations using just images. I need to get it to work with just images.
If I set it to “All Images” then create a page and add a image or two the lightbox doesn’t work. Maybe you can see something I am missing. The dev console then gives and error of “img is not defined” tho I can see it in the code:
<img loading="lazy" width="678" height="1024" src="https://dev.eyekandie.com/wp-content/uploads/2021/07/michalada-678x1024.jpg" alt="" class="wp-image-577" srcset="https://dev.eyekandie.com/wp-content/uploads/2021/07/michalada-678x1024.jpg 678w, https://dev.eyekandie.com/wp-content/uploads/2021/07/michalada-199x300.jpg 199w, https://dev.eyekandie.com/wp-content/uploads/2021/07/michalada-768x1160.jpg 768w, https://dev.eyekandie.com/wp-content/uploads/2021/07/michalada-1017x1536.jpg 1017w, https://dev.eyekandie.com/wp-content/uploads/2021/07/michalada-1356x2048.jpg 1356w, https://dev.eyekandie.com/wp-content/uploads/2021/07/michalada-600x906.jpg 600w, https://dev.eyekandie.com/wp-content/uploads/2021/07/michalada-scaled.jpg 1696w" sizes="(max-width: 678px) 100vw, 678px">
Been working on this a couple of days so hope you can help.
Thanks!
Hi Brad,
I just visited https://dev.eyekandie.com/bloody-marys/ and the lightbox is opening for all the images on that page. What did you do to get it working?
That’s not the issue. The problem is it does not display the caption text. I would like it to display the Title and Caption or Description under the photo like when I use the gallery.
If you open the image in question, in your WordPress Media library…
…what do you have set for the Title, Caption and Description fields?
e.g.
If you fill all of those in, does the caption then display the in lightbox?
You mentioned that, when you added a WordPress gallery to a page, the captions did show. So it’s only when you use this Elementor image widget that it’s not working?
Does it work if, in the regular WordPress editor, you add a class to an image, and then use the “image with class name” option in our plugin?
-
This reply was modified 3 years, 1 month ago by
jaysupport.
Yes I filled in all of the fields to make sure I wasn’t missing something. No caption is displayed in the lightbox.
That is correct. When I used just the plain wordpress gallery as well as “All Images” I can get captions to work when I disable Elementor Pro. I think this is related to using the “Images with Class Set Below” option.
Works with Elementor Pro disabled and “All Images” turned on:
<figure> <a href="https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-scaled.jpg" data-elementor-open-lightbox="no" class="ewd-ulb-lightbox"><br> <img width="678" height="1024" src="https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-678x1024.jpg" alt="Alt text" loading="lazy" srcset="https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-678x1024.jpg 678w, https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-199x300.jpg 199w, https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-768x1160.jpg 768w, https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-1017x1536.jpg 1017w, https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-1356x2048.jpg 1356w, https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-600x906.jpg 600w, https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-scaled.jpg 1696w" sizes="(max-width: 678px) 100vw, 678px"> </a><figcaption>This is my test caption</figcaption></figure>
This is with Elementor Pro enabled and using the “Images with Class Set Below”. The class is “bloody-mary-image”:
<div class="elementor-widget-container"> <figure class="wp-caption"> <a href="https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-scaled.jpg" data-elementor-open-lightbox="no" class="ewd-ulb-lightbox"> <img width="678" height="1024" src="https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-678x1024.jpg" class="bloody-mary-image attachment-large size-large" alt="Alt text" loading="lazy" srcset="https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-678x1024.jpg 678w, https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-199x300.jpg 199w, https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-768x1160.jpg 768w, https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-1017x1536.jpg 1017w, https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-1356x2048.jpg 1356w, https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-600x906.jpg 600w, https://dev.eyekandie.com/wp-content/uploads/2021/07/bacon-mary-scaled.jpg 1696w" sizes="(max-width: 678px) 100vw, 678px"> </a> <figcaption class="widget-image-caption wp-caption-text">This is my test caption</figcaption> </figure></div>
I assume this is due to where the class “bloody-mary-image” is placed?
Thanks!
I’m not sure what to say/do at the moment. We don’t normally do extensive testing with third-party page builders, rather mostly with Gutenberg. If it works with Gutenberg, it should work with any page builder, unless that page builder is altering/filtering the content output in an incorrect way, or at least a way that Gutenberg doesn’t, and that filtering is affecting other elements in WordPress that use the content output.
We can try to do some testing with Elementor in the near future and see if we can recreate your issue and figure out a workaround for whatever in Elementor is causing this. Should we come up with a solution, we’ll be sure to include it in an update.
Finally got time to debug the issue. It appears the code that supports “Images with Class Set Below” doesn’t include content in the lightbox. Here is the fix that got me in the right direction:
assets/js/ewd-ulb.js line 45:
+ if (description_src == 'caption') {var description = jQuery(this).parent().parent().find('figcaption').html();} + else {var description = img.attr(description_src);} +
Line 50:
+ jQuery(this).parent().data('ulbdescription', description);
I am using the “Add class to Elementor Image” plugin. This adds a “Custom Class” field when editing a image. I also needed to make sure that captions were turned on for each image under “Content”.
Not sure why the above code is not included as with my testing it doesn’t break anything else.
Hi Brad,
Thanks for sharing that. We can test it on our end, just to make sure it does indeed help in this specific case without affecting/harming any other functionality, and, if so, hopefully we can include it or similar code in a future update, to allow for the use of the lightbox in this scenario.
-
This reply was modified 3 years, 1 month ago by
- The topic ‘How to show captions?’ is closed to new replies.