title: Modal box content depends of custom field
body: <p>I'm trying to display 2 different content in a modal box using <a href="http://noelboss.github.io/featherlight/" rel="nofollow noreferrer">featherlight.js</a>. It's very simple :</p>
  
  <p>If there is an 'image', it displays the 'image', otherwise if there is a 'soundcloud url', it displays a 'soundcloud url' iframe.
  But it doesn't work!</p>
  
  <p>Here is my <a href="http://www.skuar.com" rel="nofollow noreferrer">website</a></p>
  
  <p>And here is the code</p>
  
  <pre><code>&lt;div id="post"&gt; 
      &lt;a href="#" data-featherlight="#featherlight"&gt;      
          &lt;div class="img"&gt; 
              &lt;div class="art-overlay"&gt; 
                  &lt;div class="small"&gt; 
                      &lt;img src="&lt;?php echo get_template_directory_uri(); ?&gt;/images/skuar_small.png" alt="skuar" /&gt; 
                  &lt;/div&gt; 
              &lt;/div&gt;   
  
      &lt;?php 
          if ( has_post_thumbnail() ) { 
          the_post_thumbnail('post-thumbnails'); 
          } 
      ?&gt; 
  
  &lt;?php 
  
  if( get_field( 'image' ) ) { ?&gt;
  &lt;?php the_field( 'image' ); ?&gt;
    &lt;?php } 
    else { ?&gt;
  &lt;iframe width="600" height="166" scrolling="no" class="lightbox" class="frame" id="featherlight" frameborder="no" src="https://w.soundcloud.com/player/?url=&lt;?php the_field( 'music' ); ?&gt;&amp;color=1b1e25&amp;theme_color=1b1e25&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false"&gt;&lt;/iframe&gt;
  &lt;?php endif; ?&gt;&lt;?php } ?&gt;      
          &lt;/div&gt; 
      &lt;/a&gt; 
  &lt;/div&gt;
  </code></pre>