Flickr Image Embed Code Change

Flickr™ has changed the embed code they provide people for displaying Flickr images. That meant I had to change how I embed their images in the blog. I’ll explain some of what you can do with the new embed code. There is a discussion at Flickr about the new code here: New version of Flickr’s embed code.

City of the Ancient Gods

City of the Ancient Gods

Surely, you have noticed I use more Flickr images these days. It saves me time and there are so many gorgeous images from Second Life™. Taking the time to find gorgeous places and get great photos… it was becoming work. Embedding an image is easier. 

There are copyright issues. But, read the Flickr Terms of Service (ToS). Flickr essentially owns the images and with the new embed codes can show off most of the non-private images. There are those ‘All Rights Reserved’ images they won’t provide embed code for. So, it makes for fast decisions on which images can or cannot be used. If there is an embed code, use it.

Flickr Embed Control

Flickr Embed Control

Ciaran Laval has also written about this problem. See his hopeful article: How To Fix Flickr’s Embedding Mess (Whilst We Await Flickr Providing A Solution). I don’t expect Flickr to revert to the previous code as Ciaran hopes.

Below is the Embed code for a ‘All Rights Reserved’ image. All you can get is a link to a Flickr page with the image showing. The image will not display on your site. You can however, write your own code using what I have here as a template. All you need is the image link from the Flickr site. BUT… you will then be violating copyright law and taking on a huge liability. I haven’t checked to see if they have blocking code in place to prevent such use.

Flickr Embed Tool for 'All Rights Reserved' Images

Flickr Embed Tool for ‘All Rights Reserved’ Images

So, what is the code they give you? Example:

<a data-flickr-embed="true" data-header="true" data-footer="true"  href="https://www.flickr.com/photos/aelinquan/5764478987/in/faves-36590093@N07/" title="The Clock">
<img src="https://farm4.staticflickr.com/3003/5764478987_ec0e357797.jpg" width="500" height="350" alt="The Clock">
</a>
<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

This is the new embed code that started showing up in July 2015 (6th ?). This is HTML5 markup text, the text that tells the browser how to display the page. You can right-click in the browser to and select View Source to see all the markup.

The first tag (<a…) I have marked in red text. It is an anchor tag that provides a link to the image at Flickr’s site. To legally display the image you need to have the link working.

Notice the ‘</a>’ later in the markup. This is the closing part of the tag. It is like opening and closing quotes to tell the browser where to start and stop a style. Because the tag surrounds the image tag (<img…) the image becomes the click target, the thing you click on.

The image tag is in blue-ish text. This is all that is needed to display the image. But, using just the image code would violate Flickr’s ToS.

Following in yellow-ish text is a call to a script. This tells the browser to get and run Flickr’s Javacript. The script causes the image to appear with a header and footer.

Flickr Embed w/Fancy Header & Footer

Flickr Embed w/Fancy Header & Footer

Showing ‘Fancy’ Embed Header and Footer.

Whether or not the header and footer display are ‘attributes’ in the anchor tag (<a…);

  • data-flickr-embed=”true”
  • data-header=”true” data-footer=”true”

You can change ‘true’ to ‘false’ and stop the display of the white header and/or footer. Then the image appears like:

Flickr Embed w/Fancy Header & Footer Disabled

Flickr Embed w/Fancy Header & Footer Disabled

The white Flickr text fades after a few seconds. You can eliminate this behavior or the header and footer by removing the entire <script> tag. If you do, to be compliant with the Flickr ToS and copyright requirements you will need to add the artist’s or image owner’s name and indicate the image is on Flickr, unless the image is yours.

If you leave the script in any image’s embed code on a page, it will put a header & footer on any Flickr image in the page. I think it is targeting anchor tags with the data-flickr-embed attribute. I have yet to experiment with the attribute to  see what I can get it to do. In my preliminary tests setting it to false did nothing.

WordPress Use

You’ll be able to see I still put a caption and border around my images. I use the WordPress ‘caption’ tag to do that. A Flickr embed and WordPress caption is made with markup that looks like this:


[caption id="" align="aligncenter" width="500"]
<a data-flickr-embed="true" data-header="false" data-footer="false"  href="https://www.flickr.com/photos/109547095@N05/19563099425/in/pool-thesexiest/" title="True love">
<img src="https://farm1.staticflickr.com/443/19563099425_80e5142be2.jpg" width="500" height="358" alt="True love">
</a>
<script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>True love
[/caption]

The yellow text is WordPress’ tag that causes the needed markup code for the border to be generated. The image title ‘True Love’ is required text. There must be some text between the closing anchor tag ‘</a>’ and the closing caption tag ‘’. The script tag doesn’t count as text. No text = no caption.

Since I write in Word, I have a Word Option in Proofing – Auto Correct that turns the text [cap] into [caption id=”” align=”aligncenter” width=”500″]. I can then paste the Flickr embed code into the caption tag. A couple of more copy-paste clicks and I have my Flickr image set up.

 

One thought on “Flickr Image Embed Code Change

Leave a Reply

Your email address will not be published. Required fields are marked *