Display featured image to match new width

  • Hi all,

    I am new to WordPress and have been following instructions on child theming and is currently stuck with overriding functions.

    In my /penscratch-child/functions.php, I have copied the penscratch_setup function and removed the if/endif condition as indicated here https://zooninidev.com/child-theming/#/52.

    I have also modified values for the featured image size so that it matches the new max-width I have set via style.css.

    add_image_size( 'penscratch-featured', '1200', '600', true );

    I understand that I could change the width via CSS but I would like to avoid cropping the image before modifying the display width via CSS.

    If this particular function cannot be overridden, how do I go about achieving displaying an uncropped\unresized featured image?

Viewing 5 replies - 1 through 5 (of 5 total)

  • Nice find! That’s a good guide for child theming (@zoonini is the best)

    Image sizes have an extra layer of complexity. First, your child theme needs to tell WordPress to “forget” the parent theme’s size setting. Then it can add it’s own in place of that. And we need to make sure that this all happens after the parent theme has done it’s declarations.

    This snippet should do the trick, in your child theme’s functions.php file:

    function my_image_sizes() {
	remove_image_size( 'penscratch-featured' );
	add_image_size( 'penscratch-featured', '1200', '600', true );
}

add_action( 'after_setup_theme', 'my_image_sizes', 12 );

    – remove_image_size does what it sounds like, basically un-declares the featured image size option.
    – add_image_size is the one you’ve already seen – now that the original setting for penscratch-featured has been cleared out, we can replace it with our own.
    – add_action() tells the theme when (or rather, where in the code) to perform this function. The 12 puts it in order with other actions that are happening (like the parent theme declaring it’s own image sizes). The 12 ensures our function happens after others that occur at the same time ??

    Thread Starter theateamcebu

    (@theateamcebu)

    Awesomesauce!

    I already found a solution but was holding out posting here as there might be a better alternative and you just gave it with an excellent explanation to boot!

    Here is the solution I came up with for referrence, in /penscratch-child/content.php change the post thumbnail parameter to full

    the_post_thumbnail( 'full' );

    Will be switching it to the solution you provided now, thanks!

    EDIT: Just tried switching it but it does not seem to work, I have also tried changing the value from 12 to 14 and 20 still didn’t work unfortunately

    • This reply was modified 7 years, 10 months ago by theateamcebu.

    I think I know why (I probably should have included this in my previous explanation).

    The different sized images get generated when the image is uploaded to your site – so this code won’t effect any images that were uploaded previously.

    Two options- one is to remove the existing image and re-upload it to generate the new size. The second is a plugin like Regenerate Tumbnails, which will run through your previously uploaded images and re-generate the different sizes based on the current theme/plugin demands ??

    Thread Starter theateamcebu

    (@theateamcebu)

    Hi Chad,

    Sorry I must have forgotten to hit the submit button. It is as you said, simply re-upload the image. Thanks a bunch!

    You’re welcome!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Display featured image to match new width’ is closed to new replies.