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 |
|
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-autosize
andrlk-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 |
|
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.