Sorry if this is a novice question, I would really appreciate any help. I’m customizing a wordpress theme and reached a point where I feel I have to merge PHP functions to get the results I’m looking for.
The theme is responsive and breaks posts into tiles. However, the tiles are broken up as Image and then post content. I was thinking I need to merge the tiles so the thumbnail image is the background of the post tile. Is this possible?
Image tile function
<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>
Post function
<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>
Any help would be greatly appreciated, thank you.
EDIT
Thanks for the help, knowing where to put the new background attribute was super helpful. Here’s the functioning code:
<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 } ?>;">
Thanks again.
Add
style="background-image:url('<?php echo $thumbnail ?>"
to whichever element you want the background image on.Assuming the article tag: