Slide-show option to add aspect ratio padding of first image to it's container

[drewbaker]

Often I'll want a slide-show to size based on the height of the first image in the slideshow (note: only the first image, to avoid the height of the gallery bouncing up and down between slides).

I built this for the ridleyscott slideshow, but it's a different code base. But here is the relevant code to help.

 <div class="slideshow" :style="`padding-bottom: ${firstAspectRatio}%;`">

        firstAspectRatio() {
            // Get first slide, the figure out what it's bottom-padding ratio should be.
            const slide = this.slideImageAlways(this.slides[0]);
            return (
                slide.sizes.full.height / slide.sizes.full.width * 100 || 56.25
            );
        }

I imagine this would be a prop like ratio-sizing="true" or something like that.

[johndigital]

I'm thinking this should be a different component that wraps around slide-show since the component is generic and in order to build this feature we'd have to make a bunch of assumptions about the incoming data.

Maybe it would be aspect-slide-show or something like that. Another benefit here would be that if the new component was really opinionated about what kind of data it receives, we could add in more features like preload that aren't possible with the slide-show component now.

Thoughts @SaFrMo ?

[SaFrMo]

I like the wrapper idea - slide-show could be a generic slideshow, and maybe something like fh-slideshow has the aspect prop and a few others that are more specific to Funkhaus conventions (and that allow for preloading like @johndigital mentioned).

So maybe things like:

• preload
• aspect
• a-div as default slide, with optional slot override
• stopping a slideshow on manual advancement (if that's not in already)

Any other items y'all can think of?

[drewbaker]

I really like the slideshow we have now, it’s super flexible. I don’t want to add another thing just to support this one sizing thing.

Should we just add preload and a sizing function to our utilities file then? The sizing function you’d just feed in an attachment object and it would give you back the ratio of the requested size?