WordPress.org

Ready to get started?Download WordPress

Forums

[Theme: Hatch] Change default size of featured image in a post? (34 posts)

  1. schloo
    Member
    Posted 2 years ago #

    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?

  2. fredav
    Member
    Posted 2 years ago #

    I have the same problem. It sucks being a newbie :/

  3. Chuck
    Member
    Posted 2 years ago #

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

  4. kevjo
    Member
    Posted 2 years ago #

    [ 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 640x966 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.

  5. baquast
    Member
    Posted 2 years ago #

    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?

  6. baquast
    Member
    Posted 2 years ago #

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

  7. baquast
    Member
    Posted 2 years ago #

    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: http://www.finwiki.nl

  8. stoatoffear
    Member
    Posted 1 year ago #

    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 http://devpress.com
    * @license http://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 http://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.

  9. shirazk
    Member
    Posted 1 year ago #

    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: http://www.shirazkhan.ca

    Any ideas?

  10. stoatoffear
    Member
    Posted 1 year ago #

    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?

  11. shirazk
    Member
    Posted 1 year ago #

    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.

  12. stoatoffear
    Member
    Posted 1 year ago #

    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.

  13. iondot
    Member
    Posted 1 year ago #

    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:

    http://momphoto.com/1000faces/

  14. Andrew
    Forum Moderator
    Posted 1 year ago #

    Iondot,

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

  15. stoatoffear
    Member
    Posted 1 year ago #

    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.

  16. iondot
    Member
    Posted 1 year ago #

    I gave it a try. No luck.

  17. stoatoffear
    Member
    Posted 1 year ago #

    You must have a typo somewhere - how about pasting your code here.

  18. iondot
    Member
    Posted 1 year ago #

    Okay...

    style.css:

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

    functions.php:

    <?php
    
    /**
    * @package Hatch Child
    * @subpackage Functions
    * @version 0.1
    * @author DevPress
    * @link http://devpress.com
    * @license http://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', 650, 825, true );
    
    }
    ?>
  19. iondot
    Member
    Posted 1 year ago #

    With regard to the above, I don't know what "Do theme setup on the 'after_setup_theme' hook" means. Perhaps I failed to do it?

  20. stoatoffear
    Member
    Posted 1 year ago #

    Your code is okay - I copied it into my test site and it creates a featured image 650 x 825.
    When I look at your site in Firebug, I can't see hatch-child in evidence at all - you say you have chosen that theme in the dashboard? Also that hatch-child is in a folder called "hatch-child" in the themes folder - the same place as the "hatch" folder?

  21. iondot
    Member
    Posted 1 year ago #

    stoatoffear,

    Thanks for helping with this! You were right, the hatch-child wasn't being applied. It turns out WordPress wasn't recognizing the css file for the stylesheet - I'm not sure why, but I suspect the file itself was saved in the wrong format.

    Any thoughts on how I could get 10 columns and 10 rows of smaller icons versus the present default?

  22. iondot
    Member
    Posted 1 year ago #

    Also, is there a way to not use the featured image, but just embed an image in the post without the blank box above?

    see this example of embedded image:
    http://momphoto.com/1000faces/?p=80

    vs.

    featured image
    http://momphoto.com/1000faces/?p=74

    and for some reason this post shows no image:
    http://momphoto.com/1000faces/?p=77

  23. stoatoffear
    Member
    Posted 1 year ago #

    Any thoughts on how I could get 10 columns and 10 rows of smaller icons versus the present default?
    ON Settings > Reading you can select how many blog posts to show - sounds like you should select "100".
    The other stuff I don't know - I solved the featured image size issue and wanted to share my solution.

  24. stoatoffear
    Member
    Posted 1 year ago #


  25. ceux
    Member
    Posted 1 year ago #

    Hi Stoatoffear,

    I know I'm just missing some basic info but I'm trying to create the child theme based on your above directions. I created it, but it's only giving me these options under the sheets (i.e. no functions.php):

    Stylesheet
    (style.css)
    RTL Stylesheet
    (rtl.css)

    How do I create the functions.php?

  26. stoatoffear
    Member
    Posted 1 year ago #

    Don't know what "under the sheets" means (in this context).
    You would be creating functions.php using your favourite text-editor (textWrangler, notepad etc) then probably you'd be aiming to insert that into your site folder (using your favourite FTP thingy - Filezilla?) it goes in wp-content>themes>hatch-child

  27. ceux
    Member
    Posted 1 year ago #

    Thanks Stoatoffear. I guess I'm just incapable of this. I can't get any text editors that either work with my version of Mac or they just don't seem to work when I upload them with Filezilla and put into wp-content>themes>hatch-child. Meaning, when I go to my child theme, there is no functions.php loaded. I really don't know what I'm doing and don't know what else to do. Is this the only way to solve this issue without editing the Hatch functions.php?? I've created child themes with no problem before when I was using an old theme but I think that is when I was not using WordPress. I guess I'm just in over my head now.

  28. stoatoffear
    Member
    Posted 1 year ago #

    What version of Mac is it? I am using Textwrangler 4.0.1 on Mac OS 10.6.8
    Using Filezilla - You're dragging the file functions.php from your desktop into the hatch-child folder on the remote server and it's not then showing up there? Are you sure you're connected to the server? Are you sure it's the same server as your site is on?

  29. ceux
    Member
    Posted 1 year ago #

    Yeah, textwrangler works with 10.6 or higher and I have 10.5.8. I tried using Mac notepad but it doesn't save each "note" so tried exporting it but then it's not doing that.

    The filezilla part I'm doing right but when I tried it first time I was mistakenly using the standard Mac TextEdit as the source of the functions.php file so that was the problem. Otherwise I have the file in the right folder but now just can't seem to save the functions.php with an applicable text editor for my computer. At least one that is free.

  30. stoatoffear
    Member
    Posted 1 year ago #

    There must be some text editor you can use - google free text editors and your OS version and I think this will start working for you.

Topic Closed

This topic has been closed to new replies.

About this Topic