Obtener fuente de imagen por ID con tamaño

Estoy trabajando en un sitio de WP con algunos controles deslizantes de promoción/anuncio con un evento de clic de Google Analytics. Funciona muy bien, ahora quiero mostrar la imagen correcta en la resolución correcta.

Estoy usando llenar la imagen por servir las imágenes. Funciona bien mientras está codificado, así que sé que funciona. Cuando trato de obtener las fuentes de imágenes con imágenes cargadas por WP, no es así. Lo sé debido a mis (faltas) habilidades de php.

Lo que picturfill necesita:

<span data-picture data-alt="">
    <span data-src="https://stackoverflow.com/questions/17233618/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>

Tengo la URL o la identificación o la imagen almacenada en: $attachment_id

Pensé hacer esto:

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

?>

los get_field(‘advimg’); es desde FCA.

<span data-picture data-alt="">
    <span data-src="https://stackoverflow.com/questions/17233618/<?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="https://stackoverflow.com/questions/17233618/<?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>

Pero no está funcionando. He jugado con:

wp_get_attachment_image_src wp_get_attachment_image_url wp_get_attachment_image_link

Debo estar teniendo los viernes, porque no funciona y algo me dice que no es tan difícil… simplemente no lo veo hoy.

Esperaba que ustedes pudieran colaborar.

Gracias por adelantado,

/Pablo

EDITAR / CÓDIGO FINAL / CORREGIR

<?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="https://stackoverflow.com/questions/17233618/<?php echo $default[0]; ?>"></span>
    <span data-src="<?php echo $small[0]; ?>" data-media="(min-width: 400px)"></span>
    <span data-src="https://stackoverflow.com/questions/17233618/<?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="https://stackoverflow.com/questions/17233618/<?php echo $default[0]; ?>" alt="alt desc here">
    </noscript>
</span>

wp_get_attachment_image_src se nombra confusamente. (Un mejor nombre sería wp_get_attachment_image_atts). En realidad, devuelve una matriz con los atributos de imagen “url”, “ancho” y “alto”, de un archivo adjunto de imagen. Solo para la imagen src, use el primer elemento en la matriz devuelta:

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

Además, asegúrese de que el tipo de devolución del campo de imagen de ACF esté configurado como ID de archivo adjunto para que $attachment_id = get_field('advimg'); te da la identificación que esperas.