Getting Alt Text to show up in Image Field

• LinzBlack

• March 28, 2017 at 1:20 am

Any help would be appreciated! I am working on a client website (that was NOT coded by us) and the Image fields were set up with “Image ID” as the return value. I need to change the code to Image Object so the Alt Text registers. Right now I am working on the gallery page: http://www.roseshopflowers.com/gallery.

The current code (with Image ID) as the return value is:

<?php
/*
Template Name: Gallery
*/
?>

<?php get_header(); ?>

<div id=”gallery-content”>

<h1><?php the_title(); ?></h1>

<p><?php the_field(‘gallery_info’); ?></p>

<?php if(get_field(‘gallery_images’)): ?>
<?php while(the_repeater_field(‘gallery_images’)): ?>

<?php $image = wp_get_attachment_image_src(get_sub_field(‘image’), ‘gallery’); ?>
<?php $image2 = wp_get_attachment_image_src(get_sub_field(‘image’), ‘full’); ?>
” rel=”shadowbox[gallery]“>” alt=”<?php get_the_title(get_sub_field(‘image’)) ?>” />

<?php endwhile; endif; ?>

</div><!–#galleryContent–>
<div class=”clear”></div>

<?php get_footer(); ?>

The code I have tried when attempting to change to “Image Object” is:

<?php
/*
Template Name: Gallery
*/
?>

<?php get_header(); ?>

<div id=”gallery-content”>

<h1><?php the_title(); ?></h1>

<p><?php the_field(‘gallery_info’); ?></p>

<?php if(get_field(‘gallery_images’)): ?>
<?php while(the_repeater_field(‘gallery_images’)): ?>

” rel=”shadowbox[gallery]“>

” alt=”<?php echo $image[‘alt’]; ?>” /a>

<?php endwhile; endif; ?>

</div><!–#galleryContent–>
<div class=”clear”></div>

<?php get_footer(); ?>

The alt text shows up but it gets rid of my nice gallery grid…all the photos are HUGE and just in a line. Ideas?

• John Huebner

• March 28, 2017 at 4:01 am

change the return value to image array (or object) then change every instance in the original code is getting the image field so that the values are not formatted

example change get_sub_field('image') to get_sub_field('image', false)

this will preserve the all of the original code with the minimum amount of alteration and allow you to use the full image array.

Then to add your additional code you can get the field again in the original way.

Either that or use

$alt = get_post_meta(get_sub_field(image), '_wp_attachment_image_alt', true);

to get the alt text for the image

• LinzBlack

• March 28, 2017 at 4:26 am

Thanks…

So I tried it both ways, but maybe I’m not understanding the second part (getting the alt text to work).

I tried

<?php get_header(); ?>

<div id="gallery-content">

	<h1><?php the_title(); ?></h1>
	
	<p><?php the_field('gallery_info'); ?></p>
	
	<?php if(get_field('gallery_images')): ?>
    <?php while(the_repeater_field('gallery_images')): ?>

        <?php $image = wp_get_attachment_image_src(get_sub_field('image', false), 'gallery'); ?>
        <?php $image2 = wp_get_attachment_image_src(get_sub_field('image', false), 'full'); ?>
        <a href="<?php echo $image2[0]; ?>" rel="shadowbox[gallery]"><img class="gallery-images" src="<?php echo $image[0]; ?>" alt="<?php echo $image[‘alt’]; ?>” /a>

    <?php endwhile; endif; ?>

And

<?php get_header(); ?>

<div id="gallery-content">

	<h1><?php the_title(); ?></h1>
	
	<p><?php the_field('gallery_info'); ?></p>
	
	<?php if(get_field('gallery_images')): ?>
    <?php while(the_repeater_field('gallery_images')): ?>

        <?php $image = wp_get_attachment_image_src(get_sub_field('image', false), 'gallery'); ?>
        <?php $image2 = wp_get_attachment_image_src(get_sub_field('image', false), 'full'); ?>
        <a href="<?php echo $image2[0]; ?>" rel="shadowbox[gallery]"><img class="gallery-images" src="<?php echo $image[0]; ?>" $alt = get_post_meta(get_sub_field(image), '_wp_attachment_image_alt', true); ?>” /a>

    <?php endwhile; endif; ?>

Both options give code links instead of images on the gallery page. Can you see something I’m doing wrong? Thanks!

• John Huebner

• March 28, 2017 at 6:19 am

something like

$image = wp_get_attachment_image_src(get_sub_field('image', false), 'gallery'); 
$image2 = wp_get_attachment_image_src(get_sub_field('image', false), 'full');
<a href="<?php echo $image2[0]; ?>" rel="shadowbox[gallery]">
   <img class="gallery-images" src="<?php 
      echo $image[0]; ?>" $alt=<?php 
      echo get_post_meta(get_sub_field('image', false), 
                         '_wp_attachment_image_alt', true); ?>" /></a>

• LinzBlack

• March 28, 2017 at 6:43 am

No dice. Thanks for trying though!

• John Huebner

• March 28, 2017 at 7:35 am

Is the original code working?

If this is not working `get_post_meta(get_sub_field(‘image’, false),
‘_wp_attachment_image_alt’, true);` then there is likely no alternate text added for the image? Or at least that’s what should be the problem.

• LinzBlack

• March 28, 2017 at 9:18 am

The original code is working, it’s just set to return the Image ID instead of Object, so the alt text is not being picked up. You can see the page at with the original code.

I know there is alt text on every image because we went through and spent 6 hours adding it to the whole site ha. Also, on the ACF edit page, when I click the image, you can see our alt text.

• John Huebner

• March 28, 2017 at 10:35 pm

How did you add this image alt text.

WP stores alt text added when editing an image in the media folder to the meta key of _wp_attachment_image_alt so this will work to retrieve it

$alt = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);

But if you added alt text through some other means then it could be stored in some other way. Please explain further how the alt text was added if this is the case.

• acal

• September 27, 2021 at 12:03 pm

This is what worked for me. Based on @hube2 but cleaned up a bit. Thanks!

<a href="<?php the_sub_field('link', 'option'); ?>" target="_blank">
      <img class="test" src="<?php the_sub_field('image'); ?>" alt="<?php 
      echo get_post_meta(get_sub_field('image', false), '_wp_attachment_image_alt', true); ?>">
</a>