Multiple images per slide

[dzuz14]

Multiple images per slide

[DZuz14]

Just a few quick thoughts as a brain dump on what I think it might take to make this happen:

• Instead of passing just an array of image links down to the slider as props, we might want to actually create an array of objects instead. This way the developer could customize every single slide to suit there needs.

Here is a very naive example of what I was thinking:

const slides = [
    {
        // Breakpoints at which to display a different sized image.
        sizes: [480, 768, 1000],

        // Images could be absolute, relative, or complete URLs.
        content: ['https://images.somecoolstartup.com/mountain-view.jpg', './public/static/images/summer.jpg'],

        // Allow some separation between the slides if displaying more than 1 per.
        spacing: { amount: 2, unit: 'em' }
    },
    {
        sizes: [768, 1024],
        content: ['/var/www/html/static/img/night-sky.jpg']
    }
]

[erichodges]

Another option would be to have the browser load images that it needs from Cloudinary. I'm working on a project doing this with gatsby. It's way better than having the dev make a ton of different image sizes.

[DZuz14]

I haven't used it before, but if you upload images, you can tell their app to generate them for you, or does it automatically re-create the images in a few default sizes?

Either way, all the developer would need to do in that case is just paste in the url to each image hosted on their cloudinary account.

[erichodges]

IIRC, you set up the sizes you want for the srcset in the gatsby config and then all those sizes are generated by Cloudinary automatically. Then the browser gets what it needs from the srcset which you get from the graphql query.

This way you only list the sizes once in the config for all your screen sizes.

Well it's not in the config, lol. I'm looking...I think the sizes may just autogenerate...
Yeah, I'll go with the above that Cloudinary autogenerates the srcset and I pick the max size in my graphql query.

Here's my repo:
https://github.com/erichodges/cloudinary-test

I'm still in process on that repo. I want to integrate your slider along with some other stuff.

Here's the video where I learned about using Cloudinary with gatsby:
https://www.youtube.com/watch?v=rDlokHuYwq4

[DZuz14]

Okay cool. I'm thinking about refactoring the master branch of this to actually become a library that can be used on NPM. I'll check out your repo, and perhaps we could hack on this feature in branch I'll create called dynamic-images.

We can use your cloudinary account to test things out if you want.

[DZuz14]

Actually, it should prob be called multiple-slides since that's what the initial problem was.

[erichodges]

Cool, yeah that sounds great. We will need a way to chat that is encrypted. Maybe on discord...