[Resolved] Wrap text round header image or feature image

[Tony]

Is it possible for text to be beside (wrapped) around a header image or feature image.
Googling indictes it’s a common request.

Also can the image be aligned left/right./centre?

[Tom]

Hi there,

Give this a shot: https://generatepress.com/forums/topic/customising-featured-image/#post-83209

To align it you can try this:

.page-header-image-single {
     text-align: center;
}

You can replace center with either left or right.

[Tony]

This works (below) but the text is touching the featured image. If you apply a style other than paragraph and insert some spaces then it creates a gap and looks OK. Spaces in paragraph style are ignored but if they are inside tags they work. &nbsp; gets stripped out by the visual editor as do <P></P>

WP is like the wild west!

.page-header-image-single {
float: left;
}
——————-
Why does the edit option disappear on posts? Would be nice if it stayed on for the contributor.

• This reply was modified 10 years, 6 months ago by Tony.
• This reply was modified 10 years, 6 months ago by Tony.
• This reply was modified 10 years, 6 months ago by Tony.

[Tony]

Aha – if I do this I get a gap on the left of the image so don’t need the spacing.

.page-header-image-single {
float: left;
margin: 0px 20px 0px 0px;
}

The image is very close to the author’s name but I can’t force a gap above the image with this.

[Tom]

Hi Tony,

Try this CSS:

.page-header-image-single {
     float:left;
     margin: 20px 20px 0px 0px;
}

[Tony]

I had already tried various combinations and none of them moves the image down even if set to 100px.

[Tom]

Can you link me to the page?

[Tony]

Here it is – what’s the best way to enter a url?
When I just pasted it in and submitted it there was nothing there.
Like this:
http://loveitphotography.uk/uncategorized/gallery-test/
Here I’ve wrapped it in ‘code’ tag
http://loveitphotography.uk/uncategorized/gallery-test/

• This reply was modified 10 years, 6 months ago by Tony.
• This reply was modified 10 years, 6 months ago by Tony.
• This reply was modified 10 years, 6 months ago by Tony.
• This reply was modified 10 years, 6 months ago by Tony.
• This reply was modified 10 years, 6 months ago by Tony.
• This reply was modified 10 years, 6 months ago by Tony.

[Tony]

The margin is set as 100px 20px 0px 0px

I have tried other combinations but never get space at top

[Tom]

Hi Tony,

Sorry for not getting back to you sooner – we had a baby today so things have been quite hectic.

I’m on An iPad so I can’t currently check the code very easily, but I’ll leave this unread so I can take a look as soon as I get back to my desktop.

[Tom]

Hi Tony,

Try this instead:

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

[Tony]

That works – thanks ‘Dad’

[Tom]

Can’t wait to hear that for the first time! 🙂

[Author]

Posts