Wrapping around photo on archives

Hi there,

You can set "float: none;" to the image so it doesn't allow texts to wrap around it.

Any chance you can link us to the page in question? So I can inspect it and help out with the CSS writeup. :D

sure

On second thought, I think it's best if you use the Block Element - Content template to change how the post items are laid out.

Check Leo's video on how to make your own post layout template here - https://www.youtube.com/watch?v=-ZTQP_KA2xE

While the demo doesn't exactly match what you're trying to do, it should give you an idea of how to make your own layout. :)

I definitely recommend learning this to maximize your use of GP Premium. :D

I'm not using blocks though.

I'm using the classic editor and just the list of posts as the front page.

There must be a way to just keep the photo on the left and the text on the right without the text looking all screwed if there's too many letters per word?

Could i maybe make the text smaller on the archive only pages?

Ah in that case we may have to hook in a wrapper div and use CSS.

Try adding this PHP snippet.

add_action( 'wp', function(){
	remove_action( 'generate_before_content', 'generate_post_image' );
	add_action( 'generate_before_content', 'generate_post_image', 5 );
	add_action( 'generate_before_content', function(){ echo '<div class="post-content-wrapper">'; }, 10 );
	add_action(  'generate_after_entry_content', function(){ echo '</div>'; }, 5 );
}, 99);

And then try adding this CSS:

.inside-article {
    display: flex;
    flex-wrap: wrap;
}

.inside-article .post-image {
    flex: 1 0 30%;
}

.inside-article .post-content-wrapper {
    flex: 1 0 55%;
}

.inside-article footer.entry-meta {
    flex: 1 0 100%;
}

Let us know how it goes. :D

Crikey! That looks a bit conplicated.

I was hoping I could just add some CSS and then make the text smaller and then hope that would fix it?

Why does it go under the featured image?

Hi there,

the image wraps under the text because the Image ( when aligned left ) is Floated.

Try adding this CSS:

@media(min-width: 769px) {
    .post-image-aligned-left .inside-article .entry-summary {
        overflow: hidden;
    }
}

You're the man David!

That solved it!

Glad to be of help!