Get image source by ID with size

Question

I am working on a WP site with some promotion / advertising sliders with a Google Analytics click event. Works great, now I want to serve the right image with the right resolution.

I use picturefill to serve images. It works fine, but hardcoded, so I know it works. When I try to get image sources with images uploaded by WP, it is not. I know this because of my (missing) php skills.

What you need for drawing:

<span data-picture data-alt=""> <span data-src="filename_default.jpg"></span> <span data-src="filename_small.jpg" data-media="(min-width: 400px)"></span> <span data-src="filename_medium.jpg" data-media="(min-width: 768px)"></span> <span data-src="filename_big.jpg" data-media="(min-width: 1200px)"></span> <!-- Fallback content for non-JS browsers. --> <noscript> <img src="external/imgs/small.jpg" alt=""> </noscript> </span> 

I have either a url, or an id or image that is stored in: $ Attachment_id

I thought about it:

 <?php $attachment_id = get_field('advimg'); $large = "adv-pos-a-large"; $default = "adv-pos-a-default"; $small = "adv-pos-a-small"; ?> 

get_field ('advimg'); - ACF .

 <span data-picture data-alt=""> <span data-src="<?php wp_get_attachment_image_src( $attachment_id, $default ); ?>"></span> <span data-src="<?php wp_get_attachment_image_src( $attachment_id, $small ); ?>" data-media="(min-width: 400px)"></span> <span data-src="<?php wp_get_attachment_image_src( $attachment_id, $default ); ?>" data-media="(min-width: 768px)"></span> <span data-src="<?php wp_get_attachment_image_src( $attachment_id, $large ); ?>" data-media="(min-width: 1200px)"></span> <!-- Fallback content for non-JS browsers. --> <noscript> <img src="external/imgs/small.jpg" alt=""> </noscript> </span> 

But it does not work. Iv'e played with:

wp_get_attachment_image_src wp_get_attachment_image_url wp_get_attachment_image_link

I have to have Friday, because it doesn’t work, and something tells me that it’s not so difficult ... I just don’t see it today.

We hope you guys can file.

Thanks in advance,

/ Paul

EDIT / FINAL CODE / FIX

 <?php $attachment_id = get_field('advanced_custom_field_name_here'); $small = wp_get_attachment_image_src( $attachment_id, 'adv-pos-a-small' ); $default = wp_get_attachment_image_src( $attachment_id, 'adv-pos-a-default' ); $large = wp_get_attachment_image_src( $attachment_id, 'adv-pos-a-large' ); ?> <span data-picture data-alt="alt desc here"> <span data-src="<?php echo $default[0]; ?>"></span> <span data-src="<?php echo $small[0]; ?>" data-media="(min-width: 400px)"></span> <span data-src="<?php echo $default[0]; ?>" data-media="(min-width: 768px)"></span> <span data-src="<?php echo $large[0]; ?>" data-media="(min-width: 1200px)"></span> <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --> <noscript> <img src="<?php echo $default[0]; ?>" alt="alt desc here"> </noscript> </span> 

Answer 1

wp_get_attachment_image_src is called confused. (The best name for it would be wp_get_attachment_image_atts). It actually returns an array with the image attributes "url", "width" and "height" of the image attachment file. For the entire src image, use the first element in the returned array:

 $img_atts = wp_get_attachment_image_src( $attachment_id, $default ); $img_src = $img_atts[0]; 

Also, make sure the return field type of the ACF field is set to the attachment identifier, so $attachment_id = get_field('advimg'); gives you the id you expect.