Resizing Thumbnails in Slider

  • TheScribe

    #1687

    Thank you for a lovely theme. I have spent much of today using the forums to help tweak little issues. I’ve learned a lot, but am having problem with one thing at the moment.

    I have the slider options set to:

    First Image in Post

    Thumbnail and excerpt

    However, I need the thumbnail size to be 130w x 196h (to show a book cover).

    I attempted to follow the instructions in

    https://forum.graphene-theme.com/graphene-support/slider-image-resize

    Basically there’s two things that you need to do:

    1. Define a new thumbnail size using the add_image_size() function inside your (child theme’s) functions.php file.

    2. Modify the theme’s functions.php file to use the new thumbnail size. In version 1.1.2, modify line 944 to look like this:

    <?php echo graphene_get_slider_image($post->ID, array(150, 150, true)); ?>

    Change the values in the array(150, 150, true) part to reflect the width and height of the new image size that you have created in Step 1.

    When you do this, all new pictures uploaded will have a thumbnail created according to the new image size you defined, in addition to the WordPress’ default image sizes, which you can then use as the size for the image slider.

    I’ve put the following code into the child’s functions file:

    <?php add_image_size( 'booksize-thumb', 130, 196 ); ?>

    But I cannot find the coding listed in part 2 of the instructions anywhere. I have done numerous “find” searches, even using 150 only and nothing comes up. I really could use some help please.

    Here’s the url, but it’s only in early stage as yet so there’s nothing much to see:

    Kayelle Press

    Thank you in advance for your time.

    Jon Lynch

    #16855

    I suggets you try adding:

    add_filter('graphene_slider_image_size', 'booksize-thumb');

    To your functions.php. Note I have not tested this.

    Jon

    TheScribe

    #16856

    Thank you. That worked like a charm. I’m very grateful for your help. 🙂

    FireOfGod

    #16857

    I have the same problem like TheScribe. I dont know anything about php, but i would like to change the size of the images in the slider. what exactly do I have to do? where do i have to put the things into and what exactly do i have to put in?

    thanks for your help in advance!

    Admin

    Syahir Hakim

    #16858

    1. Create a child theme.

    2. Create a functions.php file inside your child theme.

    3. Insert this code into the functions.php you just created:

    <?php
    add_image_size( 'custom-slider-thumb', 150, 150 );
    function custom_slider_thumb(){
    return 'custom-slider-thumb';
    }
    add_filter( 'graphene_slider_image_size', 'custom_slider_thumb' );
    ?>

    Change the dimensions to whatever you like (I used 150×150 pixels in the code above).

    KATrimels

    #16859

    Syahir,

    It’s good to talk with you again; hope you’ve liked what you’ve seen with what we’re doing.

    We’re trying to add images to the slider; it currently only has the most recent post excerpt. We’d like to cycle a few images that relate to the site theme, not necessarily included in a specific post. And then include the excerpt from the most recent post

    I tried entering the above code in the child theme’s function.php you created and got error messages as I saved. The save still went through but when I reloaded the front page, I got the error message below:

    Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘custom-slider-thumb’ was given in /hermes/bosweb26c/b2759/ipw.idtenterprises/ContEngr/WordPress/wp-includes/plugin.php on line 170

    After searching through the forums, I’m at a loss for 1) how to do what we want, and 2) why this error message is coming up.

    Any help you can offer would, as always, be much appreciated.

    Thanx.

    KATrimels

    http://www.contemporaryengineer.com

    Admin

    Syahir Hakim

    #16860

    Oops! The code above should have been like this:

    <?php
    add_image_size( 'custom-slider-thumb', 150, 150 );
    function custom_slider_thumb(){
    return 'custom-slider-thumb';
    }
    add_filter( 'graphene_slider_image_size', 'custom_slider_thumb' );
    ?>

    Now that should work. I’ve also edited my post above to reflect this.

    KATrimels

    #16861

    Thanx for the quick reply, Syahir. I put that into the local test site and got the following error message.

    Warning: Cannot modify header information – headers already sent by (output started at /hermes/bosweb26c/b2759/ipw.idtenterprises/ContEngr/WordPress/wp-content/themes/graphene-child/functions.php:8) in /hermes/bosweb26c/b2759/ipw.idtenterprises/ContEngr/WordPress/wp-includes/pluggable.php on line 934

    The image showed (too large) in the box and was chopped on the bottom by the border. And adjusting the thumbnail size even down to 50 x 50 did nothing on the page.

    I also tried the background image and excerpt. That worked OK except 1) the blue border around the slider box disappeared (white dot in lower right is still there), and changed the slider alignment on the page, and 2) the “view full post” button is chopped off as is the excerpt text on the right (custom URL, background image & excerpt).

    We adjusted the width on the main column in the child template and I think the slider width is adjusted to 580 px. Not sure if that is causing the issue. But would like to not have to adjust this again.

    Any suggestions?

    Thanx. KATrimels

    Admin

    Syahir Hakim

    #16862
    Quote:
    Warning: Cannot modify header information – headers already sent by (output started at /hermes/bosweb26c/b2759/ipw.idtenterprises/ContEngr/WordPress/wp-content/themes/graphene-child/functions.php:8) in /hermes/bosweb26c/b2759/ipw.idtenterprises/ContEngr/WordPress/wp-includes/pluggable.php on line 934

    This error is usually caused by having a whitespace outside of the opening <?php and closing ?> tags. Check to see if you have any whitespace at line 8 of your child theme’s functions.php file.

    Quote:
    The image showed (too large) in the box and was chopped on the bottom by the border. And adjusting the thumbnail size even down to 50 x 50 did nothing on the page.

    WordPress only resizes the images when they are uploaded, so even if you change the size now, all the images that were uploaded prior to the change would not be resized. You can use the AJAX Thumbnail Rebuild plugin to rebuild those image sizes.

    Quote:
    I also tried the background image and excerpt. That worked OK except 1) the blue border around the slider box disappeared (white dot in lower right is still there)

    Yes, this is the intended design.

    Quote:
    2) the “view full post” button is chopped off as is the excerpt text on the right (custom URL, background image & excerpt).

    The excerpt is probably too long for the available space. You can expand the excerpt space via the Custom CSS option.

    KATrimels

    #16863

    Thanx again for the quick reply; you’re awesome!

    I checked the white space and there was a blank line between the two php functions in the child theme’s function.php I deleted that and we’ll see if it works (didn’t get an error yet).

    With the blue border being removed (image it does look better without the border, BTW), the slider box has been pushed up. In other words, it appears the padding (what was blue and becomes clear) has stayed on right, bottom, and left – but not on top. And it doesn’t look centered (hard to tell because the excerpt is chopped – may be an optical illusion on the left-right centering in the left column).

    As for the CSS, I looked for code within the Graphene Style Sheet and couldn’t find anything related to the excerpt on the slider. Would you happen to have something I could cut/paste into the Graphene Child Style Sheet?

    Thanx. KATrimels

Viewing 10 posts - 1 through 10 (of 11 total)

  • 1
  • 2
  • You must be logged in to reply to this topic.