Get image source by ID with size

Question

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

I'm using picturefill for serving the images. Works fine while hardcoded, so I know it works. When I try to get the image sources with images uploaded by WP is doesn't. I know it due my (lack-off) php skills.

What picturfill needs:

<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 the url or the id or the image stored in: $attachment_id

I thought doing this:

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

?>

The get_field('advimg'); is from 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 ain't working. Iv'e played around with:

wp_get_attachment_image_src wp_get_attachment_image_url wp_get_attachment_image_link

I must be having the fridays, due it ain't working and something says to me that it's not that hard... im just not seeing it today.

Hoped you guys could pitch in.

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 confusingly named. (A better name for it would be wp_get_attachment_image_atts). It actually returns an array with the image attributes "url", "width" and "height", of an image attachment file. For just the image src, 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 your ACF image field return type is set to attachment ID so that $attachment_id = get_field('advimg'); gives you the id that you expect.