Automatically Loading the Right Thumbnail

4 posts by 2 authors in: Forums > CMS Builder
Last Post: December 4, 2014   (RSS)

Hello, All

I have a thumbnail gallery which loads pictures as background images for a div of fixed dimensions. This keeps everything uniform and neat. The code loads the smallest of 4 available thumbnail images generated by CMSB - in this case Thumb4. The div is set to around 150 x 100 pixels - which gives an aspect ratio of 6x4. Thumb4 has max dimensions which are slightly bigger to ensure the image fills the frame. The other 3 Thumbs are increasingly larger.

It a pretty failsafe system - except when someone uploads an image with a strange aspect ratio! If someone adds a panorama, for example, the image will fill the width of the frame but not the height. This looks odd, not least because the parent div is styled with an attractive border and a drop shadow.

I wondered if there was some way around this?

Would it be possible, for example, for the system to first examine the size of Thumb4 and if any of the dimensions are less than the parent frame then it would load Thumb3 instead...

Or something like that!

:0S

Perchpole

By claire - December 4, 2014

Hi Perch, this looks like a job for the image cropper plugin. Have you used that before? You'd be able to specify the thumbnail size and have it show a cropped version of any image at that size in the div. It'd probably be a better option than adding conditional code to determine the image dimensions.

--------------------

Claire Ryan
interactivetools.com

Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

By claire - December 4, 2014

It's somewhat new and experimental. So not in the usual plugins list for now. You can send an email to consulting@interactivetools.com about it - Ross will know what I'm talking about. I'll give him a heads up too.

--------------------

Claire Ryan
interactivetools.com

Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/