Flickr is a great site for hosting and sharing photos publicly.

About Flickr

The commercial business by Yahoo comes with web and mobile photo editing facilities, a wide range of selectable licenses, slideshow features, an API and a healthy community. Flickr is in good public perception. With 3.5 million new images uploaded daily, it is certainly one of the largest image hosts. Most of its services are for free and I never felt the need for a paid account.

Embedding images from Flickr

The embed feature offers two options for embedding images into a page:

• Static linking using the <img> tag (HTML)
• Embedding an interactive <iframe> (embed), which, in fact, embeds a slideshow

Let’s have a closer look at the iframe offered for embedding:

1
2
3
4
5
6
7
8

<iframe
  src="https://www.flickr.com/photos/rillke/15282064709/in/set-72157648078805150/player/"
  width="640"
  height="480"
  frameborder="0"
  allowfullscreen webkitallowfullscreen mozallowfullscreen
  oallowfullscreen msallowfullscreen>
</iframe>

The *allowfullscreen attributes are there to allow visitors to open the slideshow in full screen mode.

Full width images on dynamic, responsive layouts

The only weakness is the fixed width and height. What about responsive designs, mobile devices? What about Full-HD screens? Wouldn’t it be a great opener for your page or post? Here is how:

It is fairly simple to change its size dynamically, so it uses a specified percentage of the available width inside its container and preserves its aspect ratio, using purely CSS.

Hurray! Eeek, wait, really? There is a hardcoded aspect ratio and the CSS code will have to be placed into a style tag or onto a loaded stylesheet. The reason is the :after pseudo-element, which naturally does not exist and therefore has no adjustable style attribute. Well, this is certainly a clean way and if your images all share the same aspect ratio, or you have a limited set of aspect ratios, not a big deal. Still, one could go the not-so-clean way utilizing a dummy element, dropping the aspect ratio from the style tag and throwing it into the style attribute of that dummy:

Wait. What about image quality while increasing the ifame’s size?
We are in safe hands: Interestingly, Flickr considered that and will load a bigger image on demand.

Statically linked images (also known as hotlinking) are a little trickier to treat because they will not automatically load higher resolution versions. That is where we’ll have to bring JavaScript into play.

JavaScript resize event handling

I wrote a script that will do resizing for both, iframes and images in <img> tags.

Use it as follows:

• Replace entry-content with the class of the parent element of the <iframe>s or images.
• Add the classes rlk-autosizeand rlk-fullwidth to all images and iframes that should take the full width of their container and preserve their aspect ratio.
• Add a data-sizes attribute to the <img> tag containing a JSON formatted map of sizes to path parts where a path part is the part between the first underscore and the .fileextension.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<iframe
  class="rlk-autosize rlk-fullwidth"
  src="//www.flickr.com/photos/rillke/14939106903/in/set-72157646495502983/player/"
  width="640" height="271"
  frameborder="0"
  allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen>
</iframe>
<a href="//www.flickr.com/photos/rillke/15282064709" title="Ilhabela by Rainer Rillke, on Flickr">
<img
  class="rlk-autosize rlk-fullwidth"
  src="//farm3.staticflickr.com/2948/15282064709_d93402d639_z.jpg"
  width="640" height="480"
  alt="Ilhabela"
  data-sizes='{"240":"d93402d639_m","320":"d93402d639_n","500":"d93402d639","640":"d93402d639_z","800":"d93402d639_c","1024":"d93402d639_b","1600":"28680b1641_h","2000":"a3523f02e3_o"}'>
</a>

How about a live example? Check out Brazil in Pictures.

Where to go from here?

A cool feature would be a routine querying the Flickr API for other resolution, omitting the need to add all resolutions into a data-sizes attribute.