Adjust height and width of the homepage Slider
  • maesstedemaesstede
    December 2012
    Is it possible to adjust the height of the homepage slider, when I open my website I only see the slider and not the content below, a user always needs to scroll down. I would like to create a slider that is smaller so we can see the content below when the site opens.
  • mikemike
    December 2012
    These are for the Wildfire theme but the same code applies:
    Adjusting Image Sizes:
    http://support.progressionstudios.com/discussion/1295/image-sizes#20

    Adjusting width(Harder as responsive styles are based on percentages not a set pixel width):
    http://support.progressionstudios.com/discussion/1074/slider-80-not-full-width#3
  • maesstedemaesstede
    December 2012
    Thanks for the fast anwser, I tried some of the suggestions in the first link and changed the

    add_image_size('progression-slider-retina', 2000, 700, true); function

    and added the below custom code, but the image size still stays the same, do I need to upload the images again ? or try something else to get the smaller slider ?

    img.attachment-progression-blog {min-width:0px ;}
    body.single-portfolio .flexslider .slides img {width:auto; }
  • Hey there,

    You'll need to upload the images again, or you can use this plugin;

    http://wordpress.org/extend/plugins/force-regenerate-thumbnails/

    Hope this helps! :)
  • maesstedemaesstede
    December 2012
    I tried to remove all pictures and upload them again, used the force-regenerate-thumbnails plugin but the pictures in the slider don't change.

    If I look in my page code, I see the new size I set in the add_image_size slider img property but it looks like it is not picked up, do I maybe need to override some parameters for the flexslider or homepage-slider-container class itself ?

    <!-- Page Title and Slider -->
    <div id="homepage-slider-container">

    <div id="page-title">
    <div class="flexslider" id="homepage-slider">
    <ul class="slides">

    <li>

    <img width="864" height="400" src="http://localhost/wp-content/uploads/2012/12/slide2.jpg&quot; class="attachment-progression-slider-retina wp-post-image" alt="slide2" title="slide2" />
    </li>

    </ul>
    </div><!-- close .flexslider -->
  • Hey there,

    What did you change the image size to? Sometimes the image resizer function can be a bit brutal to figure out, I'm guessing you changed the height to 400px? It looks like your image is being cropped at 400 high because the width isn't hitting the required size, so if your image is 2000x400 you need to make sure the image you upload is atleast that size to trigger the crop properly.

    Confusing isn't it! :) - Make sure that everytime you change the image size function that you run the regenerate thumbnails plugin!

    Cheers!
  • maesstedemaesstede
    December 2012
    Hi thanks a lot for your help and fast replies, I uploaded a picture 2000x925 and set the width to 2000 (default setting of the theme) and the height to 400px, still no luck.

    I think I will go for the workaround by resizing my picture myself to 2000x400 before I upload the picture, I tested it and in this way the picture is shown ok, When I have more time on my hands I will give this resizer function another try :-)
  • That's a perfectly acceptable way of doing this :) Enjoy the theme! :D