- This topic has 8 replies, 2 voices, and was last updated 5 years, 6 months ago by Tom.
-
AuthorPosts
-
September 9, 2018 at 9:57 am #672633Margot
I would like to make my blog’s inside-article divs show article featured images as background images instead of the images being listed as regular content. Is there an elegant solution to doing this?
ps. I have a child theme installed so I can make changes to the content.php page
September 9, 2018 at 8:10 pm #672874TomLead DeveloperLead DeveloperHi there,
First, I would disable featured images in Customize > Layout > Blog.
Then try this:
add_action( 'wp_head', function() { $image = get_the_post_thumbnail_url( get_the_ID() ); if ( ! $image ) { return; } ?> <style> .inside-article { background-image: url(<?php echo $image; ?>); } </style> <?php } );
Let me know if this helps or not π
September 10, 2018 at 7:12 am #673227MargotAh I think I might not have explained well enough. I wanted the featured image of each (different) individual blog post to show up as a background image inside their respective inside-article divs.
The snipped you mentioned made all the inside article divs the same featured post image.
I tried this in my child theme content.php file
<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?> <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> <?php generate_article_schema( 'CreativeWork' ); ?>> <div class="inside-article" style="background: url('<?php echo $backgroundImg[0]; ?>') no-repeat center center / cover;" >
But I’m having some layout issues. The background images are working great but my grid is off now, especially in relationship to featured post and regular post.
September 10, 2018 at 8:22 am #673382MargotJust figured out the grid problem (it was unrelated). So I think I’m all set except just wanted to get your thoughts on the above snippet? Is that an ok way to do it?
September 10, 2018 at 8:53 am #673405TomLead DeveloperLead DeveloperThat looks like a good way to do it π
September 10, 2018 at 10:23 am #673533MargotWhat would I need to do in order to make the entire inside-article div clickable so that when the user clicks on the div, they arrive on the post?
September 10, 2018 at 7:26 pm #673920TomLead DeveloperLead DeveloperYou’d need to use javascript. Something like this might work:
jQuery( document ).ready( function($) { $( '.inside-article' ).on( 'click', function() { var article = $( this ), url = article.find( '.entry-title a' ).attr( 'href' ); if ( url ) { window.location.href = url; } } ); } );
September 11, 2018 at 8:17 am #674462MargotThat worked perfectly! Thank you! And thank you especially for creating such a kicka** theme!
September 11, 2018 at 8:42 am #674483TomLead DeveloperLead DeveloperYou’re welcome! Really glad you’re enjoying GP! π
-
AuthorPosts
- You must be logged in to reply to this topic.