WordPress.org

Ready to get started?Download WordPress

Forums

Hatch
Changing the dimensions of thumbnails and featured images (9 posts)

  1. studiosquareone
    Member
    Posted 2 years ago #

    Hi all... I'm relatively new to web design, and am loving WordPress albeit - finding it frustrating! :P

    I'm currently using the Hatch theme and was wondering is there a way to change the dimensions of both the thumbnails as well as the featured image.

    I would like to make both sets of images square.

    Maybe another thing that one of you lovely people could help a frustrated newbie of WP is that the images seem to get placed vertically rather than horizontally... any idea on how to sort this bad boy out?

    Many thanks for your time...

    L

    http://wordpress.org/extend/themes/hatch/

  2. Shane
    Member
    Posted 2 years ago #

    I'd like to know too - as well as if there can be more than three featured images?

  3. danielkwan
    Member
    Posted 2 years ago #

    Try adding this to Appearance > Theme Settings > Custom CSS:

    .home .hentry, .archive .hentry {height: auto;}

  4. studiosquareone
    Member
    Posted 2 years ago #

    Thanks for the reply... I've added that line into the Custom CSS... but there seems to be no change... :/

  5. kevjo
    Member
    Posted 2 years ago #

    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.

  6. dvc1231978
    Member
    Posted 1 year ago #

    With all due respect, this is pretty ridiculous. This theme seemed great and I loved it until I noticed this issue with vertical images. So basically if you're not a php expert you've got to pay $30 to figure this out. Also, correct me if I am misunderstanding, but do you have to purchase a membership in order to post on the forums over at devpress? So disappointing.

  7. charlotted29
    Member
    Posted 1 year ago #

    Kevjo, which one of those html links is to make the photo's horizontally?
    Having the same issue

  8. stoatoffear
    Member
    Posted 1 year ago #

    I'm pretty sure you're not supposed to modify the theme files.
    I think if you create a child theme like this:
    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() {
    
    /* replace 220 with the dimensions you want for the thumbnails width and height... */
    	add_image_size( 'archive-thumbnail', 220, 220, true );
    
    /* replace 640 with the dimensions you want for the featured image width and height... */
    	add_image_size( 'single-thumbnail', 640, 640, true );
    
    /* also delete "true" if you don't want your images cropped at this size - I didn't want cropping on the featured image, but I did for the thumbnails.
    */
    
    }
    ?>

    Then activate the child 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 for the child-theme you are now using.

    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. Filippa Levemark
    Member
    Posted 1 year ago #

    Hi stoatoffear,

    Also want to change the cropped images-issue in hatch-theme, tho trying to do this but with "One Click Child theme- plugin" and im not sure how to do this (at all) here. Do you know?

    Anyone?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic