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

Home Forums Support [Resolved] Decrease the spacing between the headline and image.

Home Forums Support Decrease the spacing between the headline and image.

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #1671585
    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?

    #1671618
    Elvin
    Staff
    Customer Support

    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/

    A wise man once said:
    "Have you cleared your cache?"

    #1671662
    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?

    #1671881
    David
    Staff
    Customer Support

    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.

    #1672005
    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.

    #1672071
    David
    Staff
    Customer Support

    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.

    #1672094
    Mouse

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

    #1672316
    David
    Staff
    Customer Support

    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.

    #1672576
    Mouse

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

    #1672924
    Leo
    Staff
    Customer Support

    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.

    #1673255
    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?

    #1673285
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1674604
    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?

    #1675042
    David
    Staff
    Customer Support

    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/

    #1675155
    Mouse

    Thanks alot that fixed it.

Viewing 15 posts - 1 through 15 (of 26 total)
  • You must be logged in to reply to this topic.