[Resolved] Hover text on featured image

[Patrick Maylone]

Hi Tom,

Currently the default in gp is to display the blog title when you mouseover the featured image on an entry page and the front page. Is is possible to change this to display the alt tag or the title tag instead? I assume its going to need to be an overide on the functions.php in my child theme. Not really being a coder but more of a cut, paste and nailer, I’m having a little difficulty figuring this one out. I think I’m not understanding how the attr section works.

Thanks,
Patrick

[Tom]

Hi there,

Tough question! Are you using the Blog add-on?

[Patrick Maylone]

Yes I am.
I guess I should also mention that my end goal is to have the featured image above the entry and sidebar, but below the menu.

Basically I’m trying to recreate my current site, here by using ONLY Generatepress and no longer using comic easel with it. At one point I had the image where I wanted but I couldn’t manage to get the hover tooltip to display. So I went back to using Comic easel until I had more time to mess with it.

What I’ve managed so far is to insert`<div class=”post-image”>
<?php the_post_thumbnail( $size = ‘full’, $attr = ” ) ?></div>` into the after header section in GP hooks. and do a little formatting. Test site is here

[Tom]

Interesting, so you’re only show one blog post per page, and need the post image to display below the navigation..

You could try this in GP Hooks:

<?php if ( ! is_singular() ) : ?>
    <a href="<?php the_permalink();?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
<?php endif; ?>

[Patrick Maylone]

Thank you!

That makes more sense.
Using the below I got it to display the image ‘alt’ tag

<div class="post-image">
<?php if ( ! is_singular() ) : ?>
    <a href="<?php the_permalink();?>" title="<?php $thumb_id = get_post_thumbnail_id(get_the_ID());
     $alt = get_post_meta($thumb_id, '_wp_attachment_image_alt', true);
     if(count($alt)) echo $alt;
?>"><?php the_post_thumbnail(); ?></a>
<?php endif; ?></div>'

cut, paste, nailed from here lest anyone think I actually know what I’m doing.

Unfortunately I think I may be tossing myself down a rather large rabbit hole. Now that I got what I want, I see that

disabling featured image in the blog plug-in disables it below the header as well
clicking the image pulls up/links to the blog entry and not the lightbox
once it is clicked, it pulls up the blog entry, and on that page (single?) both featured images disappear

I kind of see where the link to the blog entry is coming from, so I think I can get around that fairly easy, but from what I can see, the featured image code almost all comes in from the blog plug-in.

I think the simpler solution may be to keep comic-easel and figure out how to get the post meta to show in the custom entries. This may also be a better route for other people as well.

[Tom]

This CSS should remove the second one:

.inside-article .post-image {
    display: none;
}

Adding CSS: https://generatepress.com/knowledgebase/adding-css/

[Patrick Maylone]

DOH! I’m guessing that the css has been listed previously in the forum. I went to add it to my child theme and it was there at the end commented out, along with my other formatting that I recreated. Again thank you. The rabbit hole may not be so bad after all…

So to bring things up to date to get the Featured image to show up under the menu, and before the content I inserted the code into the After Header field in the GP Hooks plug-in and checked the Execute PHP box.

My goal was to also have the featured image show the images Alt Attribute when you hover over it, and to open up in lightbox when it was clicked on. (I’ve found that this has made reading the comic on mobile much easier). I also needed (not that I realized with the original request) for the featured image to stay when you click into the entry itself. From what Tom gave me, what I found in WP documentation, and a lot of trial and error I now have this:

<div class="post-image">
    <a rel="lightbox" href="<?php the_post_thumbnail_url(); ?>" title="<?php $thumb_id = get_post_thumbnail_id(get_the_ID()); $alt = get_post_meta($thumb_id, '_wp_attachment_image_alt', true);  if(count($alt)) echo $alt; ?>">
<?php the_post_thumbnail(); ?></a>
</div>

It seems to be working as I want. In my case, because I wanted to have the image appear in the actual entries as well I removed the begging and closing part of the If Statement
To keep the featured image from displaying in the actual blog entry I used Tom’s CSS from above.

Tom, I thank you again for the helping hand. I suspect I will be back when I get to the under comic navigation but for now, I think we got it.

[Tom]

Glad I was able to help – thanks for sharing your code 🙂

[Author]

Posts