title: Get image source by ID with size
body: <p>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.</p>
  
  <p>I'm using <a href="https://github.com/scottjehl/picturefill" rel="noreferrer">picturefill</a> 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.</p>
  
  <p>What picturfill needs:</p>
  
  <pre><code>&lt;span data-picture data-alt=""&gt;
      &lt;span data-src="filename_default.jpg"&gt;&lt;/span&gt;
      &lt;span data-src="filename_small.jpg" data-media="(min-width: 400px)"&gt;&lt;/span&gt;
      &lt;span data-src="filename_medium.jpg" data-media="(min-width: 768px)"&gt;&lt;/span&gt;
      &lt;span data-src="filename_big.jpg" data-media="(min-width: 1200px)"&gt;&lt;/span&gt;
  
      &lt;!-- Fallback content for non-JS browsers. --&gt;
      &lt;noscript&gt;
          &lt;img src="external/imgs/small.jpg" alt=""&gt;
      &lt;/noscript&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>I have either the url or the id or the image stored in:
      $attachment_id</p>
  
  <p>I thought doing this:</p>
  
  <pre><code>&lt;?php
      $attachment_id = get_field('advimg');
      $large = "adv-pos-a-large";
      $default = "adv-pos-a-default";
      $small = "adv-pos-a-small";
  
  ?&gt;
  </code></pre>
  
  <p>The <strong>get_field('advimg');</strong> is from <a href="http://www.advancedcustomfields.com" rel="noreferrer">ACF</a>.</p>
  
  <pre><code>&lt;span data-picture data-alt=""&gt;
      &lt;span data-src="&lt;?php wp_get_attachment_image_src( $attachment_id, $default ); ?&gt;"&gt;&lt;/span&gt;
      &lt;span data-src="&lt;?php wp_get_attachment_image_src( $attachment_id, $small ); ?&gt;" data-media="(min-width: 400px)"&gt;&lt;/span&gt;
      &lt;span data-src="&lt;?php wp_get_attachment_image_src( $attachment_id, $default ); ?&gt;" data-media="(min-width: 768px)"&gt;&lt;/span&gt;
      &lt;span data-src="&lt;?php wp_get_attachment_image_src( $attachment_id, $large ); ?&gt;" data-media="(min-width: 1200px)"&gt;&lt;/span&gt;
  
      &lt;!-- Fallback content for non-JS browsers. --&gt;
      &lt;noscript&gt;
          &lt;img src="external/imgs/small.jpg" alt=""&gt;
      &lt;/noscript&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>But it ain't working. Iv'e played around with:</p>
  
  <p>wp_get_attachment_image_src
  wp_get_attachment_image_url
  wp_get_attachment_image_link</p>
  
  <p>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.</p>
  
  <p>Hoped you guys could pitch in.</p>
  
  <p>Thanks in advance,</p>
  
  <p>/Paul</p>
  
  <p><strong>EDIT / FINAL CODE / FIX</strong></p>
  
  <pre><code>&lt;?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' );
  ?&gt; 
  
  &lt;span data-picture data-alt="alt desc here"&gt;
      &lt;span data-src="&lt;?php echo $default[0]; ?&gt;"&gt;&lt;/span&gt;
      &lt;span data-src="&lt;?php echo $small[0]; ?&gt;" data-media="(min-width: 400px)"&gt;&lt;/span&gt;
      &lt;span data-src="&lt;?php echo $default[0]; ?&gt;" data-media="(min-width: 768px)"&gt;&lt;/span&gt;
      &lt;span data-src="&lt;?php echo $large[0]; ?&gt;" data-media="(min-width: 1200px)"&gt;&lt;/span&gt;
  
      &lt;!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. --&gt;
      &lt;noscript&gt;
          &lt;img src="&lt;?php echo $default[0]; ?&gt;" alt="alt desc here"&gt;
      &lt;/noscript&gt;
  &lt;/span&gt;
  </code></pre>