Overlay Post Title on Featured Image

Hey David,

Nice job with the customizations thus far ??

This is gonna take some elbow grease, but here’s how I would approach it:

First, create a copy of content.php in your child theme. Include .excerpt-header and the featured image function inside the same div.

Once that’s done, you can set the dark overlay with an :after psuedo-element on the featured image so it’s below the text, but above the image.

As for the title positioning, it depends on where you want it to display within that div.

I’ve got the content.php copied over and I moved the featured image function (ct_ignite_featured_image) into the same div.

<div class='excerpt-header'>
    		<?php ct_ignite_featured_image(); ?>
		<h1 class='excerpt-title'>
			<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
		</h1>
	</div>

However, this won’t print the text onto the image. It still appears right below it. I thought that maybe this was because the function itself created a div, so I tried changing the echo statement slightly in a new function in my child functions.php, but that just made the image not be flush on both sides of the content window. I think I’m on the right track, but a little more direction would be greatly helpful. Thanks so much, Ben.

David,

Sure, the trick is to absolutely position either the image or the title so they can ‘stack’ on top of each other. The smarter way is to absolutely position the image so that the container is based on the length of the title. This way, a long title never escapes the bounds of the image. To prevent short titles displaying really short images, you set a min-height on the parent container. It now displays at the size you want and will expand for longer titles.

.parent-div {
  position: relative;
  min-height: 300px
}
.featured-image {
  position: absolute;
  z-index: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
}
.excerpt-header {
  position: relative;
  z-index: 9;
}

I haven’t tested this code, but it should get you moving in the right direction.

Ben,

That was hugely helpful. I’ve got it set up like I want for posts that do have featured images, but it looks strange when they don’t. What’s the best way to conditionally declare it? Can I put what’s essentially an “if featured image returns true” statement into the if-else statements within the child content.php file? Thanks again!

Oh yea good call.

There is a conditional class called .has-post-thumbnail you can use. You can keep all the rules targeted at .excerpt.has-post-thumbnail and it won’t affect posts without images.