模式框內容取決於自定義字段

Question

我試圖在使用featherlight.js的模式框中顯示2個不同的內容。這很簡單：

如果有'圖像'，它會顯示'圖像'，否則如果有'soundcloud url'，它會顯示一個'soundcloud url'iframe。 但它不起作用！

這是我website

這裏是代碼

<div id="post"> 
    <a href="#" data-featherlight="#featherlight">  
     <div class="img"> 
      <div class="art-overlay"> 
       <div class="small"> 
        <img src="<?php echo get_template_directory_uri(); ?>/images/skuar_small.png" alt="skuar" /> 
       </div> 
      </div> 

    <?php 
     if (has_post_thumbnail()) { 
     the_post_thumbnail('post-thumbnails'); 
     } 
    ?> 

<?php 

if(get_field('image')) { ?> 
<?php the_field('image'); ?> 
    <?php } 
    else { ?> 
<iframe width="600" height="166" scrolling="no" class="lightbox" class="frame" id="featherlight" frameborder="no" src="https://w.soundcloud.com/player/?url=<?php the_field('music'); ?>&color=1b1e25&theme_color=1b1e25&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false"></iframe> 
<?php endif; ?><?php } ?>  
     </div> 
    </a> 
</div> 

Answer 1

如果你現在看看，使用featherlight.js它的工作原理：skuar.com

只是因爲我刪除縮略圖上覆蓋！ 有什麼方法可以添加這個非常簡單的覆蓋？

<div class="art-overlay"> 
     <div class="small"> 
      <img src="<?php echo get_template_directory_uri(); ?>/images/skuar_small.png" alt="skuar" /> 
     </div> 

.art-overlay { 

    display: flex; 
    background: rgba(0,0,0,0.2); 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    position: absolute; 
    opacity: 0; 
    -webkit-transition: opacity 300ms; 
    transition: opacity 300ms; 

    .small { 
     margin: auto; 
     width: 59px; 
     height: 75px; 
     position: absolute; 
     top: 0; left: 0; bottom: 0; right: 0; 
    } 
} 

#post:hover .art-overlay { 
    opacity: 1; 
    cursor: pointer; 
}