[Resolved] Featured Image by Title on PAGE

[Terry]

Hi Tom,

I’m trying to align a featured image to the right of the title on my pages, but not having any luck. I found this post:

https://generatepress.com/forums/topic/size-of-featured-image-in-posts/

And added the display-none CSS described therein to my custom CSS. I then inserted the image directly into my post using the ‘Instant Featured Image’ plugin. Doing that made the images appear more in line with what I wanted on posts, but appeared to have had no effect on pages. (It’s still not quite right on the post page either, because what I really want is to have it aligned to the right, and on the same line as, the title, like this:

On my pages, even though I deleted the header image and turned header image off in the page settings, I still have a big ol’ picture above my title, like this:

Thanks in advance for any insight you can provide.

Terry

[Tom]

Hi there,

Can you link me to the page where you’re wanting to do this?

Typically, you would want to hide the featured image, and add your image directly into the content using the Add Media button.

[Terry]

Hi Tom,

Adding it to the content puts the image BELOW the title, and I want the image IN LINE with the title. You can see an example here (from a non-GP site that I’m trying to convert):

Staging site #1

And here’s how a page looks on the GP version, with featured image still showing above the title, and the smaller featured image inline with the first line of text, rather than the title.

Staging site #2

The featured image is working on the blog post, but is also displaying below the title when I’d like it inline with the title. See:

Blog on Staging site #2

(Once you’ve seen these, can we delete the URLs from the post please?)

Thanks,

Terry

• This reply was modified 7 years, 10 months ago by Tom.

[Tom]

Maybe this topic will help: https://generatepress.com/forums/topic/wrap-text-round-header-image-or-feature-image/#post-170471

Let me know 🙂

[Terry]

Hi Tom,

That doesn’t seem to work. I added this to my CSS:

.page-header-image-single {
    float: right;
    margin: 30px 20px 0px 0px !important;
}

I have no image specified in the header (and have actually disabled the header image in the page settings), and the featured image is still showing above the title in all its glory. So then I tried adding a specified width with this code:

.page-header-image-single {
    float: right;
    width: 270px;
    height: auto;
    margin: 30px 20px 0px 0px !important;
}

But it didn’t make any difference. I still have an uber-big header image above the title.

Discover page

I just found this post that maybe offers a solution. So I tried what they suggested at the bottom of that page – adding this code to functions.php:

/**
 * ADD FEATURED IMAGES TO PAGES
 */

add_theme_support( 'post-thumbnails' );

No luck there either. Story of my life these days, sadly. 🙁

[Tom]

Try this instead:

.page-header-image, .page-header-image-single {
    float: right;
    max-width: 400px !important;
    margin-left: 40px;
    margin-bottom: 40px;
}

[Terry]

Perfect! Thank you sooooooo much, Tom!

Terry

[Tom]

You’re welcome 🙂

[Author]

Posts