Php 模式框内容取决于自定义字段的类型

我正在尝试使用在一个模式框中显示两个不同的内容。很简单：

如果有“图像”，则显示“图像”，否则如果有“声音云url”，则显示“声音云url”iframe。 但它不起作用

这是我的

这是代码

<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>

---

如果您现在查看一下，使用它可以：

只是因为我删除了缩略图上的覆盖层！ 有没有办法添加这个非常简单的叠加

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

---

在您的网站上单击何处？在每个缩略图中心的S徽标上…它应该是所有缩略图，但我可能在代码上犯了一个错误，因此到目前为止只有徽标有效：/

.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;
}