How to reduce the width of a vertical image

Hi Pavel,

There are 2 ways to do this:

Our recommended way is to do it via the customizer settings.

On Appearance > Customize > Layout > Blog, click the "Posts" tab and set the width of the image to your preference.

Here's a sample video on how to do it: https://share.getcloudapp.com/p9ubGDe9

Another way to do this is by custom CSS:

You can add something like this to Appearance > Customize > Additional CSS.

.featured-image.page-header-image-single {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

Unfortunately, the first and second options didn't work. I suppose because, for pages and posts, a special content block size is set. More details here https://generatepress.com/forums/topic/need-help-with-additional-template-customization/. Are there any other options for solving paragraphs 3-4?

I think it is more correct to consider my two questions together, and not separately. This will give a more complete picture. With your permission, I will duplicate my questions here again:

3. How can the width of the horizontal image be increased, but so that the width of the block with the text remains unchanged? By analogy – https://bit.ly/2RqIHN3 (https://prnt.sc/119j20t).
4. How can the width of the vertical image be reduced, but so that the width of the block with the text remains unchanged? By analogy – https://bit.ly/3dRRT4r (https://prnt.sc/119j4f7).

Respectfully yours, Pavel

Hi there,

is this only for the featured images ?

Hello David,

For all images. So that all horizontal images are approximately 1024 pixels wide and all vertical images are approximately 460 pixels wide. On the source site, the width of vertical images is floating, most likely there is a limitation for the maximum height. Example 1 - https://bit.ly/3dRRT4r. Example 2 - https://bit.ly/3d9sJix. Example 3 - https://bit.ly/3mFtK57.

Respectfully yours, Pavel

To change the maximum width an image is displayed based on whether its orientation is Portrait or Landscape would require an CSS Class to be added to the <img>

For the post featured image we can add this PHP Snippet:

function add_orientation_class_to_featured($attr) {
  $orientation = '';
  $img = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), "full" );
  $width = $img[1];
  $height = $img[2];
  if ( $width >= $height ) {
    $orientation = ' landscape';
  } else {
    $orientation = ' portrait';
  }
  if ( !empty($orientation) ) {
      $attr['class'] .= $orientation;  
  }
  return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'add_orientation_class_to_featured' );

For images inside the content - i don't have a solution for that... you could manually add a CSS class to all Portrait images.... however the problem we have is the making a Landscape image much wider then the post content in the first place.

For the Featured image - after adding the above function. I would suggest we create a Page Hero so we can display the Title/Meta and Featured Image outside of the content - this will allow us to display a much wider image then content allows for. So question - are you using the GPP 2.0 Beta version ?