I recently stumbled upon a little demo showing how simple it is to construct an "adaptive layout image wall" using CSS Flexbox. And I thought it would be fun to combine the techniques with a feed from my own Flickr gallery...

Unlike the demo on CSS-tricks, which dynamically adapts itself to screen/browser dimensions or column width, my blog has the advantage (and disadvantage) to be fixed width. So I have further simplified the CSS-code in my "Flickr Wall" below, which displays latest additions to my "FlickrBadge album" on Flickr.
Update March 2021: My blog used to have a fixed width layout, but I have now made column-width "slightly responsive". But still I do not find it necessary to add any of the viewport optimizations from css-tricks post.

Feeds from Flickr is generally not only available in the usual RSS and Atom formats, but among other formats also available in JSON and JSONP format. For the pure-frontend implementation here, JSONP was the natural choice to avoid cross-origin errors. Complete source-code (CSS, Javascript and HTML) for my implementation follows below the wall...

I have decided to start writing at least some of my posts in English. For a period my Google+ profile was working as a nice English supplement to Rockland in Danish, and after Google+ was shut down, I have missed the larger target group of English postings. So here we go... I should of course also update navigation/UI on this site to be in English, but one step at a time...

CSS:

<style>
ul#fwall {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style-type: none;
}
ul#fwall li {
  height: 195px;
  flex-grow: 1;
  margin: 0; /* To reset value set in my global stylesheet */
}
ul#fwall li:last-child {
  flex-grow: 10;
}
ul#fwall img {
  max-height: 100%;
  min-width: 100%;
  object-fit: cover;
  vertical-align: bottom;
}
</style>

Javascript:

<script>
let fwitems = null;
function flickrWall() {
  if (fwitems) {
    let fwall = document.getElementById('fwall');
    fwitems.forEach(function(item) {
      let elem = document.createElement('li');
      let link = document.createElement('a');
      link.setAttribute('href', item.link.replace('/in/set-369431','')); // Remove the "/in/set-369431" because I want links to be in "photostream context", not in "album context".
      link.setAttribute('title', item.title);
      elem.appendChild(link);
      let image = document.createElement('img');
      image.setAttribute('src', item.media.m.replace('_m.','.')); // Default photos in feed are 240px wide XXXX_m.jpg photos, but I want the 500px wide XXXX.jpg photos.
      image.setAttribute('alt', ' [Image: ' + item.title + '] ');
      image.setAttribute('loading', 'lazy');
      link.appendChild(image);
      fwall.appendChild(elem);
    });
    fwall.appendChild(document.createElement('li')); // End with an empty item.
  }
}
function jsonFlickrFeed(photos) { // Function to be called from JSONP feed (https://www.flickr.com/services/feeds/photoset.gne?nsid=10259776@N00&set=369431&lang=en-us&format=json&nojsoncallback=0)
  fwitems = photos.items;
  window.addEventListener('DOMContentLoaded', flickrWall, false);
}
</script>
<script defer src="https://www.flickr.com/services/feeds/photoset.gne?nsid=10259776@N00&set=369431&lang=en-us&format=json&nojsoncallback=0"></script>

HTML:

<ul id="fwall">
  <!-- Photos will be inserted here -->
</ul>

PS: I have noticed that some very aggressive privacy blockers (read: Ghostery) might block reading the JSONP feed. If that happens, there's no delicious photos to be seen...

Update January 2021: I have made different wall implementation with adaptive width showing new additions to a Flickr group, on my otherwise pretty dead Planet 7D site.

Comments

Write a comment... 

 

Thanks for making this! Just tried it out and it still works well in 2024. Especially appreciate that you handled removing the "_m", I didn't even realize that was an option. Pity that Flickr doesn't set CORS headers.

Write a comment... 

Only Name and Comment are required fields when commenting here. If you specify your email address, everyone will be able to find it at your comment. However your email will only be directly visible when hovering over your name, and in the code behind it will not look like an email address. So the risk of bots harvesting email addresses here, should be minimal. But again, you are free to leave the email blank when commenting.

If you tick Remember me, your name, email and homepage address will be remembered and prefilled at your next visit (Uses a cookie when ticked).

Full URLs (starting with "http://" or "https://") in comment text will be converted into active links when comment has been verified by a human as not being spam. Comments that looks too much like spam, will immidiately/proactively be rejected by the system and never reach a human eye.