[Resolved] Customization help – featured image + text

Home Forums Support Customization help – featured image + text

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1270243
    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

    #1270406
    David
    Staff
    Customer Support

    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;
        }
    }
    #1270772
    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.

    #1271265
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Where can I see what it looks like right now?

    Let me know 🙂

    #1290028
    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

    #1290053
    David
    Staff
    Customer Support

    I missed out an instruction ( see above ):

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

    #1290094
    Luis

    Already updated. But wanted text near image.

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

    #1290116
    David
    Staff
    Customer Support

    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/

    #1290322
    Luis

    It works. 🙂

    Thanks David for all the help!

    #1290329
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.