Related Products Slick Slider Image Sizing

[Bruce - PhosphorMedia]

The standard 'slick slider' feature, sizes images to fit the containments of the div they are called into. Problem is, I've tried re-sizing all the ones I could think of and it still shows the thumbnails at the default size of about 540px. Can anyone 1) verify that this is what is still being used to control the thumbnail size and 2) tell me what that container is?

[Bruce - PhosphorMedia]

testing, testing, testing...is this microphone on?

[lesliekirk]

testing, testing, testing...is this microphone on?

Link please

[lesliekirk]

The Related Products Carousel us control by a couple of lines in the scripts/js file

 // ---- Related Products Carousel ---- // $.getScript(theme_path + '/js/jquery.slick.min.js', function () { $('#js-related-products-carousel').slick({ draggable: false, slidesToScroll: 2, slidesToShow: 2, }); });

Your thumbnails are 540px wide in the default Related products? How did you get them that big?

[Bruce - PhosphorMedia]

The Related Products Carousel us control by a couple of lines in the scripts/js file

// ---- Related Products Carousel ---- // $.getScript(theme_path + '/js/jquery.slick.min.js', function () { $('#js-related-products-carousel').slick({ draggable: false, slidesToScroll: 2, slidesToShow: 2, }); });

Your thumbnails are 540px wide in the default Related products? How did you get them that big?

Not my site...but its running stock levels ready theme...behind a firewall...thought it would be a general thing. As I said, the docs on the Slick Slider widget claim it resizes (and applies this image size) via inline styles and script control...so was just looking to see if someone knew which container it was using to base this on. Guess I'll just go through the source of the page and js again. Thanks though.

[Matt Zimmermann]

Bruce - Are you referring to the carousel on the storefront? Those image sizes are controlled through the Storefront: Featured Products product listing in the ReadyTheme section. By default, it should be looking for your Main image type and be sizing it to fit within a box of 234px x 234px. Are you seeing that larger size on the desktop or at a specific breakpoint?

[Bruce - PhosphorMedia]

Matt,

No, I'm referring to the Related Products slider on the Product page. And right now, concerned about the desktop sizing. (Mobile sizing works just fine.)

[Matt Zimmermann]

Bruce - The image settings for the related products is set on the product page for the main image just like the other carousels. The default size is set to 255px x 333px; are those the same settings you have? Generally speaking, the images will scale to fit within the bounds of their containers, but they shouldn't exceed the settings in the admin.

[Bruce - PhosphorMedia]

Yes, the images are at the desired size (164px) however, their bounding box, which is set by inline css via JS, remains at ~540px which means only two related products appear. I need to know what is defining that 540px box.

Note: These types of things in ReadyThemes should have a admin setting. Its fine for you and I to wander around JS and jQuery, store owners should just be pointing and clicking.

[Matt Zimmermann]

Interesting that the bounding box is being set so high. The inline setting is coming from Slick itself. Are you seeing the same issue when you view the Levels demo store?

[Bruce - PhosphorMedia]

Well, no cause all the products i've seen there have only two images and we are trying to get these too display four across the entire screen.

[Matt Zimmermann]

If you want to change it to display four across, you will need to change your slidesToScroll and slidesToShow settings to be 4

[Bruce - PhosphorMedia]

Nope. But at this point faster just to build it from scratch.

[William Davis]

Bruce, I'm new to the world of M5 and beyond. When you use the term "Slick Slider", were you referring to the "Slick" slider at http://kenwheeler.github.io/slick/?

If so, is there a reason one would prefer a third party solution in this case the Slick slider versus the stock Level slider?

Finally, is it possible to add conditionals to either sliders in order to dynamically display certain product images and/or message?

If so, please let me know how.

[Bruce - PhosphorMedia]

Yes, they are one (sort of) the same. Miva is using the Slick Slider that was written by kenwheeler. However, the implementation is hidden. I finally found the hidden call (its in /mm5/themes/levels/js/scripts.js).

Using a 'third party script' means you actually have instructions available on how to use it and its options. Since a lot of these functions are 'baked into' merchant via readythemes, these controls are 'hidden' in various (and different places based on the theme). So, the time I spent trying to find this stuff I could have easily added the slider myself. (I realize that I might be more proficient than most at this, but my main frustration is that these features are not documented adequately or at all.

As for modification, the answer is yes...but I wouldn't recommend doing that if you had to ask that question :)