[Resolved] Adding the post image section to content.php

[Paul]

I want to add a span inside the post image section, just after the permalink. This would allow me to add an absolute positioned background image on top of the featured image (for a hover effect). Example:

<div class="post-image">
<a href=“#”><span class=“custom-span”></span><img src=“featured-image.jpg”/></a>
</div>

I could add this span to the appropriate section in template-tags.php but I might lose that change when the theme gets updated. So, instead, I was thinking I could remove:

<?php do_action( 'generate_after_entry_header' ); ?>

from content.php inside my child theme, and replace it with the following code from template-tags.php :

<div class="post-image">
<a href="<?php the_permalink();?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( apply_filters( 'generate_page_header_default_size', 'full' ), array('itemprop' => 'image') ); ?></a>
</div>

I could then add my custom span just after the permalink in the above code and not have to worry about it being removed in a future update. I have tested this and it did work as I intended it to, but I was wondering if there was a better way to achieve the same result?

Thanks 🙂

[Tom]

You could theoretically use the :before pseudo selector instead of adding a span:

.post-image img:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba( 255,255,255, 0.5 )
}

Let me know if that helps or not 🙂

[Paul]

Thanks Tom. Although that works to a point, the background image isn’t clickable – which could be confusing for users (since I want them to be able to click anywhere on the post image).

[Paul]

I think solved this now with:

.post-image a:hover::before{
	content: '';
	position: absolute;
	background-image: url(https://geekslife.com/wp-content/uploads/2016/09/m-dot.png);
	background-repeat: no-repeat;
	height: 100%;
	width: 100%;
}

[Paul]

Or maybe not. It doesn’t seem to be possible to center the background image with that method.

I realized that I can center the background image by making the post-image position relative 🙂

[Tom]

Awesome! Thanks for posting the solution that works for you 🙂

[Author]

Posts