[Resolved] Customization help – featured image + text

[Luis]

Hi,

I searched a lot but couldn’t find what I’m looking for.

In a page I want to first insert a featured image and with page title right next to it making sure is center aligned to the featured image.

Image – Welcome to this site (for example)

And other text of the page must appear below this “block”.

I couldn’t find a simple way to add only title and kept it aligned with featured imagem and at same time prevent the other text to go up and appear at right side of image.

I’ve tried using Media & Text block from WP 5 but using it, title still appears before this block which wouldn’t work because title can’t appear twice.

Do you know any other way to solve this?

Thanks

Luis

[David]

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;
    }
}

[Luis]

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.

[Tom]

Hi there,

Where can I see what it looks like right now?

Let me know 🙂

[Luis]

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

[David]

I missed out an instruction ( see above ):

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

[Luis]

Already updated. But wanted text near image.

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

[David]

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/

[Luis]

It works. 🙂

Thanks David for all the help!

[David]

You’re welcome

[Author]

Posts