WordPress.org

Ready to get started?Download WordPress

Forums

Feature A Page Widget
[resolved] Changing the default thumbnail size (9 posts)

  1. laughhearty
    Member
    Posted 1 year ago #

    Hi,
    I need to change the square thumbnail size to 80px x 80px. Is there a way for me to do this?

    Thanks!

    http://wordpress.org/extend/plugins/feature-a-page-widget/

  2. mrwweb
    Member
    Plugin Author

    Posted 1 year ago #

    There's no option that lets you easily do this, although it's not too hard the fpw_featured_image filter and a custom style.

    I'm not in a place where I can actually test this code right now, so use it at your own risk, but I think the following two snippets should do what you need.

    1. In your theme's functions.php file, place the following:

    // create custom image size, 80x80 with hard crop
    add_image_size( 'fpw_custom_thumbnail, 80, 80, true);
    
    // override the featured image with custom size image
    function fpw_custom_featured_image( $featured_image, $featured_page_id ) {
        return get_the_post_thumbnail( $featured_page_id, 'fpw_custom_thumbnail' );
    }
    add_filter( 'fpw_featured_image', 'fpw_custom_featured_image', 10, 2 );

    Note: If your "thumbnail" image size set in Settings > Media is already 80x80, you can get rid of the add_image_size() line and replace 'fpw_custom_thumnail' with 'thumbnail' in the line beginning with return.

    2. In your theme's style.css file, place the following:

    .fpw-layout-wrapped .fpw-featured-image {
        width: 80px; /* overrides width: 45%; */
    }

    Let me know if this works.

  3. mrwweb
    Member
    Plugin Author

    Posted 1 year ago #

    Hi @laughhearty,

    Were you able to get this working satisfactorily? If not, let me know and I may be able to help you a bit more.

    Based on your experience, feel free to either vote on features or submit feedback on my website so I can know in what ways you'd like the plugin to be improved in the future.

    -Mark

  4. laughhearty
    Member
    Posted 1 year ago #

    Hi Mark,
    I did try this out. But I think I forgot to add the styles and in didn't work. Duh. Anyway, I opted for the Banner style. And will revisit this code for another project I'm working on. I will add some comments to your site. Would love to have image floated left as an option..

    Thanks so much for a great plugin!

  5. mrwweb
    Member
    Plugin Author

    Posted 1 year ago #

    Thanks for the response. When I get a chance, I'll test that code I posted and see if I can get it working.

    In the mean time, I'm glad you were able to find an acceptable alternative.

  6. mrwweb
    Member
    Plugin Author

    Posted 1 year ago #

    As a final update, I just tested the code. There was a missing quotation mark in:

    add_image_size( 'fpw_custom_thumbnail', 80, 80, true);

    Otherwise, everything else should work as stated. As mentioned on the plugin's main page, you'll probably have to run an image resizing plugin after the change to get it working on images that are already in the media library.

  7. murtykorada
    Member
    Posted 1 year ago #

    Hi Mark,

    In my media settings, thumb size is set to 50x50. I uploaded an image (after installing the plugin) and scaled it to 50x50. Then added this as a feature image to a page. However, the featured image is still showing a 200x200 image on the widget.

    http://www.koradainc.com/school1/

    Am I missing a setting some where?

    Or do I have to implement the changes described in this post to achieve desired size (50x50)?

  8. murtykorada
    Member
    Posted 1 year ago #

    Hi Mark,

    I just made one change to the theme's custom css option:

    .fpw-layout-wrapped .fpw-featured-image {
        width: 50px;
    }

    It started working.

    I did not make any changes to the functions.php. As per this post, evening changes to functions.php is required. I am bit confused here.

  9. mrwweb
    Member
    Plugin Author

    Posted 1 year ago #

    To be clear for anyone who reads this thread, there are two changes to make for different reasons.

    1. Change the size of the image file.
    The code snippet with add_image_size() and add_filter() tells WordPress to crop images to the dimensions you want to use. This changes the actual dimensions of the image site visitors download.

    2. Change the size of the display
    The CSS change effects the size at which the image is displayed. By default, the widget is coded to [usually] work with sites that have a responsive design or a very narrow widget area. (This may also improve images on HiDPI displays, but that's not completely confirmed yet.)

    If you only change the CSS (#2), you'll see the new image size, but you'll still be forcing users to download the default image. This may distort the image and it will use the hard-crop (true on "Wrapped" and "Banner," false on "Big") setting associated with the image size of the widget layout you picked.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic