合并瓷砖PHP(WordPress主题:平面 - 精简版)


Merging Tiles PHP (Wordpress Theme: Planar - lite)

对不起,如果这是一个新手问题,我将不胜感激任何帮助。我正在自定义一个wordpress主题,并且达到了我觉得必须合并PHP函数才能获得我正在寻找的结果的地步。

该主题是响应式的,并将帖子分解为磁贴。但是,磁贴被分解为图像,然后发布内容。我在想我需要合并磁贴,以便缩略图图像是帖子磁贴的背景。这可能吗?

图像平铺功能

<figure class="tile" style="background: <?php echo esc_attr( get_theme_mod( 'planar_additional_color', '#398ece' ) ); ?><?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'planar-quadratum' );  if( !empty($thumbnail) ) { ?> url(<?php echo $thumbnail[0]; ?>) no-repeat; background-size: cover; background-position:50%<?php } ?>;">
        <img src="<?php echo get_template_directory_uri(); ?>/img/blank.png" alt="" width="800" height="800" /> 
    </figure>

发布功能

<article id="post-<?php the_ID(); ?>" <?php post_class('tile post'); ?>>
        <img src="<?php echo get_template_directory_uri(); ?>/img/blank.png" alt="" width="800" height="800" />
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="tile-content<?php if ( !has_post_thumbnail())  : ?> no-thumbnail<?php endif; ?>" rel="bookmark">
    <div class="entry-meta">
        <?php
            $category = get_the_category(); 
            echo '<h3>' . $category[0]->cat_name . '</h3>';
            if ( has_post_format() ) :
                echo get_post_format_string( get_post_format() );
            endif; 
        ?>
    <span><time datetime="<?php the_time('Y-m-d'); ?>"><?php the_date('j F Y', '<br />', '<br />'); ?></time></span>
    </div><!-- .entry-meta -->
    <h1 class="entry-title"><?php the_title(); ?></h1>
</a><!-- .tile-content -->
</article>

任何帮助将不胜感激,谢谢。

编辑

感谢您的帮助,知道在哪里放置新的背景属性非常有帮助。以下是功能代码:

<article id="post-<?php the_ID(); ?>" <?php post_class('tile post'); ?> style="background: <?php echo esc_attr( get_theme_mod( 'planar_additional_color', '#398ece' ) ); ?><?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'planar-quadratum' );  if( !empty($thumbnail) ) { ?> url(<?php echo $thumbnail[0]; ?>) no-repeat; background-size: cover; background-position:50%<?php } ?>;">

再次感谢。

style="background-image:url('<?php echo $thumbnail ?>"添加到您想要背景图像的任何元素中。

假设文章标签:

//to get the URL 
<?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'planar-quadratum' ); ?>
//display
<article id="post-<?php the_ID(); ?>" <?php post_class('tile post'); ?> style="background-image:url('<?php echo $thumbnail)">
  //code...
</article