Flogr & Max-Width/Max-Height in IE6
This post is old - it only took a few days for me to find a better alternative. 
In trying to find a decent photo gallery for this site, I have considered many different options, including a standalone gallery, a wordpress plugin, a link to Flickr etc. None of them seemed appropriate for one reason or another. For example, i want the photos on my site because i don’t like the layout of Flickr for the uninitiated (family members often end up on photos of Alaska “how did you get there?!” etc…) but i didn’t want a standalone gallery (maintaining two galleries?!) so the best idea seemed a way of integrating Flickr into this site. There are a few ways to do this from a flash based flickr slideshow (too limited) to about 20 Flickr/Wordpress plugins (most of which are overly complicated or expect you to insert photos manually etc).
However, i eventually stumbled upon Flogr - a Flickr powered photoblog. Its perfect. Its standalone in that it will be separate enough from the main blog, but easy to link to and from. It will show my photosets how i want, it makes use of Slimbox (Lightbox clone) and it even shows exif data and comments for each image!
The only trouble i had, which in my opinion is the only drawback is the fact that on the front page the image pulled from Flickr is the largest available. I read there may have been problems for non pro-account users, and also the “fix” is (imho) flawed. The “fix” is to limit the max width and max height of each image, which is not great for two reasons.
- The user will still have to download the large image which is resized by the browser. It doesn’t affect me, its Flickr’s bandwith after all, but it will slow down the experience for users on a slow connection.
- Max-width and max-height don’t work in IE6. I know a large proportion of web users still use IE6 (my parents and relatives, who I actually want to view this blog for example).
In turn, there is a “fix” to force IE6 to do something similar to max-width/max-height, although you have to be careful because you have to make sure IE6 only resizes the longest side, or you get all sorts of squashed shit going on
.photo {
max-height: 500px;
max-width: 500px;
height: expression(this.height > this.width && this.height > 500 ? '500px' : true);
width: expression(this.height < this.width && this.width > 500 ? ‘500px’ : true);
}Anyway, this aside, Flogr is brilliant, and well recommended over the similar Satellite.
Filed by Kieran at September 14th, 2007 under Blog, Code, Photography