Grow your CSS skills. Land your dream job.

WordPress Featured Image Dynamic resizing

  • # September 12, 2011 at 11:23 am

    Hi guys,

    I’m currently working on a wordpress theme and stumbled on this problem. Do you guys have an idea on how to dynamically resize the image that I’ve uploaded using the WordPress Featured Image function?

    Hope you guys could help? Thanks in advance :)

    Best,

    Val

    # September 12, 2011 at 11:34 am

    Do you mean when you resize your browser or when the image is uploaded?

    # September 12, 2011 at 11:59 am

    I meant for when the image is uploaded :)

    # September 12, 2011 at 12:50 pm

    Much easier to explain then!

    You’ll want to add this to your functions.php file (you can find that in your theme’s folder):

    // add post-thumbnail functionality
    if (function_exists('add_theme_support')) { add_theme_support('post-thumbnails'); }
    set_post_thumbnail_size( 100, 100, true ); // Normal post thumbnails
    add_image_size( 'custom-1', 125, 125, true ); // Custom size that will crop the image to fit the proportion
    add_image_size( 'custom-2', 255, 236, false ); // Default is false, "soft proportional crop"

    If you don’t yet have a functions.php file in your theme’s folder, you can simply create one and add the code above. If you already have one and it’s using featured images already, then chances are you’ll just have to add the add_image_size stuff.

    To call a featured image with a specific size in your templates, you can use this:

    < ?php the_post_thumbnail('custom-1); ?>
    # September 13, 2011 at 1:43 am

    Wow, cool! This is really a big help. Thank you so much TheDoc. Really appreciate it. :)

    More power to Chris and CSS-Tricks site! :D

    Val

    # November 12, 2012 at 8:17 am

    So what about when the browser is resized? I’m trying to figure out away to serve up the smaller size image for mobile devices and the larger size on desktop sizes. Ideas? Oh complicate it by stating that I also want to be able to use a caching plugin like w3Total Cache or some other cache.

    # March 9, 2013 at 11:14 am

    Sir You Have Missed –> ‘ < -- after the "custom-1" in so i hope you will fix it soon and i dont want other to suffer syntax problem as i have faced.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".