Accessing Alt Text – Need an Example

You can access the original image details in the image array. Something like this.
if ( isset($image['image']['original_image']) && isset($image['image']['original_image']['alt']) && $image['image']['original_image']['alt'] ) $img_alt = $image['image']['original_image']['alt'];

@kallestonecold

Thanks so much for taking the time to assist. I’m still having a bit of trouble as I haven’t had to deal with php like this before. I’ve tried putting this in my code several different ways, and it always just causes the whole page to error out, or the alt tag to be empty. I just have it locally right now or I’d post a link, but this is my latest attempt:

<?php
$image = get_field('cropper');
$img_alt = $image['image']['original_image']['alt'];
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo $img_alt['alt']; <?php endif; ?>

This particular attempt produces an empty alt tag. I guess I don’t understand where what you provided would go.

I’ll show you more of the code, hopefully it’ll make more sense. Also, the return_format should be an array not url. I’m refering to the image crop Field. I’ve pasted the field code here, you can select it to return an array when you set the field up in ACF.

array(
	'key' => 'field_6061d07fb0fb8',
	'label' => 'Bild',
	'name' => 'image',
	'type' => 'image_aspect_ratio_crop',
	'instructions' => '',
	'required' => 1,
	'conditional_logic' => 0,
	'wrapper' => array(
		'width' => '',
		'class' => '',
		'id' => '',
	),
	'crop_type' => 'aspect_ratio',
	'aspect_ratio_width' => 50,
	'aspect_ratio_height' => 37,
	'return_format' => 'array',
	'preview_size' => 'medium',
	'library' => 'all',
	'min_width' => '',
	'min_height' => '',
	'min_size' => '',
	'max_width' => '',
	'max_height' => '',
	'max_size' => '',
	'mime_types' => '',
),

$image = get_field('image');
$img_alt = '';
if ( isset($image['image']['alt']) && $image['image']['alt'] ) $img_alt = $image['image']['alt'];
else if ( isset($image['image']['original_image']) && isset($image['image']['original_image']['alt']) && $image['image']['original_image']['alt'] ) $img_alt = $image['image']['original_image']['alt'];

echo '<img loading="lazy" src="'.$image0x.'" data-src="'.$image_d1x.'" data-srcset-d="'.$image_d1x.' 1x, '.$image_d2x.' 2x"  data-srcset-m="'.$image_m1x.' 1x, '.$image_m2x.' 2x" class="lazy" alt="'.$img_alt.'" />';

This is how I use it. If the cropped image has an alt-text it’ll use that. If not, it’ll fall back to the original image.

One way for you to debug is to use print_r on the $image or var_dump($image); then use die();

Still more php than I know unfortunately. You can totally ignore me if you don’t have time to assist anymore, I completely understand.

This is how I set it up in my code, which is probably wrong. Note that I’ve replaced what you provided with my keys and field names:

<?php
   array(
   'key' => 'field_6227da38223ad',
   'label' => 'Cropper',
   'name' => 'cropper',
   'type' => 'image_aspect_ratio_crop',
   'instructions' => '',
     'required' => 0,
     'conditional_logic' => 0,
     'wrapper' => array(
          'width' => '',
          'class' => '',
          'id' => '',
           ),
     'crop_type' => 'aspect_ratio',
     'aspect_ratio_width' => 4,
     'aspect_ratio_height' => 3,
     'return_format' => 'array',
     'preview_size' => 'small',
     'library' => 'all',
     'min_width' => '',
     'min_height' => '',
     'min_size' => '',
     'max_width' => '',
     'max_height' => '',
     'max_size' => '',
     'mime_types' => '',
     );
     $image = get_field('cropper');
     $img_alt = '';
if ( isset($image['image']['alt']) && $image['image']['alt'] ) $img_alt = $image['image']['alt'];
else if ( isset($image['image']['original_image']) && isset($image['image']['original_image']['alt']) && $image['image']['original_image']['alt'] ) $img_alt = $image['image']['original_image']['alt'];
echo '<img loading="lazy" src="'.$image0x.'" data-src="'.$image_d1x.'" data-srcset-d="'.$image_d1x.' 1x, '.$image_d2x.' 2x"  data-srcset-m="'.$image_m1x.' 1x, '.$image_m2x.' 2x" class="lazy" alt="'.$img_alt.'" />'; ?>

Which spits out this in the source code:
<img loading="lazy" src="" data-src="" data-srcset-d=" 1x, 2x" data-srcset-m=" 1x, 2x" class="lazy" alt="">

When I did the dump you mentioned, I get these values:

   190
    190
    tapes-aspect-ratio-4-3
    tapes-aspect-ratio-4-3.jpg
    66993
    https://base.test/wp-content/uploads/tapes-aspect-ratio-4-3.jpg
    https://base.test/content/tapes-aspect-ratio-4-3/
    Cropped alt text.
    1
    tapes-aspect-ratio-4-3
    inherit
    5
    2022-03-08 22:38:39
    2022-03-08 22:40:07
    0
    image/jpeg
    image
    jpeg
    https://base.test/wp-includes/images/media/default.png
    664
    498
    Array
    Array

