• I am curious if it’s possible to easy change the default size of the featured image. Currently the 1200×525 ratio is not good because it cuts my photos in a bad way. Even if I take the time to resize it myself, it might look good on homepage but then it’s a different size (1500) on the post itself, for example: http://beback.bg/2014/09/the-northern-lights/

    Also, if the title is longer, you don’t see almost anything from the featured image.

    The question is if it’s possible to make the featured image 4:3 ratio (this way perfect for photos 1024×768 or 4000×3000). Thus it would take more of the page (almost full-frame) but that’s ok, I think.

    Sorry if that has been answered already. I believe I would have to change the CSS but hope it’s an easy fix. Thanks!

Viewing 1 replies (of 1 total)
  • I am curious if it’s possible to easy change the default size of the featured image.

    It’s actually not super easy to do it in the Pictorico in my opinion. The reason is because of how the theme is setup to use the “background-size” property in combination with some custom post thumbnail sizes and how those are setup to be cropped. In order to customize it, you should start by developing a good understanding of all of those things. Once you have a better understanding, you could probably change or add the post thumbnail sizes in a child theme with a custom functions.php file and then develop some custom CSS in the same child theme to adjust the existing design to work with those new sizes. It will take a bit of work on your part to set something like that up.

    The question is if it’s possible to make the featured image 4:3 ratio

    It’s possible, but then you’d have an image top center with black borders at the left and right that expand full width… or nothing to the left and right of the image. Does that makes sense? Is that what you really want to do?

    First, I would recommend checking out a primer about how the cover and contain values for background-size work. Here is a good guide:
    https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images#Special_values.3A_.22contain.22_and_.22cover.22

    Next, you will want to understand how the add_image_size() function works in WordPress, which you can read about here:
    http://codex.wordpress.org/Function_Reference/add_image_size

    Looking at the functions.php file for Pictorico:
    https://wpcom-themes.svn.automattic.com/pictorico/functions.php

    I see the following section:

    /*
    	 * 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' );
    	add_image_size( 'pictorico-home', '590', '590', true );
    	add_image_size( 'pictorico-slider', '1180', '525', true );
    	add_image_size( 'pictorico-single', '1500', '525', true );

    That last one is relevant to single posts with a full width featured image in the header behind the post title. To change it, you must create a child theme and copy the add_image_size() function for the post thumbnail size you want to change and adjust the numbers. Once you do that, it will not affect already-existing posts. You would need to either remove and re-upload the featured image from each already-existing post to generate a post thumbnail cropped at the new size or you would need to use something like the Regenerate Thumbnails plugin to regenerate all images. Be careful with that. 🙂

    For reference, here is how the “pictorico-single” custom post thumbnail size is called in the content-single.php file:

    wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'pictorico-single' );

    So, if you used the same name in your functions.php file in your child theme, then any newly uploaded featured images would get cropped to the new size and you could start experimenting with CSS from there.

    To do this first part outlined above, you need to create a child theme. Here is a guide if you want to try it out:
    http://codex.wordpress.org/Child_Themes

    If you’ve gotten this far, and you want help with the CSS from this point, post back here with some details about what size you picked for the “pictorico-single” image size or a link to an example post with an featured image in place and I can help you take a look at the CSS from there.

    To give you a little bit of an idea on CSS ahead of time, here’s something you can try out with your browser tools to see how switching from background-size: cover to background-size: contain affects the featured image on a single post like http://beback.bg/2014/09/the-northern-lights/ and how the cropped image shrinks and there are black edges on the right and left:

    .entry-thumbnail {
    	max-width: 1024px;
    	background-size: contain;
    	display: block;
    	position: relative;
    	margin: 0 auto;
    }
Viewing 1 replies (of 1 total)
  • The topic ‘Change default size of featured image’ is closed to new replies.