Skip Navigation

[Resolved] Alt Text Output for Images from Custom Field…

This thread is resolved. Here is a description of the problem and solution.

Problem:
The user would like to display image from a custom field and generate its caption, alt text, and description from the Media Library.

Solution:
This is not available out of the box. It needs a custom shortcode to be implemented:

function media_info_func( $atts ) {
 
    // Attributes
    $atts = shortcode_atts(
        array(
            'field' => '',
            'info' => '',
        ),
        $atts
    );
 
    global $post, $wpdb;
     
    $field = $atts['field'];
    $info = $atts['info'];
   
    $image_url = get_post_meta( $post->ID, $field );
     
    $attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url )); 
    $attachment_id = $attachment[0]; 
     
    if ( $field && $info ) {
        switch($info) {
            case 'id':
                return $attachment_id;
                break;
            case 'title':
                // return return ("[wpv-post-title item='$attachment_id']"); 
                return wpv_do_shortcode("[wpv-post-title item='$attachment_id']");
                break;
            case 'alt':
                // return ("[wpv-post-field name='_wp_attachment_image_alt' item='$attachment_id']"); 
                return do_shortcode("[wpv-post-field name='_wp_attachment_image_alt' item='$attachment_id']");
                break;
            case 'caption':
                // return ("[wpv-post-excerpt output='raw' item='$attachment_id']"); 
                return do_shortcode("[wpv-post-excerpt output='raw' item='$attachment_id']");
                break;
            case 'description':
                // return ("[wpv-post-body view_template='None' item='$attachment_id']"); 
                return do_shortcode("[wpv-post-body view_template='None' item='$attachment_id' output='raw']");
                break;
        }
    }
}
add_shortcode( 'media-info', 'media_info_func' );

The shortcode can be used as follow:

Image ID: [media-info field='wpcf-single-image' info='id']
Title: [media-info field='wpcf-single-image' info='title']
Alt text: [media-info field='wpcf-single-image' info='alt']
Caption: [media-info field='wpcf-single-image' info='caption']
Description: [media-info field='wpcf-single-image' info='description']
This support ticket is created 3 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 9:00 – 13:00 - - 9:00 – 13:00
14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 - - 14:00 – 18:00

Supporter timezone: Africa/Casablanca (GMT+00:00)

This topic contains 4 replies, has 2 voices.

Last updated by shawnW-3 3 years, 4 months ago.

Assisted by: Jamal.

Author
Posts
#1851435

This may be a feature request, but I'm asking on the off chance there's a way to do this...

In the documentation for wpv-post-featured-image, for the attribute "output" you have the optional value of "alt" (as well as many other helpful bits, like caption, description, date)...

Is there something something similar for a custom field - image?

I know that this doesn't work...

<img data-src="[types field='nav-img' size='full' url='true'][/types]" class="uk-responsive-width" style="max-width: 75px;" alt="[types field='nav-img' output='alt'][/types]" uk-img>

But is there another way to individually output the meta data associated with an image without the image?

Hope you have an answer. If this isn't a feature, it needs to be. I'm sure there's more to it, but it makes no sense to have that available for a featured image and not custom images.

#1851693

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

Hello and thank you for contacting the Toolset support.

As you may know, when you add an image to WordPress you can customize its title, description, and alt text in the native media library manager. These pieces of information can then be used by passing placeholders to the shortcode:

[types field='nav-img' alt='%%ALT%%'][/types]

But, I understood that you want to pull the alt text from a custom field of the parent post, right?
In that case, for a custom field "image-alt" you need to do:

<img data-src="[types field='nav-img' size='full' url='true'][/types]" class="uk-responsive-width" style="max-width: 75px;" alt="[types field='image-alt'][/types]" uk-img>

Please note that "output='alt'" is only available for the wpv-post-featured-image shortcode that displays the featured image of a post instead of an image that came from a custom field.

Does it make sense?

Otherwise, please provide a concrete example(post, fields, image, etc.) and let me try a test on my local installation.

#1853751

But the problem with simply having a separate field is that you can't bind them together.

So if you had...
[types field='image-one' ][/types]
[types field='image-alt-one' ][/types]

[types field='image-two' ][/types]
[types field='image-alt-two' ][/types]

That would work for those two sets of fields... MESSY... but it would work.

But when you have a repeating group of images, you'd only have the one alt text for all the images.

[wpv-for-each field="wpcf-gallery-img"]
<li class="uk-width-2-5@s">
<img data-src="[types field='gallery-img' size='full' url='true'][/types]" class="uk-responsive-width" alt="[types field='gallery-alt']" uk-img>
</li>
[/wpv-for-each]

Even if you could make them both repeating groups, with two 'wpv-for-each' working together, an inexperienced user would easily let them get out of sync. As a solution, that seems terribly limited.

Please note that "output='alt'" is only available for the wpv-post-featured-image shortcode that displays the featured image of a post instead of an image that came from a custom field.

Okay, but why is it only available for a featured image of a post? The individual export of meta data for any wordpress image should be a no-brainer, and a very simple feature to implement. It would work almost the exact same as with a featured image, no? output='alt' or perhaps output='%%ALT%%', as well as the many other pieces, like output='caption', output='date', output='author'

At this point if it needs to be considered a featured request you can mark this closed.

#1857657

Jamal
Supporter

Languages: English (English ) French (Français )

Timezone: Africa/Casablanca (GMT+00:00)

I'll escalate this to our 2nd Tier as a feature request. It will be evaluated and hopefully will make it to the developer's list.

In the meantime, I built a custom shortcode that pulls the information from the image of the custom field. It is not suited for repeatable image fields, but it explains how we can get those pieces of information from the image.

function media_info_func( $atts ) {

	// Attributes
	$atts = shortcode_atts(
		array(
			'field' => '',
			'info' => '',
		),
		$atts
	);

	global $post, $wpdb;
	
	$field = $atts['field'];
	$info = $atts['info'];
  
	$image_url = get_post_meta( $post->ID, $field );
	
	$attachment = $wpdb->get_col($wpdb->prepare("SELECT ID FROM $wpdb->posts WHERE guid='%s';", $image_url )); 
	$attachment_id = $attachment[0]; 
	
	if ( $field && $info ) {
	    switch($info) {
	        case 'id':
	            return $attachment_id;
	            break;
	        case 'title':
	            // return return ("[wpv-post-title item='$attachment_id']"); 
            	return wpv_do_shortcode("[wpv-post-title item='$attachment_id']");
	            break;
	        case 'alt':
	            // return ("[wpv-post-field name='_wp_attachment_image_alt' item='$attachment_id']"); 
            	return do_shortcode("[wpv-post-field name='_wp_attachment_image_alt' item='$attachment_id']");
	            break;
	        case 'caption':
	            // return ("[wpv-post-excerpt output='raw' item='$attachment_id']"); 
            	return do_shortcode("[wpv-post-excerpt output='raw' item='$attachment_id']");
	            break;
	        case 'description':
	            // return ("[wpv-post-body view_template='None' item='$attachment_id']"); 
            	return do_shortcode("[wpv-post-body view_template='None' item='$attachment_id' output='raw']");
	            break;
	    }
	}
}
add_shortcode( 'media-info', 'media_info_func' );

The shortcode can then be used as follow:

Image ID: [media-info field='wpcf-single-image' info='id']
Title: [media-info field='wpcf-single-image' info='title']
Alt text: [media-info field='wpcf-single-image' info='alt']
Caption: [media-info field='wpcf-single-image' info='caption']
Description: [media-info field='wpcf-single-image' info='description']

You can check it on this test site here hidden link
Login with the following URL: hidden link

Luo form the support team has published previously a custom shortcode, suited for repeatable fields, here https://toolset.com/forums/topic/how-to-retrieve-image-caption-alt-text-and-description/#post-227840

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

#1861935

Thank you. I believe the custom code provided will solve my immediate issues, but I'm looking forward to this being a built-in feature.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.