array(25) { ["ID"]=> int(190) ["id"]=> int(190) ["title"]=> string(22) "tapes-aspect-ratio-4-3" ["filename"]=> string(26) "tapes-aspect-ratio-4-3.jpg" ["filesize"]=> int(66993) ["url"]=> string(62) "https://base.test/wp-content/uploads/tapes-aspect-ratio-4-3.jpg" ["link"]=> string(48) "https://base.test/content/tapes-aspect-ratio-4-3/" ["alt"]=> string(17) "Cropped alt text." ["author"]=> string(1) "1" ["description"]=> string(0) "" ["caption"]=> string(0) "" ["name"]=> string(22) "tapes-aspect-ratio-4-3" ["status"]=> string(7) "inherit" ["uploaded_to"]=> int(5) ["date"]=> string(19) "2022-03-08 22:38:39" ["modified"]=> string(19) "2022-03-08 22:40:07" ["menu_order"]=> int(0) ["mime_type"]=> string(10) "image/jpeg" ["type"]=> string(5) "image" ["subtype"]=> string(4) "jpeg" ["icon"]=> string(53) "https://base.test/wp-includes/images/media/default.png" ["width"]=> int(664) ["height"]=> int(498) ["sizes"]=> array(15) { ["thumbnail"]=> string(70) "https://base.test/wp-content/uploads/tapes-aspect-ratio-4-3-150x150.jpg" ["thumbnail-width"]=> int(150) ["thumbnail-height"]=> int(150) ["medium"]=> string(62) "https://base.test/wp-content/uploads/tapes-aspect-ratio-4-3.jpg" ["medium-width"]=> int(576) ["medium-height"]=> int(432) ["medium_large"]=> string(62) "https://base.test/wp-content/uploads/tapes-aspect-ratio-4-3.jpg" ["medium_large-width"]=> int(664) ["medium_large-height"]=> int(498) ["large"]=> string(62) "https://base.test/wp-content/uploads/tapes-aspect-ratio-4-3.jpg" ["large-width"]=> int(664) ["large-height"]=> int(498) ["small"]=> string(70) "https://base.test/wp-content/uploads/tapes-aspect-ratio-4-3-300x225.jpg" ["small-width"]=> int(300) ["small-height"]=> int(225) } ["original_image"]=> array(24) { ["ID"]=> int(161) ["id"]=> int(161) ["title"]=> string(14) "Cassette Tapes" ["filename"]=> string(9) "tapes.jpg" ["filesize"]=> int(310073) ["url"]=> string(45) "https://base.test/wp-content/uploads/tapes.jpg" ["link"]=> string(32) "https://base.test/post-one/tapes/" ["alt"]=> string(25) "Cassette tapes in a pile." ["author"]=> string(1) "1" ["description"]=> string(0) "" ["caption"]=> string(0) "" ["name"]=> string(5) "tapes" ["status"]=> string(7) "inherit" ["uploaded_to"]=> int(1) ["date"]=> string(19) "2022-03-08 16:55:10" ["modified"]=> string(19) "2022-03-08 22:39:39" ["menu_order"]=> int(0) ["mime_type"]=> string(10) "image/jpeg" ["type"]=> string(5) "image" ["subtype"]=> string(4) "jpeg" ["icon"]=> string(53) "https://base.test/wp-includes/images/media/default.png" ["width"]=> int(1800) ["height"]=> int(1350) ["sizes"]=> array(15) { ["thumbnail"]=> string(53) "https://base.test/wp-content/uploads/tapes-150x150.jpg" ["thumbnail-width"]=> int(150) ["thumbnail-height"]=> int(150) ["medium"]=> string(53) "https://base.test/wp-content/uploads/tapes-700x525.jpg" ["medium-width"]=> int(576) ["medium-height"]=> int(432) ["medium_large"]=> string(53) "https://base.test/wp-content/uploads/tapes-768x576.jpg" ["medium_large-width"]=> int(768) ["medium_large-height"]=> int(576) ["large"]=> string(54) "https://base.test/wp-content/uploads/tapes-1000x750.jpg" ["large-width"]=> int(900) ["large-height"]=> int(675) ["small"]=> string(53) "https://base.test/wp-content/uploads/tapes-300x225.jpg" ["small-width"]=> int(300) ["small-height"]=> int(225) } } }

Again, thank you for any help you can provide, but I also understand if you are unavailable to assist further. Just let me know and I’ll just close this out if so.

Hi @jenwhitedesign,

Probably too late to help but thought I’d post a simple solution for you just incase.

To use the ALT tag of the original image, all you needed to do was to replace:

<?php echo esc_attr($image['alt']); ?>

with:

<?php echo esc_attr($image['original_image']['alt']); ?>

nothing more needed. So your original code would become this:

<?php
   $image = get_field('cropper');
   if( !empty( $image ) ): ?>
	<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['original_image']['alt']); ?>" />
<?php endif; ?>

• This reply was modified 2 years, 4 months ago by cokeyblokey.

@cokeyblokey This is EXACTLY what I needed, thank you so much!