Jump to content

Slick Slider - How to fit vertical image in horizontal slider


kuba2
 Share

Recommended Posts

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


Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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 by horst
added hint to "weighten"
  • Like 4
Link to comment
Share on other sites

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. 

  • Like 4
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...