• The default aspect ratio for featured images in posts is 640:360. All of the photos I want to post are taller (relatively), and so the bottom of the photos is getting cut off. What should I change to adjust the aspect ratio of featured images?

Viewing 15 replies - 1 through 15 (of 33 total)
  • I have the same problem. It sucks being a newbie :/

    Would also like to know how to fix this issue. Thanks for an update!

    [ Moderator Note: Please post code or markup snippets between backticks or use the code button. Or better still – use the pastebin ]

    These instructions detail how to get portrait oriented photos in a post. I did the following to create a 640×966 featured image (note: I am a developer):

    1. created a post template for when I want to feature vertical pictures and replaced the get_image code with:

    <?php if ( current_theme_supports( 'get-the-portrait' ) ) get_the_portrait( array( 'meta_key' => 'Thumbnail', 'size' => 'single-thumbnail', 'link_to_post' => false, 'image_class' => 'featured', 'attachment' => false, 'width' => 640, 'height' => 966, 'default_image' => get_template_directory_uri() . '/images/single_image_placeholder.png' ) ); ?>

    2. I modified the functions.php page to include:

    add_theme_support( 'get-the-portrait' );
    add_action( 'init', 'hatch_portrait_sizes' );
    function hatch_portrait_sizes() {
    
      add_image_size( 'archive-thumbnail', 220, 150, true );
      add_image_size( 'single-thumbnail', 640, 966, true );
    }

    3. I created an extension file in /library/extensions called get_the_portrait.php and replaced every instance of the get_the_image with get_the_portrait.

    4. I added the below to /library/hybrid.php:

    /* Load the Get the Portrait extension if supported. */
        require_if_theme_supports( 'get-the-portrait', trailingslashit( HYBRID_EXTENSIONS ) . 'get-the-portrait.php' );

    5. I re-attached the featured image to the post.

    Complicated, but voila! It worked.

    Thank you for this improvement. I have a few clarifications for your instructions

    1. This is done by copying post.php (in the wp-content/themes/hatch folder) and renaming the copied file to e.g. post-portrait.php and they editing line three to: * Template name posts: Portait

    2. functions.php is also in the hatch folder. You should add these lines at specific points:

    line 45: add_theme_support( 'get-the-portrait' );
    line 58: add_action( 'init', 'hatch_portrait_sizes' );
    line 116: the rest (or somewhere around there, don't put it inside another function)

    3. This extension file is actually a copy of get_the_image.php which can be found in this folder.

    Btw, how can we change the images to portraits on the front page?

    actually it would be best to add the last part that should be added to functions.php to line 238.

    and a last correction to get the thumbs on the frontpage to be of the same size:

    the rest to be added to functions.php should be:

    function hatch_portrait_sizes() {
    
      add_image_size( 'archive-thumbnail', 220, 332, true );
      add_image_size( 'single-thumbnail', 640, 966, true );
    }

    This way, the archive thumbnail has the same ratio. This should also be changed in the home.php file, i.e.:

    ‘height’ => 332

    a working example is on: https://www.finwiki.nl

    Hi,
    I wanted to share what I think is THE fix for the original problem of Hatch cropping off the top and bottom of featured images.
    First of all, I hear it’s bad to alter the theme code, so create a child theme. This is very easy. My child theme consists of a folder (in the themes folder) called hatch-child. Into hatch child I put a style.css file with:

    /*
    Theme Name: Hatch Child
    Description: Child theme for Hatch theme
    Author: stoatoffear
    Template: hatch
    */
    
    @import url("../hatch/style.css");

    Please bear in mind that the theme name “hatch” is case-sensitive.
    Next create a functions.php file in the hatch-child folder with the following:

    <?php
    
    /**
    * @package Hatch Child
    * @subpackage Functions
    * @version 0.1
    * @author DevPress
    * @link https://devpress.com
    * @license https://www.gnu.org/licenses/gpl-2.0.html
    */
    
    /* Do theme setup on the 'after_setup_theme' hook. */
    add_action( 'after_setup_theme', 'hatch_child_theme_setup', 11 );
    
    function hatch_child_theme_setup() {
    
        /* Get action/filter hook prefix. */
        $prefix = hybrid_get_prefix();
    
        /* Custom image sizes */
        remove_action( 'init', 'hatch_image_sizes' );
        add_action( 'init', 'mytheme_image_sizes' );
    
    }
    
    function mytheme_image_sizes() {
    
    	add_image_size( 'single-thumbnail', 640, 360 );
    
    }
    ?>

    Then activate the theme in your site and voila! You will have to re-insert any images that have been cropped, plus the header image will also need to be re-done.

    Check my site https://www.richardcalvert.com where you can see that the featured images are now not cropped.

    I am a newbie too, so be sure to point out any improvements! I haven’t noticed any problems yet though.

    Hi stoatoffear, I’ve done everything you’ve said, activated the child-theme but the size of the featured image has not changed (after reinserting the images).

    My site: https://www.shirazkhan.ca

    Any ideas?

    I see your site is still cropping the images the way Hatch specifies…
    A: DId you delete/remove your featured image, then get a fresh one uncropped one?
    B: Did you change the original Hatch theme in any way? – if so please intall a fresh copy.
    C: Make sure you inserted the code exactly as show above – missing quotes, curly braces or brackets are fatal, but this code works on my site – it should work on yours.
    D: How about pasting your code into this forum for us to scrutinize?

    It works! Thank you very much for your simple and elegant solution.

    It seems some of my old edited files in the hatch theme were still there. I restored the original files and the images no longer crop. Thanks again!

    *Edit
    Also, it seems re-setting the feature image alone won’t do it. You have to re-upload the image entirely.

    Glad I could help somebody – Hatch takes whatever image you upload, crops it and stores a cropped version to use as the featured image, so you would have to scrap your featured images and choose an uncropped one to be your new featured image.
    Also the good thing about creating a child theme is that now when a new version of Hatch is released you can upgrade without having to edit anything.

    I tried working with the child theme, but I don’t see any change to my images – they remain cropped and I desperately want them to appear in portrait orientation.

    As per your instructions above I have:
    A: Deleted and removed my featured image to get a fresh one uncropped one.

    B: Installed a fresh copy in case I somehow made some change.

    C: Made sure I inserted the code exactly as show above.

    D: If I paste the code into this forum it will look exactly as it does above.

    I have so many portraits I would like to upload, but I can’t figure out how to fix this! If its any help, the original images are all exactly the same size 650 x 825 and thus the thumbnails will always be in the same proportions.

    You can see the site here:

    https://momphoto.com/1000faces/

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Iondot,

    If you create your own thread, you’re more likely to receive help.

    Hi iondot – you might want to change your child theme to:
    add_image_size( ‘single-thumbnail’, 650, 825, true );
    Then try trashing a featured image, re-entering your correctly proportioned image as a featured image and see if that works.

    I gave it a try. No luck.

Viewing 15 replies - 1 through 15 (of 33 total)
  • The topic ‘[Theme: Hatch] Change default size of featured image in a post?’ is closed to new replies.