Flickr Widget

Flickr Widget

The Flickr widget pulls a public photo stream from Flickr and renders it as a masonry photo grid with lightbox support. Canvas loads the plugins.flickrfeed.js helper on demand and builds each item from a fixed template, so you only supply the feed ID and a count.

Structure

Add the .flickr-feed class to an empty container. Canvas combines it with .masonry-thumbs and a Bootstrap grid so the fetched thumbnails lay out as a responsive gallery. The customjs class marks it for deferred init.

<div id="flickr-widget"
	class="flickr-feed masonry-thumbs grid-container row row-cols-4 customjs"
	data-id="613394@N22"
	data-count="16"
	data-type="group"
	data-lightbox="gallery"></div>

Wrap it in a .widget for use in a sidebar:

<div class="widget">
	<h4>From Flickr</h4>
	<div class="flickr-feed masonry-thumbs grid-container row row-cols-4 customjs"
		data-id="613394@N22"
		data-count="9"
		data-type="group"></div>
</div>

Setup

The container is empty in your markup. Canvas fetches the feed and injects each photo as a lightbox link. Every generated item follows this template:

<a class="grid-item" href="{{image_b}}" title="{{title}}" data-lightbox="gallery-item">
	<img src="{{image_s}}" alt="{{title}}" />
</a>

{{image_s}} is the small thumbnail shown in the grid and {{image_b}} is the large image opened in the lightbox.

Options

Set these data-* attributes on the .flickr-feed element. These are the exact attributes the module reads:

Attribute	Purpose	Default
data-id	Flickr feed ID (user NSID such as 613394@N22, or a group ID). Required, the widget does nothing without it.	none
data-count	Number of photos to fetch and display.	9
data-type	Set to group to read a group pool feed. Any other value (or omit) reads a public user photostream.	user photos

Internally data-type="group" maps to the groups_pool.gne Flickr feed API, and anything else maps to photos_public.gne.

Tips

• Always set data-id. Without it the widget silently exits and renders nothing.
• Pair .flickr-feed with .masonry-thumbs and row row-cols-* to control how many columns of thumbnails appear.
• Because items are injected as data-lightbox="gallery-item" links, the lightbox is wired automatically once images load.
• After the feed loads, Canvas reinitializes the masonry grid so newly injected thumbnails settle into place. Keep the customjs class so this deferred init runs.
• data-count is capped only by what the Flickr feed returns, so request a realistic number for a sidebar (9 to 16 works well).