[Resolved] Individual images on solid hero

[Claire]

Hi,

How can I get individual blog post images on top of my solid hero image?

Like the one in the image attached.

https://www.athomebeauty.co/wp-content/uploads/2019/10/hero-image.png

I’m afraid I don’t know any coding…

Thanks,
Claire

[David]

Hi there,

1. Install the Code Snippets plugin:
https://en-gb.wordpress.org/plugins/code-snippets/

2. Create a new snippet and add this – name it Featured Image Shortcode:

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' );

3. Then in your header element add this shortcode:

[db_feat_img]

Once thats done we can take a look and style it to suit.

[Claire]

Thank you David!

I’ve done what you’ve said and this is what I have now:

https://www.athomebeauty.co/diy-home-scents/

So how do I get the image to align at the right-hand side?

Also, when I set the title (inner container) to full width, it’s too wide but it seems a bit cramped (when the image will be on the right-hand side).

Is there a way to make the text (blog post titles) & image on the hero a bit wider, but not full-width?

Thanks,

[David]

Try this CSS first for the alignment and making the image fill the space on mobile:

@media (min-width: 769px) {
    .inside-page-hero {
        display: flex;
        align-items: center;
    }
    .page-hero img {
        margin-left: 20px;
    }
}
@media (max-width: 768px) {
    .page-hero img {
        width: 100%;
    }
}

Then we can review the spacing if required.

[Claire]

Sorry David,

Where do I put the alignment css code?

I tried to create a new snippet for it, but it just comes up full of errors. I then put it directly in the Elements Header area but that didn’t work either.

[Leo]

Try one of these methods here:

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Claire]

Thank you, that worked!

Now it’s just the spacing.

Would I be able to get the spacing as in this image?

https://www.athomebeauty.co/wp-content/uploads/2019/10/hero-spacing.png

Would the css allow me to play around with the spacing?

I really appreciate this help…

[David]

You can add this CSS:

body .inside-page-hero.grid-container {
    max-width: 1100px;
}

Adjust the max-width property size to suit.

[Claire]

Thank you, just one very last thing – is there a way to align the text side-centre to the image?

Thanks,

[David]

Could you link me to a post where i can see the featured image in the header element?
And do you want the text vertically aligned ?

[Claire]

This is what I mean

https://www.athomebeauty.co/wp-content/uploads/2019/10/hero-cente.png

I can accomplish this by putting a <br> in front of the title text, but that’s not great for html and google I suppose.

[David]

I edited the CSS here to make the vertical alignment

[Claire]

Sorted!

Exactly what I wanted.

Thank you.

[David]

You’re welcome

[Author]

Posts