|
Meredith Whitely
|
December 4, 2015 at 10:38 am
Hello, what do I need to change to get the featured image for an event, as a fullwidth background image? With the additional .css like background-size:cover, so that the image is cropped at 350 high, but the image isn’t stretched.
I’ve found where to change (content-espresso_events-thumbnail.php), but nothing seems to work. Anyone managed to do this?
<div id="ee-event-img-dv-<?php echo $post->ID; ?>" class="ee-event-img-dv">
<a class="" href="<?php the_permalink(); ?>">
<img class="ee-event-img" src="<?php echo $featured_img[0]; ?>" width="<?php echo $featured_img[1]; ?>" height="<?php echo $featured_img[2]; ?>" alt="<?php echo $caption; ?>"/>
</a>
</div>
|
|
Josh
|
December 4, 2015 at 12:25 pm
The change should not be made in the template, since a background image is something that gets added with CSS.
The following code will set the featured image as a background with the twentysixteen theme, your WP theme may require a tweak.
function ee_set_featured_image_as_background() {
global $post;
if ( 'espresso_events' == get_post_type() && ! is_post_type_archive() && has_post_thumbnail() ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo '<style>.entry-content{
background-image: url(' . $image[0] . ');
background-repeat: no-repeat;
background-size: cover 350px;
-moz-background-size: cover 350px;
}</style>';
}
}
add_action( 'wp_head', 'ee_set_featured_image_as_background', 11 );
You can add the above to a functions plugin or into your WordPress theme’s functions.php file.
|
|
Meredith Whitely
|
December 9, 2015 at 2:06 am
Thanks Josh,
I just updated the image size from ‘medium’ to ‘full’.
And added 100% width in the css.
|
