Support

Account

Home Forums General Issues get title from Image ID

Solving

get title from Image ID

  • I am using the image ID field as I am using srcet.

    I see that it returns the image dimensions, src, srcset and alt but how can I also return the title?

    <div class="lower-image">
    										<?php $lower_animated_image_2 = get_field( 'lower_animated_image_2' ); ?>
    										<?php $size = 'medium'; ?>
    										<?php if ( $lower_animated_image_2 ) : ?>
    											<?php echo wp_get_attachment_image( $lower_animated_image_2, $size ); ?>
    										<?php endif; ?>

    </div>

    I tried implementing the answer here

    https://stackoverflow.com/questions/63073021/how-can-i-get-an-image-title-and-set-the-title-attribute-using-wp-get-attachment

    Which funnily enough was ALSO posted by me but i can’t seem to get the code correct this time

    Any help greatly appreciated

  • Trying to follow your various posts but it’s a little confusing.

    But, you will not be able to set the “title” attribute of an image using wp_get_attachment_image(). “title” is not one of of the attributes set by this function and is not an attribute that is accepted in the forth argument of the function. https://developer.wordpress.org/reference/functions/wp_get_attachment_image/

    This is how I create responsive images using ACF fields….

    But before I do I would like to mention that in order to get WP to generate an srcset that there must me multiple images sizes that result in the same image width to height ratio. WP will only include images that are the same ratio. For example.

    In order to generate an image tag that includes the “title” attribute you will need to use the WP function wp_get_attachment_image_src() and then built your own image tag.

    
    // first get the image of the size you want.
    $image_id = get_field('your-image-field'); // acf image field that returns ID
    
    // size should be the larges image you want to show
    $size = 'large';
    
    // get the image
    $image = wp_get_attachment_image_src($image_id, $size);
    
    if ($image) {
      // generate all tag
      $alt = get_post_meta($image_id, '_wp_attachment_image_alt', true);
    
      // get the image title
      $title = get_the_title($image_id);
      
      // set image class, this class is what will cause WP to generate src set
      $class = 'size-'.$size.' wp-image-'.$image_id;
      
      // generate image tag
      $image_tag = '<img src="'.$image[0].'" width="'.$image[1].
                   '" height="'.$image[2].'" alt=" '.$alt.
                   '" title="'.$title.'" class="'.$class.'" />';
      
      // this WP function will add the srcset and other attributes to the tag
      wp_filter_content_tags($image_tag);
      
      echo $image_tag;
      
    }
    
  • Hi John,

    Sorry for my confusing posts!

    I will have to try this in the morning, but to start, I made my custom image 1000px by 1000px. Even though this is a different ratio from the original size, this seems to work now?

    I thought it would just choose which hit 1000px first (the width or the height) and the other would be proportionate. For example, one of my ACF fields uses my custom image size and now outputs this which seems to be doing as I described

    img width=”741″ height=”1000″ src=”https://www.website.com/wp-content/uploads/2021/08/website-image-741×1000.jpg&#8221; alt=”Image of dish” followed by all the other sizes

    I need to make the other images sizes more custom, they are all theme defaults except the home_portriat one of 1000px by 1000px. Is this not correct?

    I have found the whole responsive images side of ACF incredibly confusing. I understand srcset and retina image when defining set images in html but I can’t get my head around how to use them with ACF.

    I was expecting it to be something that looked a little more like media queries, a bit like

    $home_portrait[‘sizes’][‘medium’]

    @media (max-width:480px) {
    $home_portrait[‘sizes’][‘small’]
    }

    that kind of thing (I realise this code is just completely invented but it’s just to illustrate how I thought it would work)

    I also would have preferred more control because I am using object fit for images which complicates things a little.

  • ACF does not crate “responsive imaages”, it just stores and image ID and returns what you ask it to return, array, url or id (url will always return the url of the full size image), it us up to us to do what we want with these values to display images as we want them to be displayed.

    If you have an image that is 1000×1000 that is a 1:1 ratio. If you have not other image sizes that are a 1:1 ration then no other image sizes will be added to the src set. However, the default image sizes added in WP are all 1:1 ratio image sizes and they will be added if you do not alter them.

    srcset and @media are two different subjects. The first is an attribute of an <img> tag and the other is done in CSS and usually to set a background image.

  • Hi John,

    My image dimensions aren’t 1000×1000, it’s actually just a portrait image but I wanted it to display with a max height of 1000px and I figured the width could then never exceed that given it’s taller than it is wider so I just did a max width of the same. I have read somewhere that you can do 1000 x 9999 aswell?

    I just wanted a max height of 1000px and I don’t care what the width is because I am using object fit:cover anyway.

    If I add more sizes that all use 9999 as the width, will they be considered the same ratio and show up?

    If not, because I am using object fill for all my images except in the gallery, I suppose I could just make them all an equal ratio that was good enough anyway, close to 1:1 but maybe something a little more in line with Landscape or portrait.

    Sorry, I appreciate your patience.

  • If you want to create images that have the same aspect ratio then what you do is you set one dimension to a value and the other to 0 when creating adding an image size

    
    add_image_size('height1000', 0, 1000, false);
    add_image_size('height800', 0, 800, false);
    add_image_size('height600', 0, 600, false);
    

    The same can be done for width

  • Hi John

    Thanks so much for that code, I added it today and it’s fetching the title which is brilliant.

    I am still struggling with the srcset images though.

    If you look here (it’s a tiny url to bypass the coming soon page and to stop the domain coming up in search results)

    tinyurl.com/8kvx77u8

    You’ll see the 2 identical images of food stacked on top of eachother. When you inspect them, the size is listed as 741 x 1000 which is correct BUT when you look at the src image, even though the file name has -741×1000.jpg at the end of it, the intrinsic size is actually the full size? It’s the same for every image listed in the srcset?

    it does this if I have it set to medium or home_portrait but not if I switch it to thumbnail

    I’m sorry if the answer to this is in the comments you have already made but I jusy don’t get why? If I copy one of the URLS and paste it in a new window, the dimensions of the image appear to be correct so I don’t get why the intrinsic size seems to be listed wrong?

    Am I missing something here?

  • I don’t understand what you mean by “the intrinsic size”. What part of the image tag are your referring to?

    
    <img
    loading="lazy" src=".../test-the-kings-wark-pub-historical-pub-edinburgh-741x1000.jpg" width="741" height="1000" alt=" Image of dish at The Kings Wark pub" title="test-the-kings-wark-pub-historical-pub-edinburgh" class="size-medium wp-image-249" srcset=".../test-the-kings-wark-pub-historical-pub-edinburgh-741x1000.jpg 741w, .../test-the-kings-wark-pub-historical-pub-edinburgh-1037x1400.jpg 1037w, .../test-the-kings-wark-pub-historical-pub-edinburgh-768x1037.jpg 768w, .../test-the-kings-wark-pub-historical-pub-edinburgh-1137x1536.jpg 1137w, .../test-the-kings-wark-pub-historical-pub-edinburgh.jpg 1481w" sizes="(max-width: 741px) 100vw, 741px" /></div><div
    class="lower-image">
    

    The image tags look as I would expect them to look.

  • Hi john,

    When you inspect it, if you hover over each URL a wee dialogue box shows the details of the image including the natural (intrinsic) size if the image.

    I have changed the bottom one to ‘Thumbail’ for the size to demonstrate. You will see that now when you hover over the URL it shows the intrinsic size as 150 x 150 because that is the size of the ….150×150.jpg image it’s using

    But if you look at the sizes on the upper image which is set to medium, it always shows the dimensions for the largest image, almost as if it’s not actually using the smaller one. It does the same for my custom image sizes and I can’t work out why.

  • No idea, but I think that is just showing whatever image is in the src value of the image and the srcset is not considered.

  • Yeah maybe, though the doesn’t explain why it differs when using the thumbnail size. Very strange!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.