Jeg stødte nylig på en lille demo der med utrolig lidt kode, kunne lave en en billed væg med dynamisk tilrettet layout baseret på css flexbox. Og tænkte at den ville jeg prøve at kombinere med et feed fra mit Flickr galleri...

Til forskel fra demoen på css-tricks, som dynamisk tilpasser sig skærm-størrelse og format, har jeg her i bloggen den fordel (og ulempe) at være bundet af en fast bredde. Så css koden er tilpasset dertil. Og jeg har så taget et feed af seneste tilføjelser til mit "FlickrBadge" album, som er samme album min "Flickr widget" i højre spalte læser fra. Feeds fra Flickr kan dels fås i de sædvanlige Atom og RSS formater, men også i bl.a. JSON og JSONP. Til denne client-side implementering i javascript, er JSONP valgt for at undgå cross-origin fejl.

Kildekode følger efter væggen. Det var ikke særlig meget der skulle til...

CSS:

<style>
ul#fwall {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style-type: none;
  width: 690px;
}
ul#fwall li {
  height: 195px;
  flex-grow: 1;
}
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 "/in/set-369431" because I want links in "photostream context", not "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 + '] ');
      link.appendChild(image);
      fwall.appendChild(elem);
    });
    fwall.appendChild(document.createElement('li')); // End with an empty item. See flickrWallEndAdjust().
  }
}
function flickrWallEndAdjust() {
  let fwall = document.getElementById('fwall');
  if (fwall.offsetWidth === fwall.lastChild.offsetWidth || fwall.lastChild.offsetWidth < 75) {
    fwall.removeChild(fwall.lastChild); // if last (empty) item fills a full line - or only takes very little space on last line, remove it.
  }
}
function jsonFlickrFeed(photos) { // Function 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);
  window.addEventListener('load', flickrWallEndAdjust, 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 to be inserted here -->
</ul>

Lidt større spaltebredde havde nok givet lidt mere fleksibilitet i hvor mange billeder browseren propper ind pr. linie, og dermed især måden den viser højkants billeder på. Men det er da ikke så ringe endda for så lidt kode?...

PS. Bemærk at nogle meget aggressive ad-blockers (Ghostery) tilsyneladende kan finde på at blokere JSONP feed'et. Og så er der ingen lækre billeder :-/ ...