Support » Fixing WordPress » Horizontal images appear as wide as vertical images

  • Hello,

    I recognized that in a standard WordPress setup with TwentySixteen theme, featured images in horizontal and vertical images appear differently in size, even though they should have the same size, but horizotally or vertically aligned, don’t show up in same size in content area (i guess it’s acalled viewport, isn’t it?).

    The source images are 3:2 images with the dimensions of 2048x1356px for horizontal and 1356x2048px for vertical. WordPress is going to use them a make smaller ones (thumbnails).

    It seems to be wrong, that a vertical image appears as wide as an horizontal image, but the vertical is much higher than the horizontal and shows much bigger for that reason.
    I understand that with images with these dimensions are handled like this automatically, but how do I set WordPress to show the vertical image not in full width in content area, even though they are so huge.
    It’s okay if the horizontal picture would consume the full width of a post/page, but the vertical image should not.

    I tried to figure out what the right media settings are for the thumbnails, but I’d need more help to define this for a featured image as this setting is not present there. These are the settings for media:

    Thumbnail size Width 150 Height 150
    Medium size Max Width 300 Max Height 300
    Large size Max Width 1024 Max Height 1024

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    If the vertical image is spanning more than its width, i.e. being stretched then this sounds like a CSS issue.

    Please see for yourself. It’s not spanning more than its width, but the shown dimensions are not the same with images than have same dimensions 2048x1356px/1356x2048px, but differ in width and height:

    Post with horizontal image:
    http://pekic.de/ukuupeople/2016/10/10/beitrag-bild-horizontal/

    Post with vertical image:
    http://pekic.de/ukuupeople/2016/10/10/beitrag-bild-vertikal/

    The vertical image should not have the same width as the horizontal one, right?
    Theme is Twenty Sixteen.

    Second, I want the featured images to appear smaller.

    • This reply was modified 4 years, 3 months ago by mpek.

    Hello!

    In addition to the image sizes you setup in your Media settings, WordPress themes can define a thumbnail size, and additional image sizes to fit the template design. With 2016, you can see the thumbnail size (specifically relating to the post thumbnail or “featured image”) is set to 1200px wide and an open height:

    	/*
    	 * Enable support for Post Thumbnails on posts and pages.
    	 *
    	 * @link http://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
    	 */
    	add_theme_support( 'post-thumbnails' );
    	set_post_thumbnail_size( 1200, 9999 );

    When displayed in the template, this means your featured image original file is scaled to 1200px wide and inserted, thus a portrait oriented image will be the same 1200px width as a landscape oriented image, as long as the original is larger than 1200 pixels. I hope that makes sense!

    Now if you’re looking to enforce a standard height on these images, you can do that with CSS to avoid making any changes to your theme files. The best way to do this is with JetPack’s Custom CSS module, or something like the DevKit plugin that adds a CSS editor to your Customizer.

    One way to do it is with a snippet like this one:

    .post-thumbnail img {
        max-height: 535px;
        width: auto;
    }

    Perhaps a better solution for you is to hide the featured image on your single post view, and insert the image manually using the size and settings you want. This is especially effective if you choose to use a lightbox plugin to allow folks to “zoom” your photos.

    
    .single .post-thumbnail{display: none;}
    • This reply was modified 4 years, 3 months ago by Vail Joy.

    Thank you very much also for your suggestions, Vail Joy! I’ll look into this and find out what suits best.

    I tried it with Code Snippets plugin on that site the examples are on, but it makes no difference. I’d like to avoid Jetpack as it brings much other code with it…
    With Code Snippets I added a new entry, pasted your code to decrease the height, and tried it with settings frontend-only and sitewide, but the height doesn’t change with http://pekic.de/ukuupeople/2016/10/10/beitrag-bild-vertikal/

    I went with Simple CSS and that made your code snippet work on that site!

    I added this to another theme and instead of post-thumbnail it wants post-thumb, without the nail to let it work… >.> <.<
    If I want to let the text of that post start on the right side of a vertical image (text outline), where can I find more to achieve this?

    • This reply was modified 4 years, 3 months ago by mpek.
    • This reply was modified 4 years, 3 months ago by mpek.
    • This reply was modified 4 years, 3 months ago by mpek.
    • This reply was modified 4 years, 3 months ago by mpek.
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Horizontal images appear as wide as vertical images’ is closed to new replies.