Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

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

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

Home Forums Support Adding the post image section to content.php

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #230780
    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 🙂

    My GeneratePress-based portfolio: http://www.pauldixonwebdesign.co.uk

    #230789
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #230889
    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).

    My GeneratePress-based portfolio: http://www.pauldixonwebdesign.co.uk

    #230892
    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%;
    }

    My GeneratePress-based portfolio: http://www.pauldixonwebdesign.co.uk

    #230912
    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 🙂

    My GeneratePress-based portfolio: http://www.pauldixonwebdesign.co.uk

    #230935
    Tom
    Lead Developer
    Lead Developer

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.