This seemingly simple request is actually pretty complex - at least for someone like me that has been away from web development for several years.
Bare with me as I try to process all of this!
So we are loading the _medium photo TWICE?!
While designing this website, I have tried very hard to be mindful of mobile users and also some users who might have limited bandwidth.
Because of this, I store the original _raw.jpg (i.e. 5-6MB) photos in a given gallery, and then in that gallery I have a “_thumbnails” directory where I have a _small.jpg (i.e. 100-150KB) and then a “_photos” directory where I store _medium.jog (i.e. 300-400KB) photos for the “detailed” view which is now this modal view.
The only time a user’s browser should download the _raw.jpg is by clicking on the “Download” link.
I hope we aren’t loading the _medium.jpg twice…
I thought the approach to take was to create a “shrink-wrap container” by creating a table and then having the _medium.jpg be in one cell, and then the text/menu would be in another cell, and the text/menu would adapt to the width of the photo. (Of course just having “Download | Close” would never be wider than the image!)
Can you help me understand this better, and are we sure this is the least bandwith intensive way to do things?
As mentioned above, I have _thumbnails (100-150KB)(200px wide) phtos for the gallery, and then in the “detailed” (modal) view, I have _medium (300-400KB)(800px long side) photos.
Hmm… How does text-align align DIVs? I figured you would need to use table cells to do that or maybe even Floats?
P.S. Do you know where in MDN I can read up more on CSS tables and Display:Table? When I Googled and searched in MDN all I saw where specs and now How-To’s…