<div>
So not to have a gallery page for mobile? &nbsp; The site is primarily aimed at attracting prospective new members so I thought images would be important.<br />
<br />
Rationale for flex is to avoid messy floats and tons of media queries by using flex flow.<br />
<br />
Yes there are masses of plugins available, too many! &nbsp; So I thought I'd code my own as it seemed fairly straightforward. &nbsp;Any you can recommend Julian?<br />
<br />
Cheers.
</div>


<div>
Have you looked at putting your images in a Bootstrap type responsive grid?
</div>


<div>
No, I need to familiarise myself with Bootstrap.<br />
<br />
That appears to be what the plugins seem to use...I'm leaning towards a plugin now!
</div>


<div>
<div class="content wysiwyg-content">
Ok, my page: <a href="http://www.col-b.uk/SLSO/?page=gallery" rel="ugc">http://www.col-b.uk/SLSO/?page=gallery</a><br />
<br />
My requirements: A responsive image gallery using flexbox with assorted size and shaped photos. &nbsp;Nice-to-have: loaded dynamically.<br />
<br />
My problem: trying to understand how srcset and flex fit together. &nbsp;For srcset, do I have to know in advance the sizes of the photos in each place? &nbsp;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. &nbsp;I have separate folders of low, medium and high-res photos.<br />
<br />
What is the best practice in this scenario? &nbsp;<br />
<br />
Cheers,<br />
<br />
&nbsp; Col
</div>
</div>


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

A responsive image gallery using flexbox

Flex CSS

Photo and imaging software is used to edit and compose raster images; Adobe Photoshop, which dominates the market, has its own topic. Common actions include cropping, slicing, retouching, color replacement, masking and erasing. Other programs include Apple Photo, Corel PaintShop Pro, GIMP, Serif PhotoPlus, Pixlr, PhotoScape, Picasa and IrfanView.

Images and Photos

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

HTML

PHP is a widely-used server-side scripting language especially suited for web development, powering tens of millions of sites from Facebook to personal WordPress blogs. PHP is often paired with the MySQL relational database, but includes support for most other mainstream databases. By utilizing different Server APIs, PHP can work on many different web servers as a server-side scripting language.