Blask featured image content

Hi @timyoungorg!

You can add more photos by inserting them directly into the Portfolio Project – just use the Add Media button, and be sure to set the image to a large enough size to fill the content area.

If you’d like the Featured Image to be shown as well, add that one into the project as well ??

Is it possible to show the featured image at the top of a post?

It is! You would first need to set up a child theme.

In that child theme, make a copy of the parent theme’s single-jetpack-portfolio.php.

In that copy of the file, you can insert this snippet to display your Featured Image:

<?php the_post_thumbnail() ?>

I’d recommend placing it just before this line:

<main id="main" class="site-main" role="main">

So it appears right at the top of the page.

Thank you for such a speedy reply. I’ve used your advice and am progressing
on adding images. Much appreciated.

You’re welcome! ??

This is great! Thank you.
Is there also a way to confine the featured picture to, for example, 200px max height?

@armaco – it’s possible yes, but for it to work well, we’ll want to approach it a little differently.

Go back into your child theme’s single-jetpack-portfolio.php file.

We’re going to remove the line we added:

<?php the_post_thumbnail() ?>

And replace it with the following:

		<?php if ( has_post_thumbnail() ) {
			// If there is a featured image, grab the details
			$thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'blask-post-thumbnail' );

			// Set the URL of that image as the background of the featured image block ?>
			<div class="single-featured" <?php echo 'style="background-image: url(' . esc_url( $thumb[0] ) . ');"'; ?>></div>
		<?php } ?>

This does a few things:
– check to see that there is, in fact, a Featured Image set for the current post
– if so, create a container, and use the image as a background – which makes it easier for us to reposition with CSS

Speaking of CSS, here’s your last step – add this to your child theme’s stylesheet, or in the CSS section of your Customizer:

.single-featured {
	max-width: 100%;
	height: 200px;
	background-size: cover;
	background-position: 50% 50%;
}

Now you’ll have the image displayed at 200px, with the image centered in the box. Depending on the aspect ratio of the original image, any extra will be cut off either vertically or horizontally ??

Very nice @lynneandchad
Thank you for the solution and the extra explanation. It works like a charm!

You’re welcome!