将特色图像作为背景图像

时间:2016-01-30 11:06:09

标签: php html-lists background-image

我的page.php文件中有一个代码,用于创建子页面列表。我希望每个li都有特色图片功能添加的背景图片。这是我的整个代码

<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'page' ); ?>
<?php endwhile; // end of the loop. ?>

<?php
if (is_page('eventsphotography')) {
$query = new WP_query('pagename=eventsphotography');
$eventsphotography_id = $query->queried_object->ID;

//The loop
if($query->have_posts() ) {
    while($query->have_posts() ) {
        $query->the_post();
        the_content();
    }
}

/* Get the children of the eventsphotography page */
$args = array (
    'post_parent' => $thePostID,
    'post_parent' => $eventsphotography_id,
    'order' => 'ASC'
);
$eventsphotography_query = new WP_query($args);
//The Loop
if($eventsphotography_query->have_posts() ) {
    echo '<ul class="events-list">';
    while($eventsphotography_query->have_posts() ){
        $eventsphotography_query->the_post();
        $background = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
        echo '<li style="background:url(' . $background[0] . '); background-repeat:no-repeat; background-size:cover;">';
        echo '<div class="events-centered">';
        echo '<a href="' . get_permalink() . '">';
        echo '<h4>' . get_the_title() . '</h4>';
        echo '</a>';
        echo '<div class="view-events-details">';
        echo '<a href="' . get_permalink() . '">';
        echo '<h5>View Images</h5>';
        echo '</a>';
        echo '</div>';
        echo '</div>'; /* end of events-centered */
        echo '</li>';
    }
    echo'</ul>';
}
}
?>

我只需要帮助这些行:

$background = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );

echo '<li style="background:url(' . $background[0] . '); background-repeat:no-repeat; background-size:cover;">';

以下是我的代码结果的屏幕截图: http://oi68.tinypic.com/10xzdhl.jpg

我用红色矩形标记了第一个<li>。正如我之前所说,我希望将特色图片的网址放在<li style="background:url(URL of the featured image)">

1 个答案:

答案 0 :(得分:0)

我找到了解决方案。首先,我创建了一个new WP_Query

$subs = new WP_Query( array( 'post_parent' => $post->ID, 'post_type' => 'page', 'meta_key' => '_thumbnail_id'));

然后在我的循环中我添加了这些行:

if($eventsphotography_query->have_posts() && $subs->have_posts()) { echo '<ul class="events-list">'; while($eventsphotography_query->have_posts() && $subs->have_posts()){ $eventsphotography_query->the_post(); $subs->the_post(); echo '<li>'; echo get_the_post_thumbnail($post->ID);

...代码的其余部分......