Flickr album tag demo
As of March 1st 2016, this is no longer actively maintained.
Now version 3.x compatible!
This tag display a full Album from Flickr on your hexo powered blog or site.Please log any issues on github.
Hexo changed the way tags worked between versions 2.x and 3.x. The main difference is that we can now have asynchronous tag renderer. From the doco:
Since Hexo 3, we use Nunjucks instead of Swig for post rendering. They share simliar syntax but Nunjucks provides async rendering.
… which means I am now able to change the awkward flickr rendering the first version used. See, Flickr needs an API call to get album and photo information. Version 1 of this tag injected a script into the renderered HTML, which did all the fetching and transforming. This can now be done by Hexo: less work for the browser, and a more complete HTML file after generating your site.
The drawback concerning this tag? Can’t seem to get the dash in the tag name to work:
flickr-album is now
flickr album, and
flickr-gallery is now
Hexo-tag-flickr was already taken, so… hexo-tag-flickr-album it is.
Add your flickr key to
_config.yml. You can get one on flickr’s developer page.
The album- and gallery ID can be found in the URL of a flickr album. For instance, the set I used for the demo below can be found at:
Which makes 72157648055335157 the album ID.
Defaults to simple when none given.
simple, which just displays all pictures underneath each other. fancybox, use in combination with fancybox. This will load jQuery, Fancybox and Fancybox CSS from cdnjs if not loaded already.
Size, from Flickr. This tag defaults to
b when unspecified:
s small square 75x75
q large square 150x150
t thumbnail, 100 on longest side
m small, 240 on longest side
n small, 320 on longest side
- medium, 500 on longest side
z medium 640, 640 on longest side
c medium 800, 800 on longest side†
b large, 1024 on longest side*
h large 1600, 1600 on longest side†
k large 2048, 2048 on longest side†
Every gallery is loaded into a div with class
flickr-gallery, in case you want to add your own CSS.
Tag usage is slightly different for the older versions of hexo. Setup is the same: add your flickr API key to
Installation for Hexo 2.x
Usage for hexo 2.x
This is an album called “Test” I created in my flickr account, in the “simple” display mode, and has some pictures of beautiful South Bank, Brisbane.
This would display a flickr gallery in fancybox:
Jorg is a SAP and UI5 developer.