Flcikr Liquid Photo Page Layout Adjusts the Photo Page and Image Size Based on a Browser Window

A new "liquid" layout for Flickr released today - adjusts the photo page and image size based on the size of your browser window. With that your photos will look great on a laptop screen, and look even more stunning on larger screens. "Starting today, we will display the biggest photo that we can on […]

A new "liquid" layout for Flickr released today - adjusts the photo page and image size based on the size of your browser window. With that your photos will look great on a laptop screen, and look even more stunning on larger screens.

"Starting today, we will display the biggest photo that we can on the photo page for your monitor. As you use the new liquid photo page, you may notice that the page content doesn't always fill the entire viewport. This is because we created an algorithm for taking the width and height into account that will display content at a width that will best showcase the most common photo ratio, the 4:3," explains flickr.

With the new 'liquid' design, you can:

  • "The biggest photo size is shown depending on your browser window
  • There is absolutely no "upscaling", and we try to avoid downsampling as much as possible.
  • The title and the sidebar are visible without scrolling on landscape oriented photos. (which are the vast majority of photos on Flickr.)," flickr said.

In addition to the new liquid layout, flickr also introduced today new photo sizes to its API and in the "All Sizes" menu.

Flicrk Liquid Photo Page Layout

Explaining the algorithm for the new layout, flickr said,

"We adjusted the algorithm to favor native sizes, even if that means a slightly smaller photo is shown. We coded in detents, so that if a photo size is within 60 pixels of a native size, we will just use that size instead of downsampling a larger one. This means the page loads faster and that most common monitor resolutions will see photos at the native size.

Now that the algorithm is complete, we need to work on the performance. We noticed that reading the viewport dimensions and resizing the page every single time you go to a photo is unnecessary and distracting (since the page loads with a width of 960 and must be adjusted after the JavaScript loads on the page). To fix this, we cache the viewport dimensions in a cookie that can be read by the PHP code that generates the page. The first time you go to a liquid photo page, we have no choice but to adjust the page width on the fly. But every other photo page you visit will have the dimensions stored from the last page, and the page will be rendered with the correct width from the start."