[Resolved] In-Post Image

[Candee]

I would like to get a post image to align and display like it does on this website: FrugalMom.net. Each post has an image aligned right and it makes for a very pleasing appearance on the blog page. Is this possible to do an if so, how. I tried working with “blog” settings but can’t get it to do the same thing.
Thank you.

[Tom]

Hi there,

This article might help: https://docs.generatepress.com/article/adjusting-the-featured-images/

The position and alignment options are what you’re looking for.

Let me know if you need more info 🙂

[Candee]

The article did not help. It seems that an image can only be placed above or below the HEADER — not the page title. If I paste an image in the post via “insert image,” it does not show in the post excerpt. I know there must be a work-around for this, but I have no idea how to do it. I am trying to get an image to appear to the right or left side of the post excerpt as in the website FrugalMom.net.

[Lyle]

Hi Candee,

I’m sure that Tom will have a more elegant solution, but here is what I was able to come up with that does the job.

– Customizer > Blog > Post Image > Post Image = Show, Post Image Position = Above Header, Post Image Alignment = Right, Post Image Width = 200px, Post Image Height = Auto (remember to click the Apply image sizes)

– add this CSS (via Tom’s excellent Simple CSS plugin):

.post-image-aligned-right .post-image {
    margin-top: 105px;
    margin-left: 1.2em;
    float: right;
}

This gets the featured images to align to the top of the excerpt as in the site you posted 🙂 You’ll have to adjust for your images, etc. but it works 🙂

Cheers!
Lyle

[Tom]

Lyle – the first part of your post should be all that’s necessary:

Customizer > Blog > Post Image > Post Image = Show,
Post Image Position = Above Header,
Post Image Alignment = Right,
Post Image Width = 200,
Post Image Height = Auto (remember to click the Apply image sizes)

However this will only work if you’re using featured images: https://docs.generatepress.com/article/adding-featured-images/

Doing this will give you the exact look you’re hoping for.

[Lyle]

Tom, I could have sworn when I first looked and the example site that the top of the image was aligned with the top of the excerpt, hence the CSS 🙂

[Tom]

It will only align with the top of the excerpt if the position is set to “Below Header” (BTW, that’s a typo, it should be Below Title and Above Title).

If it’s set to “Above Header”, it will align with the top of the title.

[Lyle]

… and so it does! 🙂 You learn something new every day 🙂 Thanks!

BTW, check the second line in the Adjusting the Featured Images doc 😉

[Candee]

OK, I think I got it to work, but now it really screws up the full post. What I end up with if I set the position to right or left is a misplaced hero image on the full post. I would like for the image not to appear on the post at all. In the example website, the image in the excerpt does not appear on the full post. It’s obviously possible to do this, but again, I have no idea how. Any ideas? BTW, thanks for all the help thus far.

[Tom]

Those settings shouldn’t affect the single post featured image at all, but you can remove it in Customize > Layout > Page Header in the Single Post Page Header option.

[Candee]

Thank you everyone for all you help. I finally got it to work all the way around. Sorry for being such a dummy. This theme is all new to me, and there is so much to learn about it.

[Tom]

Glad you got it working! Always happy to help 🙂

[Author]

Posts