Archived topic
Adding the post image section to content.php
5 replies · Started by Paul on September 30, 2016
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 :)
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 :)
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).
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%;
}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 :)
Awesome! Thanks for posting the solution that works for you :)
