CODEWITHSUNDEEP
phpwordpressadvanced-custom-fields
Mr Toad
Mr Toad

Reputation: 256

How can I get an image title and set the title attribute using wp_get_attachment_image and ACF Image fields?

I am using the Advanced Custom Fields image field, returning an ID.

The documentation says that when using the image ID, you use the wp_get_attachment_image() function to generate the image HTML, but despite following the advice for that I cannot seem to get the title and I don't know why.

I have tried various things including the following:

if( get_field('pre-defined_block_choice') == 'weddings' ) {

    $image = get_field('wedding_image_1');
    $size = 'full'; // (thumbnail, medium, large, full or custom size)
    $title = $image['title'];
    
       if( $image ) {
          echo wp_get_attachment_image( $image, $size, $title );
       }
}

And

if( get_field('pre-defined_block_choice') == 'weddings' ) {

    $image = get_field('wedding_image_1');
    $size = 'full'; // (thumbnail, medium, large, full or custom size)
    $attachment_title = get_the_title($attach_id);
    
       if( $image ) {
          echo wp_get_attachment_image( $image, $size, $attachment_title );
       }
}

This returns the srcset, alt attributes and class names but not the title. How do I also get it to return the title?

Upvotes: 1

Views: 2681

Answers (1)

FluffyKitten
FluffyKitten

Reputation: 14312

From the comments it looks like you are trying to get the image title from the title added in the Media Gallery and/or set the title attribute for the image when it is displayed on the website.

There are 2 ways you can get and set the title of the image:

  1. Change the ACF field to return an "Image Array" instead of the "Image ID" (This appears to be what you are trying in your first example in your question).
  2. Use WP functions to get and/or set the image title using the image ID (This appears to be what you are trying in your second example).

I'll show you below how to get both working:

1. Get the "Image Array" with all the image details from your ACF field

The image title is returned in the array so you don't need to use additional functions to then look up the image details (including the title) using the id. You also build the image HTML in your code so you can add the title as required.

First you need to change the ACF field settings and choose "Image Array" as the "Return Format". Then you can use the following code:

if( get_field('pre-defined_block_choice') == 'weddings' ) {

    $image = get_field('wedding_image_1');
    if( $image ){
        // 1. Get the values we need from the image array
        $url   = $image['url'];
        $alt   = $image['alt'];
        $title = $image['title'];        // <- the TITLE!
        $id    = $image['ID']; // We don't need it here, but this is how you get it
        $width = $image['width'];
        $height = $image['height'];

        // 2. If you want an image a particular size
        $size = "thumb"; // or whatever size you want
        $thumb_url = $image['sizes'][ $size ];
        // First make sure the size you want exists and if so, get the width & height
        if ($thumb_url){
            $url = $thumb_url; // set our url variable to this one url if it exists
            $width = $image['sizes'][ $size . '-width' ];
            $height = $image['sizes'][ $size . '-height' ];
        }
    
        // 3. Now build your image HTML
        $img_html = '<img src="'.$url.'" title = "'.$title.'" alt="'.$alt.'" width="'.$width.'" height="'.$height.'">';

        // 4. do whatever you want with the image e.g. return it or display it
        echo $img_html;
    }
}

2. Use the image ID to get and set the image details (including the title) using WP functions

This way, you don't change the ACF field settings, but you need to use multiple WP functions to get and set the details of the image.

Note that wp_get_attachment_image doesn't have an option to pass in the title attribute for the image according to the documentation... however if you pass the title into wp_get_attachment_image in the $attr array, it seems to work! (Of course there is no guarantee that this will continue to work in newer version of WP).

if( get_field('pre-defined_block_choice') == 'weddings' ) {

    $image_id = get_field('wedding_image_1');
    if( $image_id ) {
        $size = 'full'; // or whatever size you want    
        $title = get_the_title( $image_id );  // 1. NOTE: use image ID here, you have no $attach_id!

        // 2. set up your attributes array to pass in the title
        $attr['title'] = $title;

        // 3. Take note of the parameters for this you were passing values in the wrong positions
       $img_html = wp_get_attachment_image( $image_id, $size, false, $attr);

        // 4. do whatever you want with the image e.g. return it or display it
        echo $img_html;
    }
}

(Note: This code is untested, but the general idea is there.)

References

Upvotes: 4

Related Questions