![[Rockland hand logo]](/animhand-c8t.gif)
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...
I recently stumbled upon a little 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...
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.