[Resolved] Captions – display

[Author]

Posts

[CSS Web]

Tell us what you are trying to do?

Display captions under images.

I'm using 'Fields and Text' to display images from a custom Image field (see attached image).

<p>[types field='pimages' title='%%TITLE%%' alt='%%ALT%%' align='left' size='medium' resize='proportional'][/types]</p>

Images display well but I need captions.

I would like to use Gallery ... but it's failing to load images (see attached image).

Is there any documentation that you are following?

Failed to implement other support topics.

Is there a similar example that we can see?

No

What is the link to your site?

Site is password protected.

Much thanks for any guidance! 🙂

Bill - Hawai'i

[Nigel]

If you want us to investigate why your gallery isn't outputting correctly we may need access to your site (we can set up a private reply if you want to do this), but there may be clues in your debug.log, if you see any relevant PHP warnings or errors.

In the meantime let me share a custom shortcode with you that can be used to output any fields of the images, including captions:

hidden link

Add that code to register the shortcode, and then you should be able to use it like so:

[media-field output='caption'][types field='pimages' output='raw'][/types][/media-field]

[CSS Web]

Aloha Nigel - thank you for your quick reply!

I added the code snippet, and shortcode ... but I see no output 🙁

I've attached another image that illustrates where I am - and where I want to go (captions below images).

I'm using this.

[types field='pimages' title='%%TITLE%%' alt='%%ALT%%' size='full'][/types]

Works great to display images contained in my custom field 'pimages'.

When I surround with:

[media-field output='caption'] ... [/media-field]

The images disappear.

Any idea which way I should go?

I also tried to create a View ... but I can't get it to loop the three images in 'pimages'

Much thanks again.

BIll

[CSS Web]

My apologies Nigel - here is the images mentioned above.

[Jamal]

Aloha Bill,

Well the shortcode that Nigel has shared expects to get the raw image URL instead of an image tag. For example, this will return the URL of the image, note the ourput='raw' attribute:

[types field='pimages' output='raw'][/types]

While this will return an image tag:

[types field='pimages' title='%%TITLE%%' alt='%%ALT%%' size='full'][/types]

Can you try this:

[types field='pimages' title='%%TITLE%%' alt='%%ALT%%' size='full'][/types]
[media-field output='caption'][types field='pimages' output='raw'][/types][/media-field]

The first shortcode will return the image, while the second will return the caption of the wrapped image URL.

If this does not help, allow us temporary access to your website and we'll check it further. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal]

Hello Bill,

It turns out to be a repeating image field, whereas the shortcode that Nigel has shared is meant to be used with a regular image field. Because the following shortcode returns all the images URLs, and thus the shortcode cannot get the Image ID from the concatenated URLs.

This will need another shortcode that handles repeating image fields. I'll give it a try later during the day and get back to you.

[Jamal]

I built a custom shortcode that will loop over the repeating image field and apply the Types shortcode, and the custom shortcode that Nigel has suggested. Then, it will return all the results. The shortcode's code is:

add_shortcode('repeating-media-field', function($atts = []){
  global $post;
  // provide default
  $atts = shortcode_atts(
    array(
      'field' => 'wpcf-pimages',
    ),
    $atts
  );
  
  $output = '';
  $images = get_post_meta( $post->ID, $atts['field'], false); // false to return an array of image_urls
  foreach( $images as $index => $image) {
    // get the image, note how we use $index
    $output .= wpv_do_shortcode('[types field="pimages" index="' . $index . '" title="%%TITLE%%" alt="%%ALT%%" size="full"][/types]');
    // get the image's caption
    $output .= wpv_do_shortcode('[media-field output="caption"]' . $image . '[/media-field]');
  }
  return $output;
});

During my initial debugging, I disabled the snippet at Snippets->media-field, and I moved the code to Toolset's custom code section in Toolset->Settings->Custom code(tab) here hidden link
Both shortcodes are there.

And these are the results on the frontend hidden link

[CSS Web]

Getting close! Thank you, Jamal.

If this is my shortcode:

<div class="imgcap">
[repeating-media-field field="wpcf-pimages"]
[wpv-for-each field="wpcf-pimages"]
[media-field output='caption'][types field='pimages' output='raw'][/types][/media-field]
[/wpv-for-each]
</div>

This is being displayed after the final image (see attached image)

[media-field output='caption'][types index="0" field='pimages' output='raw'][/types][/media-field] [media-field output='caption'][types index="1" field='pimages' output='raw'][/types][/media-field] [media-field output='caption'][types index="2" field='pimages' output='raw'][/types][/media-field]

How to get rid of this?

------

On a related note ... is there no way to use the TS Gallery block on a layout template?

Seems like that would make life easier ... but when I try, the module fails to see the CF "pimages" (see attached image)

I think I understand why ... but wonder if there is a way to make it work.

Thanks for all your help 🙂

Bill

[Jamal]

Hello Bill and my apologies for the late reply, but I do not work on Wednesdays and Thursdays as you may check on my profile page https://toolset.com/forums/users/jamal-b/

Sorry for the confusion, but you won't need this part of shortcodes:

[wpv-for-each field="wpcf-pimages"]
[media-field output='caption'][types field='pimages' output='raw'][/types][/media-field]
[/wpv-for-each]

It is the one responsible for the output:

[media-field output='caption'][types index="0" field='pimages' output='raw'][/types][/media-field] 
[media-field output='caption'][types index="1" field='pimages' output='raw'][/types][/media-field]
 [media-field output='caption'][types index="2" field='pimages' output='raw'][/types][/media-field]

While the types shortcode is aware if it is being wrapped inside wpv-for-each, the media-field shortcode is not.
I should have removed it during my testing.

That's why I built the repeating-media-field shortcode for you. It will loop through the repeating fields, and execute the media-field shortcode with the correct image URL.

This should be enough for you:

<div class="imgcap">
[repeating-media-field field="wpcf-pimages"]
</div>

Regarding the Gallery block, I think that you are previewing the design with a post that does not have images on it. Use the Post Preview dropdown to select a post that has values to preview with. Check this screenshot, Toolset properly gets the "Book Images" field for my post "History 101" hidden link

However, for support rules, we are able to handle only one issue at a time. This helps us to bring you a better service and also helps other users to find all the information here exposed. If you need help with the gallery block, please open a new ticket and you can assign it directly to me or ask for me on it.

I hope this helps. Let me know if you have any questions.

[CSS Web]

Aloha Jamal,

OUTSTANDING!!!

1 Million thanks to you!!

Bill 🙂

[CSS Web]

My issue is resolved now. Thank you!