_标题()没有显示在_缩略图上

时间：2017-07-21 作者：Viktor

h1中的静态html/css标题显示在图像上，但当我使用the_post_thumbnail(); 具有the_title();. 标题移到图像上方

可能是什么问题？

<div class="col-sm-6 col-md-4 padding-fixation">
        <?php $portfolio_home = new WP_Query(\'cat=1\'); ?>
        <?php while($portfolio_home->have_posts()) : $portfolio_home->the_post(); ?>
        <div class="image-portfolio" data-section="office">
        <div class="img-block">
                <img class="img-responsive" src="<?php the_post_thumbnail(); ?>" alt="">
        </div>
       <div class="overlay-header">
            <h1><?php the_title(); ?></h1>
        </div>
        <div class="text-overlay">
            <p><?php the_content(); ?></p>
        </div>
        </div>
    <?php endwhile; ?> 
    </div>

1 个回复
最合适的回答,由SO网友:kero 整理而成

the_post_thumbnail() 和get_the_post_thumbnail() 将输出用于显示该图像的完整HTML。所以这个

<img class="img-responsive" src="<?php the_post_thumbnail(); ?>" alt="">
将被渲染为如下内容

<img class="img-responsive" src="<img src="..." alt=".." class="..">" alt="">
这是not valid HTML 你真的不知道浏览器会如何显示它。

现在您有2种选择：按预期使用此功能，或通过wp_get_attachment_thumb_url() 并以自定义方式显示。

<div class="img-block">
  Option 1
  <?php the_post_thumbnail(null, \'post-thumbnail\', array(\'class\' => \'img-responsive\')); ?>

  Option 2
  <?php
  $url = wp_get_attachment_thumb_url( get_post_thumbnail_id() );
  ?>
  <img class="img-responsive" src="<?php echo $url; ?>" alt="">
</div>
正如您所看到的，即使在使用the_post_thumbnail(). 这两个选项都是有效的方法，尽管选项1通常是WordPress开发人员的首选，因为您将获得默认的图像HTML标记，这是每个人都习惯和期望的。

结束
标签： post-thumbnails   get-the-title   小码农  

相关推荐