How can I add support for client-provided alt text in my custom WordPress theme?

Question

I am building a theme and I have images displaying on the site via ACF. I am trying to get the alt text that the client enters when they upload the image. I understand that the image return format should be set to image array or ID, but not URL. Mine were set to URL quite some time ago and I am having trouble revising my code to reflect the alt text when inspected. Here is my current function that displays staff repeater.

function meetOurTeamListing() {
    if(have_rows('meet_our_team')):
        while(have_rows('meet_our_team')): the_row();
            $staffImage = get_sub_field('staff_image');
            $staffName = get_sub_field('staff_name');
            $staffTitle = get_sub_field('staff_title');
            $staffBio = get_sub_field('staff_bio');

            $html = 
            '
            <div class="myBtn staff-item">
                <img src="'.$staffImage.'" />
                <p class="staff-name">'.$staffName.'</p>
                <p class="staff-title">'.$staffTitle.'</p> 
            </div>    

            <!-- The Modal -->
            <div class="myModal modal">

            <!-- Modal content -->
            <div class="modal-content">    
                <div class="modal-header">
                    <span class="close">&times;</span>

                    <div class="modal-header-text">
                        <p class="modal-name">'.$staffName.'</p>
                        <p class="modal-pipe">|</p>
                        <p class="modal-title">'.$staffTitle.'</p>
                    </div>    
                </div>
                <img src="'.$staffImage.'" />
                <div class="modal-body">'.$staffBio.'</div>
            </div>

            </div>
            ';

            echo $html;

        endwhile;
    endif;  
}

Obviously the sub-field would need to be converted to an image array, however simply switching the radio selector from "image url" to "image array" breaks the images on the front end. Given this context, how can I implement alt text from the WP database dynamically?

Answer 1

Problem solved. Thanks Nicole!

My problem was that when set up the custom fields that took images, I set them to Image URL. This is good if you just want to quickly display an image because it just returns a string. It should be set to Image Array. This results in an itemized list of key/value pairs (ie. alt text) that are accessible in the theme template.

To display your image that is set to an Image Array, here's the syntax:

<img src="'.esc_url($image['url']).'" alt="'.esc_attr($image['alt']).'" />

This works only inside of my PHP function. Alternatively, the following can be used inside a template file among the HTML:

<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />