I recently had need to embed a Flickr album, as I've done many times before. When I published the article, however, the album was broken and only showed a single image. Odd, sure, but I figured I had just copied the wrong embed code; an hour later and I was fairly certain I hadn't.
The Problem
What I wanted was a gallery that showed all the photos in the Flickr album in order, with left and right arrow-buttons for navigation. Something like this:
Looks great, simple to use and what I've always had when using the Flickr embed codes in the past. The problem, though, was that instead of a nice gallery I just had this:
Looks similar, but it's just a static image linked to the album page on my Flickr profile; there's no way to scroll or navigate through the photos. Weird right! A few hours Googling around the subject later and the bad news is that the issue is frequently encountered, but not consistent, so doesn't appear to be considered as a bug. The good news, though, is that you can manually force an embed code to behave in the 'correct' way, you just need to know how.
How to Fix It
Full thanks should be directed at Flickr user studyabroadwmu who posted the missing piece to the puzzle in a Flickr support thread last year.
The trick is noticing the seemingly innocuous difference in the anchor tag of the embed code generated for the two albums above:
<em><a title="Kew Gardens & Science Museum" href="https://www.flickr.com/<strong>photos</strong>/161720506@N06/<strong>albums/72157669</strong>217526758" data-flickr-embed="true" data-footer="true"></em>
As opposed to:
<em><a title="Kew Gardens & Science Museum" href="https://www.flickr.com/<strong>gp</strong>/161720506@N06/<strong>y5R7Wu</strong>" data-flickr-embed="true" data-footer="true"></em>
Why the bottom embed code was generated using some kind of URL shortening is not clear, but that's the root of the issue. Want to fix it, just open the album in Flickr and take a look at the URL in the browser bar, which in this case would be:
<em>https://www.flickr.com/photos/161720506@N06/sets/72157669217526758/</em>
Now copy that and paste it over the value of the href attribute and, hey presto, you should have a working embedded gallery once again!
