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. JSON er brugt til den backend-implementerede "widget" i højre spalte, men 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','')); // Fjern "/in/set-369431" fordi jeg ønsker links i "photostream kontekst" i stedet for album kontekst.
      link.setAttribute('title', item.title);
      elem.appendChild(link);
      let image = document.createElement('img');
      image.setAttribute('src', item.media.m.replace('_m.','.')); // Default fotos i feed er de 240px brede XXXX_m.jpg fotos, men jeg vil hellere have de 500px brede XXXX.jpg fotos.
      image.setAttribute('alt', ' [Image: ' + item.title + '] ');
      link.appendChild(image);
      fwall.appendChild(elem);
    });
  }
}
function jsonFlickrFeed(photos) { // Funktion som kaldes fra 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('load', 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">
  <!-- Heri indsætter script billeder som liste-elementer -->
</ul>

Det er meget muligt jeg justerer koden lidt den kommende tid. Specielt måske for at undgå situation hvor et enkelt billede skal fylde hele den sidste linie (som forlægget også har lavet en work-around for). Men det er da en fin start, omend lidt større spaltebredde nok havde givet lidt mere fleksibilitet i hvor mange billeder browseren propper ind pr. linie, og dermed især måden den viser højkants billeder...

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 :-/ ...