Создание эскиза фонового изображения

Question

На моем сайте Wordpress отображаются все сообщения, уложенные в статьи, охватывающие всю ширину на index.php, используя строки (Bootstrap 3).

index.php - HTML

<div> 
<?php if (have_posts()) : ?> 

     <?php /* Start the Loop */ ?> 
     <?php while (have_posts()) : the_post(); ?> 

      <?php 
       get_template_part('content'); 
      ?> 

     <?php endwhile; ?> 
     <div class="clearfix"></div> 
     <div class="col-md-12"> 
     </div> 
    <?php else : ?> 

     <?php get_template_part('no-results', 'index'); ?> 

    <?php endif; ?> 
</div> 

content.php отображает сообщение в каждой статье (которые укладываются друг на друга, всю ширину, вниз страницы)

<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>> 
<div class="row"> 
    <div class="col-md-12 horiz-cell"> 
    <h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2> 
    <?php the_category(', '); ?> 
    </div>  
</div> 
</article><!-- /#post --> 

I чтобы заголовок и категория отображались правильно в каждой строке. Я бы хотел, чтобы каждый пост опубликовал миниатюру (я добавил ее использование в functions.php) как фоновое изображение каждой строки. Заполнение всего пространства (размер фона: обложка)

В основном большой, '100% ширина' & '300px (приблизительно) высоты' ряды, каждый с соответствующим названием, категорией и их эскиз в качестве фонового изображения ,

Answer 1

Если не сделано, включите эскизы и define custom image sizes:

// Enable thumbnails 
add_theme_support('post-thumbnails'); 
add_image_size('my-fun-size',580, 480, true); 

Для отображения миниатюр: Во-первых, получить признакам URL изображения для пост:

Параметр «мой-весело размера» должно быть имя размера изображение вы определили в файле functions.php - это также может быть «полной» или «эскиз»

<?php 
if (has_post_thumbnail()) { 
    $thumbnail_data = wp_get_attachment_image_src(get_post_thumbnail_id(get_the_ID()), 'my-fun-size'); 
    $thumbnail_url = $thumbnail_data[0]; 
} 
?> 

Затем добавьте изображение в качестве фона:

<article id="post-<?php the_ID(); ?>" style="background-image:url('<?php echo $thumbnail_url ?>')" <?php post_class('container-fluid'); ?> > 
<div class="row"> 
    <div class="col-md-12 horiz-cell"> 
    <h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2> 
    <?php the_category(', '); ?> 
    </div>  
</div> 
</article><!-- /#post --> 

И, наконец, применить некоторые CSS для достижения желаемого фона-размер:

article { 
    background-size: cover; 
} 

Answer 2

Это звучит, как вы уже выяснили CSS часть, так вот PHP/HTML вы ищете:

<article id="post-<?php the_ID(); ?>" <?php post_class('container-fluid'); ?>> 

    <?php $imgurl = wp_get_attachment_src(get_post_thumbnail_id($post->ID)); ?> 

    <div class="row" style="background-image: url('<?php echo $imgurl[0]; ?>');"> 
    <div class="col-md-12 horiz-cell"> 
     <h2><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h2> 
     <?php the_category(', '); ?> 
    </div>  
    </div> 
</article><!-- /#post --> 

Ссылки:

• http://codex.wordpress.org/Function_Reference/get_post_thumbnail_id
• http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src