[Resolved] Featured Image besides post title and content

Home Forums Support Featured Image besides post title and content

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #445644
    Thomas Connertz

    Tom,
    I’m using GPP since a long time and I’m really happy with the theme. Now I’m planning a redesign of my blog and ran into a question I can’t solve.

    I’m thinking of a kind of book-like layout for posts with a really large image on the left half of the screen and text including the post title on the right. Basically, I want the featured image to show besides the post title and content.

    Here’s a little ascii art to illustrate what I mean:

    .----------. Post Title
    .          . Text
    .          . Text
    . featured . Text
    . image    . Text
    .          . Text
    .__________. Text
                 Text
                 Text

    Is there a way to acchive that with GPP?

    Many thanks!
    Thomas

    GeneratePress 2.0
    GP Premium 1.5.6
    #445679
    Leo
    Staff
    Customer Support

    Hi there,

    Setting it to below title and align left should work: https://docs.generatepress.com/article/adjusting-the-featured-images/

    Make sure the images are small enough so it can float to the left.

    #445804
    Thomas Connertz

    Leo,
    Thanks, we’re almost there.
    Setting the featured image *above* title and aligned left looks like this:

    .__________. Post Title
    . featured . Text
    . image    . Text
    .__________. Text
    Text
    Text

    How can I get the text in one column?
    Thomas

    #445918
    Leo
    Staff
    Customer Support

    But wouldn’t that leave a long empty space underneath the featured image is the excerpt is long?

    #446132
    Thomas Connertz

    I want this layout for posts. It’s for a food blog – usually my text (recipes) would take about as much space as the image. If text needs more vertical space than the image, that would be a few lines only.

    #446144
    Thomas Connertz

    I made a dummy post to show how I want it to look like:
    https://nischenseite.henrietteskitchen.com/testrezept/

    #446295
    Leo
    Staff
    Customer Support

    Ok so you are wanting that layout for single posts?

    Then your dummy posts is actually what you have to do.

    #446420
    Thomas Connertz

    Hmm. For the dummy I disabled post title and featured image. Instead I used columns, placed an inline image in the left column and some HTML in the right column. If I knew how to create this look with the featured image and post title I would not have asked.

    #446468
    Leo
    Staff
    Customer Support

    I’m confused.

    What’s the difference between what you’ve created and what you wanted?

    #446635
    Thomas Connertz

    Thanks for your patience.
    Here is what I did to create the dummy. I used Tom’s Lightweight Columns Plugin to create two colums and placed image and text in the columns.

    [shortcode to start columns]
    <img src="https://nischenseite.henrietteskitchen.com/wp-content/uploads/Frankfurter-Gruene-Sauce.jpg" alt="Frankfurter Grüne Sauce" width="771" height="900" class="size-full wp-image-18032" />
    I want this to be the featured image. Don't need the caption.
    
    [shortcode to close first column]
    [shortcode to open second column]
    <h1>I want the post title to go here</h1>
    This is the recipe text. Sometimes it takes more space than the image. Then I don't want the text to float around the image but remain aligned. Empty space below the image is totally acceptable.
    Some more paragraphs.
    [shortcode to end columns]

    Then I used GPP to disable post title and featured image.

    Obviously this is very inconvenient. If there was a way to display the featured image besides post title and content I would just have to write a post without any workarounds.

    #447275
    Tom
    Lead Developer
    Lead Developer

    If you set up your featured image to be below the title and aligned left, you can then add this CSS to make it so the text stays in one column:

    .single .featured-image + .entry-content {
        overflow: hidden;
    }
    #448024
    Thomas Connertz

    Thanks a lot, Tom.
    After some playing around with your solution here is what I finally did: Set the featured image above title and aligned left. Then I added this CSS:

    .single .entry-content {
        overflow: hidden;
    }

    Now the image stays in the left column, all text including the post title in the right.

    #448206
    Tom
    Lead Developer
    Lead Developer
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.