Customization help - featured image + text

Hi there,

take a little bit of code but try this:

1. Add this PHP Snippet to your site:

function db_feat_img_shortcode() {
    $img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large', false );
	return '<img src="' . $img_src[0] . '"/>';
}
add_shortcode( 'db_feat_img', 'db_feat_img_shortcode' );

This creates a [db_feat_img] shortcode which we can use to add the Featured Image anywhere.

2. Create a Header Element:

https://docs.generatepress.com/article/header-element-overview/

2.1 Add this to the content:

[db_feat_img]
<h1>{{post_title}}</h1>

2.2 In the Element classes field add: flex-hero
2.3 Set Display Rules to where you want this to be displayed e.g Posts > All Posts

3. Add this CSS to your Site:

@media (min-width: 769px) {
    .flex-hero .inside-page-hero {
        display: grid;
        grid-template-columns: 50% 50%;
        align-items: center;
    }

    .flex-hero img {
        grid-column: 1;
    }

    .flex-hero h1 {
        grid-column: 2;
        margin-left: 40px;
    }
}

Thanks! It almost worked. I've added a display: inline to h1 to have it in same line as the image. But it's not aligned vertically to the image.

Last question: how can I align the text to be aligned vertically to the center of the image? (using your css)

I see that you added align-items: center but it isn't working.

Hi there,

Where can I see what it looks like right now?

Let me know :)

Hi Tom,

I've updated the link in this thread. I didn't had the site online and that's I took so long to reply.

I did everything David said and it worked. I added a new css line to place h1 in same line as image. But it still is not right aligned like I said before.

But my main problem is that WP is still adding featured image after the header element I've created.

Luis

I missed out an instruction ( see above ):

Edit the Header Element:
2.2 In the Element classes field add: flex-hero

Already updated. But wanted text near image.

And what about that 2 featured image that WP adds? Any idea how to solve it?

In the CSS change this line:

grid-template-columns: 50% 50%;

to:

grid-template-columns: auto 1fr;

To remove the Image from the content use the Layout Element to Disable Elements > Featured Image:

https://docs.generatepress.com/article/layout-element-overview/

It works. :)

Thanks David for all the help!

You're welcome