Controlling Image Height in Flickety Slider

gdanglin · 2016-09-18 05:12:47

Hello,

I just upgraded to Backlight + Pages with the Theater add-on, and so far, I'm very pleased. I have been experimenting with the Flickety Slider presentation, and it is scaling my images vertically to fill the slide area. I have my large image output size set to 1280x960, and the aspect ratio of the Flickety cell set to 4:3. When a 960px high image is displayed (square or portrait) the image aspect ratio is maintained with no horizontal scaling to fill the cell. When a 1280px wide image is displayed that is shorter than 960px, the image gets scaled vertically to fill the viewport cell, which is not good for panoramas. I messed about with different height parameters in Safari's Inspect Element pane, and while I could eventually get the height correct, the image would then be top aligned in the cell, rather than centered vertically.

Is there a way (custom css, etc.) to get the cell to respect the image height and also vertically center the image?

Thanks,
Garrett

admint · 2016-09-18 08:03:00

I'm not sure this answers your question, especially since you're dealing with flickety in theatre, but you might check out this thread... http://community.theturninggate.net/vie … hp?id=6779. Helped me with my theatre issues, even though I ended up with Daniel's solution.

Good luck.

rod barbee · 2016-09-18 08:16:00

It looks like the selector for styling images may be:
.flickity-slider img, though you may need to get more specific than that.

Matthew · 2016-09-18 17:14:25

You will need to set your aspect ratio relative to your images. For example, if your slideshow is 16:9 and you include a 2:1 image, then your image will not properly fill the space. Instead, set your slideshow's aspect ratio to that of the image having the greatest width-to-height disparity -- in this example, 2:1.

Your priority is to have all images fill the slideshow height, and to be constrained by height, not by width.

gdanglin · 2016-09-19 21:57:06

Thanks, all!

The challenge is that I have images in a gallery that vary wildly in aspect ratio, from 4:3 to 3:2 to 4:1. If I set an appropriate height and aspect ratio for the 4:1 image, then my more conventional aspect ratio images are way to small, I'm happy to let my extremely wide images be short rather than very wide. I could, of course, edit the content of my gallery to play nice with the carousel, but I'd much prefer to get the carousel to bend to my content I did briefly scan the flickety website and found a behavior called adaptiveHeight that changes the height of the carousel to match the height of the slide, but I'm not sure what the most effective way to implement it is within the framework of Backlight.

Thanks Again!
Garrett

Matthew · 2016-09-20 15:53:37

Our implementation does not support the adaptiveHeight option.

gdanglin · 2016-09-21 03:59:55

Ok. Maybe in the future? I really like the look of flickety...

Matthew · 2016-09-21 07:35:17

I'm not sure. It doesn't jive with our responsive styling to maintain aspect ratio, and might require extensive overhaul. I'll try to remember to play with it when I have the time, but right now my plate is pretty full with Wordpress.

Community @ The Turning Gate

#1 2016-09-18 05:12:47

Controlling Image Height in Flickety Slider

#2 2016-09-18 08:03:00

Re: Controlling Image Height in Flickety Slider

#3 2016-09-18 08:16:00

Re: Controlling Image Height in Flickety Slider

#4 2016-09-18 17:14:25

Re: Controlling Image Height in Flickety Slider

#5 2016-09-19 21:57:06

Re: Controlling Image Height in Flickety Slider

#6 2016-09-20 15:53:37

Re: Controlling Image Height in Flickety Slider

#7 2016-09-21 03:59:55

Re: Controlling Image Height in Flickety Slider

#8 2016-09-21 07:35:17

Re: Controlling Image Height in Flickety Slider

Board footer