Slick Slider - How to fit vertical image in horizontal slider

[kuba2]

Hello

Not sure, if this is the right place for a possibly simple question about slick slider.

How can I force my vertical images in my horizontal slick slider window to fit the screen? I have a set height and width via php for horizontal images and the vertical ones scale accordingly.

Is there some kind of max-height option?

 

Many thanks

Jakob

[diogo]

Slick slider doesn't enforce any markup on you (that's why it's my favorite slider), so, we really need to know more about your markup to be able to help. Is there an page where we can have a look?

[kuba2]

You can find an example here:

http://blattwerk-bueren.ch/process/nachsaison_foto/

the first picture is a vertical one, and the top and bottom are cut. Can I somehow fit the whole image in the window?

The Php for the gallery:

                                              <div class="galerie">

                                                

                                                  <?php

              foreach($page->bilder as $image) {
                $thumbnail = $image->size(800,600);
                echo "<div><img src='{$thumbnail->url}' alt='{$thumbnail->description}'  ></div>";
              }

            ?>

                                          
                                                

                                                </div>



                                              <div class="galerie-thumbs">

                                                   

                                                  <?php

              foreach($page->thumbs as $image) {
                $thumbnail = $image->size(200,150);
                echo "<div><img src='{$thumbnail->url}' alt='{$thumbnail->description}'  ></div>";
              }

            ?>


                                                </div>


                                  </div>

script for slick

     <script type="text/javascript">

    $(document).ready(function(){
      // $('.galerie').slick({

        accessibility: true,

        // autoplay: false,
        //   autoplaySpeed: 3000,

        //  cssEase: 'ease',

        // adaptiveHeight: false,

         $('.galerie').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.galerie-thumbs'
});
$('.galerie-thumbs').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.galerie',
  // dots: true,
  centerMode: true,
  focusOnSelect: true
});



      // });
    });

   </script>

[szabesz]

Hi kuba2,

If you use ProcessWire to crop the image like this: $image->size(800,600);, you will not be able to get a portrait image. I have never used Slick Slider, but you need to change the way you adjust the size of the images in order to work with an image file which is higher than it is wide.

[horst]

Hi kuba2,

If you use ProcessWire to crop the image like this: $image->size(800,600);, you will not be able to get a portrait image. I have never used Slick Slider, but you need to change the way you adjust the size of the images in order to work with an image file which is higher than it is wide.

I suggest to use Pia. With Pia, you simply can define the (max) outerbox dimensions and it will return you an image with dimensions that fit into it. Means, if you define a 600x600 box you will get back an uncropped image variation where the larger side is 600, regardless if it is portrait or landscape.

If you like to have larger landscapes than portraits, you can define width=800, height=600. It is simple.

Examples with Pia:

$thumbnail = $image->contain("width=800, height=600");

$thumbnail = $image->contain("square=600");

If you have many different aspect ratios with your images, you also should have a look to Pias option "weighten"!

Edited May 18, 2016 by horst
added hint to "weighten"

[diogo]

Hi kuba2,

If you use ProcessWire to crop the image like this: $image->size(800,600);, you will not be able to get a portrait image. I have never used Slick Slider, but you need to change the way you adjust the size of the images in order to work with an image file which is higher than it is wide.

I suggest to use Pia. With Pia, you simply can define the (max) outerbox dimensions and it will return you an image with dimensions that fit into it. Means, if you define a 600x600 box you will get back an uncropped image variation where the larger side is 600, regardless if it is portrait or landscape.

If you like to have larger landscapes than portraits, you can define width=800, height=600. It is simple.

Examples with Pia:

$thumbnail = $image->contain("width=800, height=600");

$thumbnail = $image->contain("square=600");

If you have many different aspect ratios with your images, you also should have a look to Pias option "weighten"!

Good suggestions, by using Pia, you won't have to touch the slick code. If you would decide to convert some images to vertical, you would have some big headaches to change the css that you already defined for slick. If you do decide to go with vertical images, I would advise you to use the images as background of an empty element instead to make them responsive and avoid strange distortions. You can keep the proportions of an empty element with this very interesting but simple trick http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css, and then set the images as background with cover and contain sizes. 

[horst]

@diogo: this is a really nice one. Many thanks for sharing!

[pwired]

https://processwire.com/talk/topic/12830-reaching-the-limit-of-pocket-grid-css/#entry116610