有没有办法在循环中拉出第一个特色图像,而不是所有其他特色图像?

时间:2016-08-11 作者:OscarGuy

我有一个循环,拉动一个类别的前三个帖子。我想使用第一篇文章的特色图片作为该部分的背景,显示这些文章的标题和链接。

是否可以在不拉循环中拉入的帖子的所有其他图像的情况下拉入第一个图像?

以下是当前回路:

 <?php
 $cinemasight_header_query = new WP_Query( array( 

 \'category_name\' => \'academy-awards\',
 \'posts_per_page\' => 3 

 ) );

 if ($cinemasight_header_query->have_posts()) :

 while($cinemasight_header_query->have_posts()) :
 $cinemasight_header_query->the_post();?>

 <span class="Categories_Upper_Left">
 <a href="<?php the_permalink() ?>"><?php the_title(); ?></a><br />
 </span>

 <?php endwhile;

 endif;

 wp_reset_postdata();?>

EDIT (8/13/16, 8:56AM CST)

针对最近的更正进行了修订。

<div class="Header_Section_Left"><span class="Category_Header_Title">ACADEMY AWARDS<br /></span><div id="Header_Upper_Left">
<?php
$cinemasight_header_query = new WP_Query( array( 

    \'category_name\' => \'academy-awards\',
    \'posts_per_page\' => 3 

) );

if ($cinemasight_header_query->have_posts()) :

while($cinemasight_header_query->have_posts()) :
    $cinemasight_header_query->the_post();

if( 0 == $cinemasight_header_query->current_post ) :
  $thumbnail_id = get_post_thumbnail_id();
  $image_src = wp_get_attachment_image_src( $thumbnail_id );?>

<div class="Categories_Upper_Left" style="background-image: url( \'<?php echo $image_src[0]; ?>\') ;">
<a href="<?php the_permalink() ?>"><?php echo the_title(); ?></a>
</div>

  <?php continue;
endif;?>

<span class="Categories_Upper_Left">
 <a href="<?php the_permalink() ?>"><?php the_title(); ?></a><br />
</span>

<?php endwhile;

endif;

wp_reset_postdata();?>
</div>

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

我相信你指的是this answer

您可以检查当前循环的索引并使用get_the_post_thumbnail 获取图像标签或the_post_thumbnail 来回应它。

您可以使用$current_post property 获取当前索引并仅在第一次出现时显示。这是为实现这一点而修改的循环。

<?php

$cinemasight_header_query = new WP_Query( array( 
 \'category_name\' => \'academy-awards\',
 \'posts_per_page\' => 3 
) );

if ($cinemasight_header_query->have_posts()) :

  while($cinemasight_header_query->have_posts()) :

    $cinemasight_header_query->the_post(); 

    if( 0 == $cinemasight_header_query->current_post ) : // This will print on first index only
?>

<span class="Categories_Upper_Left">
  <span class="my-image-class"> <?php the_post_thumbnail(); ?></span>
  <a href="<?php the_permalink() ?>"><?php the_title(); ?></a><br />
</span>

<?php 
  continue; // skip the rest of this loop because we got what we needed
endif; // End if for first index ?> 

<span class="Categories_Upper_Left">
  <a href="<?php the_permalink() ?>"><?php the_title(); ?></a><br />
</span>

<?php 

  endwhile;

endif; // End loop

wp_reset_postdata();

?>
在我下面的评论中,我使用了get_the_post_thumbnail() 返回<img> 标记而不打印。

the_post_thumbnail() 将回显其输出。如果您有自定义图像大小,可以将其作为参数传递给此函数以检索它。本质上,此函数是get_the_post_thumbnail() 和通行证post-thumbnail 如果未指定图像大小,则将其作为默认图像大小。

选择哪个更适合你

EDIT

出于某种原因,我错过了您想要获得用作背景的图像。因此,您只需获取src 图像而不是整个<img> 标签

只需更改第一个索引的条件,如下所示

    if( 0 == $cinemasight_header_query->current_post ) : // This will print on first index only
      $thumbnail_id = get_post_thumbnail_id();
      $image_src = wp_get_attachment_image_src( $thumbnail_id ); ?>

<div class="my-image-class" style="background-image: url( \'<?php echo $image_src[0]; ?>\') ;">
  <span> <?php echo the_title(); ?> </span>
</div>

    <?php 
      continue; // skip the rest of this loop because we got what we needed
    endif; // End if for first index ?> 
wp_get_attachment_image_src() 将返回

图像url:width:height:如果找不到图像,则为\\u intermediate:false,您还可以将图像大小作为第二个参数传递给函数

SO网友:lucian

最干净的是有两个单独的回路。仅对一个项目(包括缩略图)运行第一个循环,然后对其他项目运行第二个循环\'offset\' => 1 (不包括缩略图)。

SO网友:Aamer Shahzad
<?php
$cinemasight_header_query = new WP_Query( array( 
    \'category_name\' => \'academy-awards\',
    \'posts_per_page\' => 3 
) );

if ($cinemasight_header_query->have_posts()) :
    $counter = 0;
    while($cinemasight_header_query->have_posts()) :
        $counter++;
        $cinemasight_header_query->the_post();

        if ( $counter == 1 ) {
            if ( has_post_thumbnail() ) {
                the_post_thumbnail( \'image_size\', array( \'class\' => \'img-responsive\' ) );
            }
        } ?>

        <span class="Categories_Upper_Left">
            <a href="<?php the_permalink() ?>"><?php the_title(); ?></a><br />
        </span>

    <?php endwhile;

endif;

wp_reset_postdata();?>

相关推荐

Images with overlay

我有一些图片在一个容器中,我想添加一个覆盖和图标。这不是现成的,但我找到了一些有用的代码:HTML:<div class=\"main\"> <span class=\"featured\"><img src=\"http://joshrodg.com/IMG_001-258x258.jpg\" title=\"\" alt=\"\"></span> </div> CSS:.featured {