[Support request] Post image on left side with fixed wide

[Sebastian]

Hi,

I’d like to place the post image on the frontpage on the left side, with a fixed width (e.g. 700px), but full scale in height (image is 2400x1200px). How can I achieve this?

On the right side, the contents of the page should be displayed.

Best,
Sebastian

[Sebastian]

Just to clarify: I’ve meant the featured image…

[David]

Hi there,

first make sure you have the Blog Module enabled in Appearance > GeneratePress.
You can then access the featured image size and alignment in Customizer > Layout > Blog –> Featured Images:

https://docs.generatepress.com/article/adjusting-the-featured-images/

On the Archives tab,
Set the:
Location > Above Title.
Alignment > Left
Attachment size > Medium Large
If need be you can use the width and height fields if you want to resize slightly.. but its best for performance if you can leave them empty and use an appropriate Attachment size.

[Sebastian]

Thanks David for replying. I guess I didn’t make my problem fully comprehensible. I can’t solve the problem by changing the settings in the customizer (I guess); I need a custom CSS code.

I’ll post you the link in the “private information” tab. What I want to achieve is that the “brookly bridge” image is “full scale” on the left side, with no white border, from top to bottom and from the left side to a defined fixed width (ideally something percentual, to make it look good on different screen sizes), like in the following picture:

I’ve visualized my approach here: https://ibb.co/F77ThzL

Thanks for your support!

[David]

Aah sorry – i thought it was for a blog page.
Try this CSS:

@media(min-width: 769px) {
  .home .inside-article {
    display: flex;
  }

  .home .site-main .inside-article .featured-image {
    flex: 0 0 50%;
    margin-bottom: 0;
  }

  .home .inside-article .featured-image img {
    height: 100%;
    object-fit: cover;
  }
}

[Sebastian]

Hey David,

thanks again for your help. I’ve implemented the CSS code. We’re closer to what I want to achieve, but there’s still a white frame around the featured image. Can you check again?

Maybe to clarify again. In the ideal case, the image fills height-wise the whole browser window (on the left side). The contents of the page (right side) shall be placed in the center (height-wise).

[David]

The featured image has top and right margin that can be removed by changing this part of the CSS:

.home .site-main .inside-article .featured-image {
  flex: 0 0 50%;
  margin-bottom: 0;
}

to:

.home .site-main .inside-article .featured-image {
  flex: 0 0 50%;
  margin-bottom: 0;
  margin-top: 0;
  margin-right: 0;
}

But the image itself unless we distort the image won’t fill the container on larger screens… and it cannot be easily made to stretch to fill any whitespace to its left on larger screens.

[Author]

Posts