[Resolved] Decrease the spacing between the headline and image.

[Mouse]

Hi there,

I want to decrease the space between the headlines and the featured image on all of my blog posts.

Also, can I structure it in a way that the first paragraphs show above the featured image?

[Elvin]

Hi there,

Did you mean the spacing here?

If so, try adding this CSS:

.post-image-below-header.post-image-aligned-center .inside-article .featured-image, .post-image-below-header.post-image-aligned-left .inside-article .featured-image, .post-image-below-header.post-image-aligned-left .inside-article .post-image, .post-image-below-header.post-image-aligned-right .inside-article .featured-image, .post-image-below-header.post-image-aligned-right .inside-article .post-image {
    margin-top: 0em !important;
}

Here’s how to add CSS: https://docs.generatepress.com/article/adding-css/

[Mouse]

Yes, That. Also, would it be possible if the first paragraph of the post is shown after the H1 and the image after that first paragraph on all posts?

[David]

Hi there,

you would have to move the featured image below the first paragraph for both Desktop and Mobile. Theres no simple way to change its behaviour for the different device sizes.

[Mouse]

Is there something we do with the CSS .. because correct if I’m wrong but are you saying to manually place the images after the first paragraph?

Basically, as you already know, WordPress has the built-in featured image option. Now I simply want to find a way to bring in the first paragraph of the post before the featured image.

[David]

You can use this PHP Snippet:

add_filter( 'the_content', 'insert_featured_image', 20 );
function insert_featured_image( $content ) {
    $feat_img = get_the_post_thumbnail($post->ID, 'post-single');
    if ( is_single() && ! is_admin() ) {
        return prefix_insert_after_paragraph( '<div class="incontent-featured-image">' . $feat_img . '</div>', 1, $content );
    }
    return $content;
}
// Parent Function that makes the magic happen
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
    $closing_p = '</p>';
    $paragraphs = explode( $closing_p, $content );
    foreach ($paragraphs as $index => $paragraph) {
        if ( trim( $paragraph ) ) {
            $paragraphs[$index] .= $closing_p;
        }
        if ( $paragraph_id == $index + 1 ) {
            $paragraphs[$index] .= $insertion;
        }
    }
    return implode( '', $paragraphs );
}

It will output the featured image after the 1st Paragraph.
Then you can either disable the Featured Image in Customizer > Layout > Blog -> Featured Images –> Posts to remove the current one.

Or you can use some CSS to hide each image for each device type.

[Mouse]

Can you please explain where and how to add this code. And do I have to add a CSS separate code as well?

[David]

That code is PHP – this article explains how to add it:

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

CSS will only be required if you choose to have a different position for Desktop and Mobile. If thats a requirement then you can share a link to the site when the above code is added.

[Mouse]

Hi thanks that fixed it.
Can I also customize the text coming above the featured image, eg, in italic/ and of different color?

[Leo]

Can you link us to a post where can see this?

I just checked the link you’ve provided in the original topic and the featured image is still on top below the post title.

[Mouse]

Hi there… adding the link in the private section.

I basically want the text coming above the featured post to be italic and of differet font… can this work?

[Elvin]

Hi there,

The text above the featured post seems to be added within the post’s content.

Try adding a italic-text class to the paragraph above the featured image and add this CSS:

.entry-content p.italic-text {
  font-style: italic;
font-family: [your font family here];
}

Replace [your font family here] with your preferred typography but make sure the one you add is properly imported to your site, else it won’t work.

[Mouse]

Hi can you please explain further, how do I add the italic-text class and this other code? also can I change their sizes as well?

[David]

You can add this CSS to your site it will target the first paragraph of your posts:

.single-post .entry-content p:first-of-type {
  font-size: 20px;
  font-style: italic;
  font-family: "font-name", serif;
}

For the font-family you will want to change the font-name to a font you are already using in your customizer for it to work.

How to add CSS:
https://docs.generatepress.com/article/adding-css/

[Mouse]

Thanks alot that fixed it.

[Author]

Posts