WordPress.org

Ready to get started?Download WordPress

Forums

Jetpack by WordPress.com
[resolved] Thumbs size for Tops posts & pages widget (21 posts)

  1. MasterBen
    Member
    Posted 10 months ago #

    Hello,

    I use jetpack's "Top posts & pages" widget and I use the option "Image list" which displays a small thumbnail and a clickable title for each post.

    Is there a way to put a custom size for these thumbnails? How can it be achieved? For instance, can I make these thumbs in size 100x100 px instead of the present size 40x40 px.

    I wouldn't like to use the option "Image grid" because I need the titles of the posts as well.

    Kind regards.

    http://wordpress.org/plugins/jetpack/

  2. stacyduval
    Contributor Day Volunteer
    Posted 10 months ago #

    Put this CSS code in your custom CSS.

    .widgets-list-layout-blavatar {
         max-width: 100px;
    }
  3. MasterBen
    Member
    Posted 10 months ago #

    Hi, thanks for the answer. But I don't know which css file you mean exactly? Where can it be located?

    I tried putting that code in my theme's css file but nothing has changed.

  4. stacyduval
    Contributor Day Volunteer
    Posted 10 months ago #

    Can you post a link to your site?

  5. MasterBen
    Member
    Posted 10 months ago #

    I can but the site in question is NSFW so not sure if that's OK for this forum?

    If possible, please contact me at my email guysheaven (at) gmail (dot) com and I will show you the URL.

  6. stacyduval
    Contributor Day Volunteer
    Posted 10 months ago #

    You can post your link here. I checked the forum rules:

    Warn About Adult Content
    Some sites contain content that is not suitable for a general audience or for viewing whilst at work. To avoid creating problems for anyone who is trying to help you, please add NSFW to either the topic title or the content of your post, as well as tag your post NSFW, as a warning if you think your site falls into this category. (Otherwise your post / links may be removed.)

    NSFW stands for Not Safe For Work.

    You just have to tag this post as NSFW.

  7. MasterBen
    Member
    Posted 10 months ago #

    --------Warning! This post contains links to a website that is NSFW!------

    OK, my blog is http://www.roughstraightmen.com

    You can see those thumbnails in the right sidebar, somewhere in the middle of the page (you have to scroll down), and the title is "Top Posts & Pages".

    As you can see, the thumbs look too small and are barely distinguishable. So I wanted to make these thumbs a bit larger.

    The code that you proposed in the first post has been added to my theme's css file, but it seems to have no effect.

    By the way, while we are at it, the widget "Popular Posts Tabbed Widget" also doesn't work properly. It displays the default "WordPress" thumbnail instead of thumbs taken from respective posts. You can see that widget right below the "Top Posts and Pages" widget.

    Any idea how to make the Popular Posts Tabbed widget work as well?

  8. stacyduval
    Contributor Day Volunteer
    Posted 10 months ago #

    Try this and let me know if it works

    .widgets-list-layout .widgets-list-layout-blavatar {
    max-width: 100px;
    }

    I didn't see the tabbed widget. Is it right underneath the Top Posts and Pages? Because that looks like a Recent Posts widget.

  9. MasterBen
    Member
    Posted 10 months ago #

    I still don't know where that code should be placed. In my theme's css file or in some other css file? If I put it in my theme's css file nothing happens.

    As for the Tabbed Widget it is right below the "Top Posts and Pages". You can find it if you search for the text "Popular Posts Tabbed" in your browser.

  10. stacyduval
    Contributor Day Volunteer
    Posted 10 months ago #

    I can see the CSS you have placed in your style.css file but there is another CSS file overriding it.

    Your theme doesn't have a provision for custom CSS. But you can download this plugin for your custom CSS.

    There is a video tutorial on the download page for the Custom CSS plugin. Lets see if this works!

    I can see the Tabbed Widget now and the problem.

  11. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 10 months ago #

    As Stacy mentioned, you will need to add some custom CSS to your site. You can add this code at the bottom of your theme stylesheet, or in the Custom CSS editor available under Appearance > Edit CSS in your dashboard:

    #widgets .widget_top-posts .widgets-list-layout-blavatar {
        max-width: 600px;
    }

    You will also need to change the image source to load bigger images. You can do so by adding the following code to your theme's functions.php file:

    function jeherve_custom_thumb_size( $get_image_options ) {
            $get_image_options['avatar_size'] = 600;
    
            return $get_image_options;
    }
    add_filter( 'jetpack_top_posts_widget_image_options', 'jeherve_custom_thumb_size' );

    Of course, you're welcome to replace "600" by another value! :)

    Let me know if it helps.

  12. BastardCast
    Member
    Posted 4 months ago #

    Looking to increase the thumbnail size as well, did what Jeremy said and rather than changing the thumbnail size just got a cascade of errors "Warning: Cannot modify header information..."

    So clearly I did something wrong.

    Using the Weaver II theme and the site is http://radiobastard.com

    any help would be greatly appreciated.

  13. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 4 months ago #

    Could you give it another try? You'll need to make sure you do not insert any extra blank lines before or after the function mentioned above.

  14. BastardCast
    Member
    Posted 4 months ago #

    does it matter where I paste it in themes.php? (that's me waving the newb flag obviously)

  15. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 4 months ago #

    @BastardCast Try pasting it in a functionality plugin instead:
    http://wordpress.org/plugins/functionality/

    Let me know if it helps.

  16. BastardCast
    Member
    Posted 4 months ago #

    Tried it with the functionality plugin and with both the custom CSS feild in the Weaver II theme and just the regular Custom CSS editor in the dashboard. No errors but the thumbnails are still the same size

  17. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 4 months ago #

    It seems your sidebar is organized a bit differently. Try with the following CSS instead:

    #sidebar_primary .widgets-list-layout .widgets-list-layout-blavatar {
        max-width: 150px;
    }
  18. BastardCast
    Member
    Posted 4 months ago #

    well, it seems to be closer now, just the thumbnails don't seem to be resizing to 150px, am I missing something? Changed the value in both the functions.php and CSS (even have it up to 300 right now... they ARE larger, but not 150, and don't seem to change with the value)

    and, WOW, you are quick with the responses, thanks for everything so far.

  19. Jeremy Herve
    Happiness Engineer
    Plugin Author

    Posted 4 months ago #

    Try adding a width parameter to the CSS, like so:

    #sidebar_primary .widgets-list-layout .widgets-list-layout-blavatar{max-width:300px;width:100%;}

  20. BastardCast
    Member
    Posted 4 months ago #

    That did it! Awesome, thanks for all your help man. I really appreciate the time you gave for this.

    Thanks!

  21. tarheel83169
    Member
    Posted 1 month ago #

    Jeremy, your fix is awesome. I tried just adding the css and it def resized the images but they were blurred. Your functions.php mod corrected that. Can be seen in action on my political blog (labeled "currently trending" in the sidebar upper right)

    thanks for the fix, this has been bugging me for ages

Reply

You must log in to post.

About this Plugin

About this Topic

Tags