Support

Account

Register Login

Home › Forums › General Issues › How to use ALT tags

Solved

How to use ALT tags

  • Hi,

    I am inserting images using ACF into a WordPress template, does anyone know how to pull in the alt text that I have entered for each image in the Media Library into the images I have inserted in the templates?

  • Hi!

    You can do like this, where the $imageID is the ID of the image retrieved from ACF:

    
$alt_text = get_post_meta($imageID , '_wp_attachment_image_alt', true);

  • Hi

    I think I am looking for something similar and not really a php coder. I have this on my image and I think I have the wrong code in to show the alt text I have added the image when I added it to the page:

    ” width=”345″ height=”240″ alt=”<?php get_the_title(‘add_image_1’); ?>” />

    Any help would be really appreciated.

    tracy

  • Hi Tracy,

    First of, get_the_title does not take any other parameter than the ID of the post in question..

    What you’re asking for in your first post is the alt text that you’ve put into the image editor in the media library. This is not really part of ACF but is a standard WP thing.

    So assuming that the field you’ve wrote in for each image is indeed the alt field your code should look something like this:

    This assumes that what you have created in ACF is an image field where you have set the return value to be the images id. 

    
<?php $imageID = get_field('THIS IS YOUR FIELD NAME FOR THE IMAGE'); ?>
<?php $image = wp_get_attachment_image_src( $imageID, 'full' ); ?>
<?php $alt_text = get_post_meta($imageID , '_wp_attachment_image_alt', true); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo $alt_text; ?>" />

  • Hi Jonathan,

    Thanks for the fast reply sorry for my slow one I have been abroad.

    I have tried the following:

    
<?php $alt_text = get_post_meta($imageID , '_wp_attachment_image_alt', true); ?>

<img src="<?php the_field('portimg2'); ?>" alt="" />

    But it doesn’t seem to be working, any ideas?

    Michelle

  • Hi again,

    I think this is what I am looking for but I am not sure which bits I need: http://www.advancedcustomfields.com/resources/field-types/image/

  • I have managed to get this working with your code Jonathan, thanks for your help.

    The problem was I had not changed over to ID in the admin area.

    Would I need to write out the same code for each image if I have multiple images on a page?

  • Hi,

    Yes you’d have to write out the code for all the places where you have images. If you have the images in a repeaterfield you do not however.. If you’re looking to create an gallery I’d suggest you take a look at the gallery field add on. With that you retrieve the alt text per default.

    If you prefer you could just create a function for this to simplify your code in the template. Put this in functions.php

    
function get_image_with_alt($imagefield, $postID, $imagesize = 'full'){
$imageID = get_field($imagefield, $postID); 
$image = wp_get_attachment_image_src( $imageID, $imagesize ); 
$alt_text = get_post_meta($imageID , '_wp_attachment_image_alt', true); 
return '<img src="' . $image[0] . '" alt="' . $alt_text . '" />';
}

    And then all it like this where you want the image in your template:

    
<?php echo get_image_with_alt('NAME OF THE IMAGE FIELD', get_the_ID(), 'thumbnail'); ?>

    Note that the last parameter in the function is optional and it’s for if you want another image size than full.

  • Hi Jonathan,

    I have implemented the code that you have provided and it works perfectly, just what I was looking for, thank you so much for your help.

    Michelle

  • I have added the code to one template and it works but if I add it to multiple page templates for a theme it only works on one.

    Michelle

  • Hi Michelle,

    You have to add it inside the loop.. And of course the function should only be added once in functions.php.

    Also, make sure you change the fieldname (the first parameter) to the correct one AND also that the field is set to output the image ID.

    If you want to use it outside of the loop you could change it to this:

    

<?php 
global $post;
echo get_image_with_alt('NAME OF THE IMAGE FIELD', $post->ID, 'thumbnail'); ?>

  • Thanks Jonathan – all works!

  • I tried the function you created @jonathan, this is how I used to display the image:

    <img src="<?php the_sub_field('inside_the_customer_imgs'); ?>">

    This is you function, to which I also added the title field:

    function get_image_with_alt_and_title ($imagefield, $postID, $imagesize = 'full'){
	$imageID = get_field($imagefield, $postID); 
	$image = wp_get_attachment_image_src( $imageID, $imagesize ); 
	$alt_text = get_post_meta($imageID , '_wp_attachment_image_alt', true);
	$title_text = get_the_title($imageID);
	
	return '<img src="' . $image[0] . '" alt="' . $alt_text . '" title="' . $title_text . '" />';
}

    And this is how I call the function in my template:

    <?php echo get_image_with_alt_and_title('inside_the_customer_imgs', get_the_ID(), 'thumbnail'); ?>

    but somehow when I run this on my page I get the following output:

    <img src="" alt="" title="THE TITLE OF THE PAGE WHERE THE IMAGE IS ON">

    If I change the get_field to get_sub_field in the function the output becomes completely empty:

    <img src="" alt="" title="">

    Any idea what I could be doing wrong here? I know it has been ages since this request originally came, but Google led me here 🙂

  • Nevermind found a fix myself 🙂

    I think the main reason was related to the fact that the “return format” was set to “Image URL” instead of “Image Array”.

    After I changed that in my WordPress backend I now use the following code in my template and it gives me the alt tag and title tag of the image:

    <?php 
$image = get_sub_field('inside_the_customer_imgs'); 
printf( '<img src="%s" alt="%s" title="%s" />', $image['url'], $image['alt'], $image['title'] );         
?>
Viewing 14 posts - 1 through 14 (of 14 total)

The topic ‘How to use ALT tags’ is closed to new replies.