Flickr have, in their infinite wisdom, decided to change the HTML code in their sharing photos option. They used to have an option to embed, or grab the HTML, now, if the new features has been rolled out to your account, you can only HTML embed by default, once the script has loaded properly, you’ll see a flickr logo, the name of the person whose photostream the image is from, the name of the photo and the description.
The reason for this is explained in a forum post, [Official Thread] New version of Flickr’s embed code :
Today we’re excited to start rolling out a new version of our HTML embed code, with more visible attribution of the photo owner and enhanced features.
This new code brings the features of the “iframe” web embeds and the compatibility of standard HTML image embeds together into a single code.
The way we’re accomplishing this is through “progressive enhancement.” This means that at the core of the new embed, we start with the same HTML image tag that has always been on Flickr, and if supported, we load the more sophisticated, enhanced embed. If the “fancy” embed isn’t supported or something goes wrong, the standard image will still load.
We’ve already been using the new embed code for months on the Flickr Blog… maybe you’ve noticed? Now we’re ready to roll this feature out to everyone, and we’d love your feedback.
The feedback has arrived, and the natives aren’t exactly jumping with joy. The problems are numerous, but they include images not aligning correctly, slowing down site loading, people complaining that it all distracts from the image, the fact that some people don’t name their photos and more. Do not despair if you have had these changes foisted upon you and you don’t like them, it’s only code and code can be edited. First of all, let’s take a look at that new code.
The new code looks something like this :
<a data-flickr-embed=”true” data-header=”true” data-footer=”true” href=”https://www.flickr.com/photos/ciaran_laval/19394921811/in/dateposted-public/” title=”Crestwick Petrol”><img src=”https://farm1.staticflickr.com/345/19394921811_7e8e68c177.jpg” width=”500″ height=”294″ alt=”Crestwick Petrol”></a><script async src=”//embedr.flickr.com/assets/client-code.js” charset=”utf-8″></script>
A quick way to remove the clutter is to change the parts of the code that say “true” and change it to “false”. However I’m not happy with that because it’s still in a script that really isn’t needed to display images. I want the old code back and I can do that because I know from posting previous images, what the old code looks like, so I’m going to remove :
- data-flickr-embed=”true” data-header=”true” data-footer=”true” (keep the opening bracket and the first a)
- /in/dateposted-public/
- <script async src=”//embedr.flickr.com/assets/client-code.js” charset=”utf-8″></script>
Now after removing all that, my code looks like this :
<a href=”https://www.flickr.com/photos/ciaran_laval/19394921811/” title=”Crestwick Petrol”><img src=”https://farm1.staticflickr.com/345/19394921811_7e8e68c177.jpg” width=”500″ height=”294″ alt=”Crestwick Petrol”>
When I paste that code into my blog, I get this :
No clutter, no waiting for the frame to load, it works and it complies with Flickr’s community guidelines because I’m linking back to the photo page, which is what you would expect because I’m basically using the old style of HTML code that Flickr provided.
However that was all a bit cumbersome and the more images you post, the more annoying it will get. Another option, depending upon your blogging platform, is to grab link instead of HTML embed. On WordPress I add media, than click insert from URL and then paste the link in :
With WordPress, this complies with Flickr’s community guidelines because the image does link back to the photo page. However I’m relying on the image to auto size correctly and I’m not so comfortable with this method.
There are other methods, which I won’t recommend, such as inserting the direct image link and then creating a link from that image back to the photo page. This method is likely to see people circumventing Flickr’s community guidelines as people won’t link back, I’m not even sure if inserting the direct image breaches their guidelines anyway.
Embedding is popular, Twitter, YouTube, Facebook all provide embedding features. YouTube works quite well, Twitter and Flickr cause paragraph hell, which means I have to add paragraphs to my blog post instead of enjoying the beauty of auto paragraphs. This just makes blogging more cumbersome and more time consuming.
The easy solution to the Flickr woes is for Flickr to just put the old code back, but I won’t hold my breath waiting for them to do so, once these companies get an idea in their heads they seem determined to resist the easy road home.
Thanks. It works !