[Résolu] How to display the description from an image field

[Auteur]

Publications

[Jim]

I use layouts to display a custom post typer. This post type uses a repeater field for special images (slug = tables-figures).

Up untill now I showed the images simply with this code:
[types field='tables-figures' alt='%%ALT%%' title='%%TITLE%%' size='full' align='none' separator=', '][/types]

But now we want to display the description (if there is one) to apear beneath the image.
I tried to change the seperator value to a div with the description like this, but that does not work:
[types field='tables-figures' alt='%%ALT%%' title='%%TITLE%%' size='full' align='none' separator='<div class="imgdescr">%%DESCRIPTION%%</div>'][/types]

I tried to use a shortcode to display the images like mentioned in this support post: https://toolset.com/forums/topic/repeater-field-display-attachements-titles/
But no results (output is blank):

add_shortcode('my-images', 'my_images_shortcode');
function my_images_shortcode() {
global $wpdb;
$out = '';
$images = get_post_meta(get_the_ID(), 'tables-figures', false);
foreach ($images as $image) {
$attachment_id = $wpdb->get_var($wpdb->prepare(
"SELECT ID FROM $wpdb->posts WHERE guid = %s",
$image
));
$image_title = get_the_title($attachment_id);
$description = get_the_content($attachment_id);
$alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
$out .= '<span class="download-pdf-btn">' . $image_title . '</span>';
$out .= ', ';
}
return $out;

}

What is the correct way to display the images in a loop with (some) control over the output?

[Nigel]

Hi Jim

It sounds like you should be using the wpv-for-each shortcode to loop over each iteration of your repeating image field, outputting just the current image for each iteration as well as whatever else you want to display, such as the description.

https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-for-each

The only problem being that there is no way to output the description from a custom image field.

So you will still need a custom shortcode, together with the wpv-for-each loop.

The following can be used to register a shortcode that will output the description of an image from the media library where the URL of the image is passed as an attribute.

/**
 * Custom shortcode to output description of image field
 */
add_shortcode( 'description', function( $atts=[] ){

	$output = "";

	if ( isset( $atts['url'] ) ) {

		$img_id = attachment_url_to_postid( $atts['url'] );

		$img = get_post( $img_id );

		if ( !is_null( $img ) ) {
			$output = $img->post_content;		
		}
	}

	return $output;
});

Then use it like so within the wpv-for-each shortcode (my example has a repeating image field with slug of "perfil"):

[wpv-for-each field="wpcf-perfil"]
	[types field='perfil' alt='%%ALT%%' title='%%TITLE%%' size='full' align='none'][/types]
	<p>[description url="[types field='perfil' size='full' url='true'][/types]"]</p>
[/wpv-for-each]

[Jim]

Wow, thanks Nigel. That worked like a charm!!!

[Jim]

Small additional question Nigel...
Is it possible using toolset layouts to do a conditional check first to find out if the image has a description?

[Nigel]

Hi Jim

Not directly. As covered above, Types has no way of outputting the description, hence we can't readily test for it.

What you would need to do is use a conditional shortcode (https://toolset.com/documentation/user-guides/conditional-html-output-in-views/using-shortcodes-in-conditions/#checking-custom-shortcodes).

You could use the same description shortcode registered above for the test.

If there is no description it will return an empty string, so you can test for that.

[Jim]

Hi Nigel,
I did exactly that 🙂

I tried somethjing like this:

[wpv-conditional if="([description url="[types field='perfil' size='full' url='true'][/types]"] ne '' )"]
code to perform when description is available here...
[/wpv-conditional]

But that did not work... should it, or do you see the problem?

[Nigel]

Did you register the description shortcode to use in conditional shortcodes at Toolset > Settings > Front-end Content?

[Jim]

Ah, I didn't know that was needed to be able to use it in a condition. Great!
(sorry, your last reply got buried under other things somehow...)