I accept that I like images in my blog posts. Even in coding related posts, I add a feature image at the top. That’s me. So, when Getty Images came up with this awesome feature of embedding their commercially available images in blog posts, I was thrilled and quickly updated some of my posts and included their images. It was swift and fine as far as process was concerned, no complaints. Also, Getty’s images look professional. But, while reading some posts related to this move of Getty, I came across some comments not so positive about them.
With a little search I found that Getty is very particular about their licenses and that they sued some people earlier. Concerned, I went through their policy, which said free images are for non-commercial use (a not-so-concrete term) and they could display advertisements in the images without any notice. I didn’t feel ok about it and I removed the images from my posts. Now what?
I wanted images in my blog posts. I turned to Flickr. There are many ways you can embed images from Flickr in your posts on WordPress. For self-hosted WordPress, you have plugins which make life easy. But we will talk about WordPress.com hosted blogs because that’s where my blog is and I wanted images in the posts on this blog.
First let’s see what my target was. I wanted to embed CC/NC images from Flickr in my posts. CC license requires you to properly credit the image source. I wanted to do this in some automatic way. You search image on Flickr with “Creative Commens License” and then try to embed image of your choice in your post. Flickr provides different ways in which you can share images from Flickr to WordPress.com hosted blog. Following are the ways and the reason why they did not work for me:
- Share via WordPress: Connect your WordPress blog from Flickr through Sharing and Extensions available in Settings. You could directly create an image post about a chosen image with title and description, and publish the post. The good thing about this approach is that it properly adds credit link and title of the image in an HTML div element.Why this did not work: You cannot use this approach to embed an image in your blog post. It only directly creates the image post. I tried to search for an ability to post the image as Draft to WordPress (you can do this with Self-hosted WP with a plugin) but I could not find any solution. My idea was to then grab the html code from the draft image post and paste it in the post.
- Share > Grab A Link: Gives a bare-bone link to the image.Why this did not work: Every time you add a link, for credit etc. you will have to write your own HTML code in the post.
- Share > Grab HTML/BBC Code: Gives three options – Embed with iframe, HTML with anchor, and BBCode.Why this did not work: Embed with iframe does not work in WordPress.com posts because of iframe. HTML anchor with image, again, does not provide credit link. I do not know about BBCode but it does not work in WP posts either.
I just wanted to have HTML code generated by “Share via WordPress” option, which I could paste in my post. I couldn’t get it. I decided to grab the HTML with anchor and then massage it and create the HTML div code similar to “Share via WordPress”. So I created this small utility. This is how it works: search an image on Flickr, grab HTML code, run the utility, paste the grabbed HTML code in the text box, and click on “Prepare” button. Your clipboard will have the proper HTML code with div and credit, almost similar to one generated by “Share with WordPress” option. Ctrl+V this code in your post.
How To Run the Utility: Requires .NET 3.5 or later, and of course for Windows 7/8. Grab the package from here. Unzip it somewhere. Navigate to FlckrToWP\FlckrToWP\bin\Debug and run FlickrToWP.exe. Grab the HTML code from Flickr and copy it in the TextBox. Click “Prepare”. Your clipboard has the code. Paste it in your post.
Update: Seems Chrome considers OneDrive an unsafe location and terms the zip as Malware. Maybe because it has an executable. If you believe me that it’s not a malware, right click on the link above and copy it, and then paste it in IE. In my case IE had no problem downloading it. You can always scan it before unzipping and confirm.