[Resolved] Gallery captions and alt text not showing on front end

[Author]

Posts

[kateH]

I am trying to:
show captions (and alt text) of images (a custom image field of a custom post type) in a Toolset Blocks gallery

Link to a page where the issue can be seen:
hidden link

I expected to see:
Captions on images in gallery at bottom of page when "As defined in Media Library" is selected in the Gallery settings.

Instead, I got:
No captions or alt text on images

My debugging is probably wrong, but after looking at the Toolset code, it seems that there is a problem with the get_attachment_id_by_url() function of /htdocs/wp-content/plugins/toolset-blocks/vendor/toolset/toolset-common/inc/autoloaded/utils/Attachments.php

For the caption, this seems to be called from line 138 of toolset-blocks/vendor/toolset/common-es/server/Library/WordPress/Image.php (Toolset Block v1.6.1) inside the attachment_id_by_guid() function:

138:    $id = $this->tc_attachments->get_attachment_id_by_url( $guid );
139:    return $id ? (int) $id : null;

$guid is a valid GUID (image URL), but line 138 returns null instead of a valid image ID.

I have also cleared the toolset_post_guid_id table.

This does work if I modify the code to return the GUID directly (e.g. by modifying line 139 above to return $guid and allowing that value to cascade through other functions successfully), which shows up on the front end as the image URL, so there appears to be no issue with JS or CSS interfering with the returned values. This also works if I set the captions to return a dynamic field.

What is also strange is that the alt text and captions do appear to show when editing the Content Template in the backend.

[Luo Yang]

Hello,

I have tried it in my localhost with a fresh WP installation + the latest version of Toolset plugins, it works fine, I can see the correct captions and alt texts.

So the problem you mentioned above is abnormal, please check these:
1) In case it is a compatibility problem, please deactivate all other plugins, and switch to WordPress default theme 2021, deactivate all custom PHP/JS code snippets, and test again

2) Also check if there is any PHP/JS error in your website:
https://toolset.com/documentation/programmer-reference/debugging-sites-built-with-toolset/

3) If the problem still persists, please provide database dump file(ZIP file) of your website, you can put the package files in your own google drive disk, share the link only, also point out the problem page URL and view URL, I need to test and debug it in my localhost, thanks
https://toolset.com/faq/provide-supporters-copy-site/

[kateH]

Hi,
thanks for the reply. I have recreated locally as well and yes, the gallery captions do work for most situations. It seems though that there are some issues with specific images, in particular large images which get resized on upload. For some of these, the way that the image is loaded into the gallery is different. For most images, the gallery loads the image like below, and the captions work:

<a href="<em><u>hidden link</u></em>" data-lightbox="f576b21a-7072-4250-abf1-dac1d4fb3663">
		<img width="750" height="500" src="<em><u>hidden link</u></em>" class="attachment-large" alt="" loading="lazy" title="" style="width:100%;height:66.67%;max-width:1620px;" srcset="<em><u>hidden link</u></em> 1024w, <em><u>hidden link</u></em> 300w, <em><u>hidden link</u></em> 768w, <em><u>hidden link</u></em> 1536w, <em><u>hidden link</u></em> 1568w, <em><u>hidden link</u></em> 1620w" sizes="(max-width: 750px) 100vw, 750px">
		<figcaption class="tb-gallery__caption">This is an example caption</figcaption>
</a>

However, for other images, the gallery loads the image like this:

<a href="<em><u>hidden link</u></em>" data-lightbox="f576b21a-7072-4250-abf1-dac1d4fb3663">
		<img src="<em><u>hidden link</u></em>" alt="" class="attachment-large">
		<figcaption class="tb-gallery__caption"></figcaption>
</a>

As you can see, this is using a -wpcf resized image and the caption does not work. This seems to occur on larger images (e.g. please test with the following image in your gallery hidden link). This is getting scaled to maximum 2560px on upload by wordpress and an extra "-scaled.jpg" image is created. This image is then loaded in the gallery using the -wpcf variant and the caption does not work.

Am I right in assuming that Toolset is not using the "-scaled" version of the image which WordPress creates automatically? If this is the case, then it seems that Toolset is handling large images differently (and subsequently creating the -wpcf version) and not using the other WP-created image variants?

Obviously one solution is to use smaller images, but this image isn't that big and it would be good to understand the specific situation that is causing this as my clients will no doubt try to upload large images.

Thanks.

[Luo Yang]

I have tried the image you mentioned above in localhost, it works fine, see my screenshot: image-caption-alt.JPG, and I don't see the "wpcf-" prefix in the image URLs.

If you need more assistance for it, please provide a copy of your website in below private message box, also point out the problem page URL and view URL, I need to test and debug it in my localhost, thanks
https://toolset.com/faq/provide-supporters-copy-site/

[kateH]

Thanks Yang,
Sorry, that image was not a good example. It seems to only occur with very large images, this image is 16MB and consistently doesn't show the caption: hidden link even though it is being compressed on upload.

I can upload smaller images as an easy fix, I'm not sure what the size limit is, but seems to be ok with 1-2MB files.

Thanks for your help

[Luo Yang]

Thanks for the details, I can duplicate the same problem, and have escalated this issue, will update here if there is anything news.
Currently, please try use smaller image instead of large image files.

[Luo Yang]

Please try with the latest Toolset Types plugin 3.4.15, it works fine with your images in my localhost.

You can download it here:
https://toolset.com/account/downloads/