Skip to content

Instantly share code, notes, and snippets.

Created November 28, 2014 17:58
Show Gist options
  • Save Rillke/e83b06b4729b2786a6d8 to your computer and use it in GitHub Desktop.
Save Rillke/e83b06b4729b2786a6d8 to your computer and use it in GitHub Desktop.
* Copyright 2014 by Rainer Rillke
* Makes sure Flickr iframes and images always look great.
* You may use and re-distribute and modify this file, povided
* that the above copyright notice and this text will be
* preserved.
* This software comes without any warranty.
* You may also use it under the terms of the JSON license.
(function() {
'use strict';
var flick = {
elements: null,
getUrlForSize: function(sizes, width, originalUrl) {
if ('string' === typeof sizes) sizes = JSON.parse(sizes);
var last = {
width: 0,
diff: Infinity,
url: ''
$.each(sizes, function(k, v) {
var n = Number(k);
var diff = n - width;
if (diff > 0 && last.diff > diff
|| (last.diff === Infinity)
|| (last.diff < 0 && diff > last.diff)
) {
last.width = n;
last.diff = diff;
last.url = v;
return {
newMaxWidth: last.width,
newUrl: originalUrl.replace(/[a-f0-9]+_\w(\.\w{1,9})$/, last.url + '$1')
handleResize: function() {
if (!flick.elements) {
flick.elements = $('.rlk-autosize');
var $elements = flick.elements,
$fullWidthElements = $elements.filter('.rlk-fullwidth'),
maxWidth = $('.entry-content').innerWidth();
$fullWidthElements.each(function() {
var $elem = $(this),
w = $elem.attr('width'),
h = $elem.attr('height'),
sizes = $'sizes'),
wToH = w / h,
newH = maxWidth / wToH;
switch ($elem.prop('tagName')) {
case 'IFRAME':
.attr('width', maxWidth)
.attr('height', newH)
.attr('src', $elem.attr('src'));
case 'IMG':
var newValues = flick.getUrlForSize(sizes, maxWidth, $elem.attr('src'));
.attr('width', maxWidth)
.attr('height', newH)
.attr('src', newValues.newUrl);
$(function() {
$(window).resize( flick.handleResize );
Copy link

Rillke commented Nov 28, 2014


  • Replace entry-content with the class of the parent element of the <iframe> or image.
  • 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.

A usage example would look like this:

  class="rlk-autosize rlk-fullwidth"
  width="640" height="271"
  allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen>
<a href="//" title="Ilhabela by Rainer Rillke, on Flickr">
  class="rlk-autosize rlk-fullwidth"
  width="640" height="480"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment