Link to home
Start Free TrialLog in
Avatar of Colin Brazier
Colin BrazierFlag for United Kingdom of Great Britain and Northern Ireland

asked on

A responsive image gallery using flexbox

Ok, my page: http://www.col-b.uk/SLSO/?page=gallery

My requirements: A responsive image gallery using flexbox with assorted size and shaped photos.  Nice-to-have: loaded dynamically.

My problem: trying to understand how srcset and flex fit together.  For srcset, do I have to know in advance the sizes of the photos in each place?  This would be hard if they are to be loaded dynamically; if not dynamic, I will have to hard-code a lot of widths in the html.  I have separate folders of low, medium and high-res photos.

What is the best practice in this scenario?  

Cheers,

  Col
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Colin Brazier

ASKER

So not to have a gallery page for mobile?   The site is primarily aimed at attracting prospective new members so I thought images would be important.

Rationale for flex is to avoid messy floats and tons of media queries by using flex flow.

Yes there are masses of plugins available, too many!   So I thought I'd code my own as it seemed fairly straightforward.  Any you can recommend Julian?

Cheers.
Have you looked at putting your images in a Bootstrap type responsive grid?
No, I need to familiarise myself with Bootstrap.

That appears to be what the plugins seem to use...I'm leaning towards a plugin now!
Thanks Julian.
You are welcome.