[Support request] How to Place H1 Page Title and Featured Image in the Header

[Dax]

Hello,

I like the streamlined look of the page hero and would like to achieve something for all of my pages.

I would like to be able to place the H1 titles of pages (and be left-aligned) along with a featured image (right aligned) within a single block of color like a page hero.

What would the best way to achieve this be?

Thank you

[Tom]

Hi there,

I would use Header Element for this: https://docs.generatepress.com/article/header-element-overview/

You can output the H1 of the page using {{post_title}}.

Then you can output the featured image like this: {{custom_field._thumbnail_id}}

Let me know if you need more info 🙂

[Dax]

Thanks, that seems to be working, only I can’t align the thumbnail, it is being pushed below the h1 so that they are being stacked on top of one another. I have no coding knowledge, unfortunately so I’m sure I’ve missed something that’s easy to fix.

Sorry to be a pain, but is there any way to stylize the thumbnail too? As in change, it’s radius etc?

[Tom]

Try this:

<div class="page-hero-stuff">
    <div class="page-hero-title">
        {{post_title}}
    </div>
    <div class="page-hero-image">
        {{custom_field._thumbnail_id}}
    </div>
</div>

Then add this CSS:

.page-hero-stuff {
    display: flex;
}

.page-hero-title {
    margin-right: auto;
}

.page-hero-image img {
    border-radius: 50px;
}

Just a guess without being able to see the site 🙂

[Dax]

Thanks, that worked perfectly! How would I switch it off for the mobile version?

[David]

Hi there,

you can use media queries:

https://docs.generatepress.com/article/responsive-display/

[Dax]

Hello David,

Thanks, I inserted the hide-on-mobile in the page hero element, which works. However, I would like the mobile version to have both a featured image and title stacked above each other.

Do I need to create a separate code like the above and a separate element with the hide-on-desktop classification?

[David]

Instead of hiding it on mobile – so you can remove that, we just limit Toms CSS to desktop like so:

@media (min-width: 1025px) {
    /* CSS in here for desktop only */
    .page-hero-stuff {
        display: flex;
    }
    
    .page-hero-title {
        margin-right: auto;
    }
}

/* This applies to all sizes */
.page-hero-image img {
    border-radius: 50px;
}

[Dax]

Thanks for that, I appreciate it.

Is there any way to make the featured image/thumbnails look better? Not sure how to put it in technical terms but their quality/size/resolution varies from page to page.

Some seem to be getting stretched, others squashed.

[Dax]

Another thing too: How would I go about adding meta information into the page hero area? I would like it to be below the H1 title. For instance the post author, tags and date last updated ( I currently use a plugin for the date – the last modified date plugin)

Thanks in advance!

[David]

Can you provide a link to the Site so we can see the first issue. You can edit your original topic and use the Site URL field for privacy.

The second one, you can add {{template_tags}} in the header for the meta etc:

https://docs.generatepress.com/article/header-element-template-tags/

[Dax]

Added it,

Thanks!

[Tom]

Are there specific pages where we can see squished ones vs good ones? I wasn’t able to find any.

[Dax]

Hi Tom,

Here are some examples:

I’m not sure of the cause, maybe it’s the dimensions of the original image? Either way, somehow I would like a consistent look across the site e.g. in terms of image size and H1 title position. How would you suggest I achieve this goal?

As well as size and position, is there anyway to stylize the images better? I was thinking they may look better if they were the same height as the page hero? Perhaps with a diagonal clipping effect?

[Tom]

Yes, you’d need to upload images that are:

1. Big enough to fit the area
2. The same dimensions so it’s consistent

Then you could remove the padding from the page hero element itself using the settings, and adjust your original CSS to this:

@media (min-width: 1025px) {
    /* CSS in here for desktop only */
    .page-hero-stuff {
        display: flex;
        align-items: center;
    }
    
    .page-hero-title {
        margin-right: auto;
        padding: 20px;
    }
}

@media (max-width: 1024px) {
    .page-hero-title {
        padding: 20px;
    }

    .page-hero-image {
        text-align: center;
        margin-top: 20px;
    }
}

If you want to automatically size your images, you could do this:

add_action( 'after_setup_theme', function() {
    add_image_size( 'hero-image', 500, 500, true );
} );

add_filter( 'generate_hero_thumbnail_id_size', function() {
    return 'hero-image';
} );

Adding PHP: https://docs.generatepress.com/article/adding-php/

Once you add that PHP, you’ll need to re-generate your thumbnails so existing images update to the correct size using a plugin like this: https://wordpress.org/plugins/regenerate-thumbnails/

Hope this helps 🙂

[Author]

Posts