Adding Flickr Images to Sitecore Content

This past weekend I participated in the Sitecore Hackathon along with a few other people here at Velir.  My teammates (@distaula, @soyburgers) and I decided to build a tool that would allow content editors to embed media from external sources into their rich text areas.  We chose Flickr to start with due to its popularity with our clients and its accessible API, via the Flickr.NET library.

Our Sitecore module adds a new button to the default Rich Text Editor ribbon that allows authors to search for images on Flickr and embed them into their website content.  The button opens a modal window containing a search field, which searches for Flickr images by tag.

Flickr search dialog

The author can scroll through these images, and the next page is loaded automatically when the author scrolls to the bottom of the list. Clicking any of these images presents the author with a form to configure the image embed, selecting the image size, css class and alt text, and whether or not to wrap the image in a link.

Flickr module form

After configuring the image to their liking, the author can click Embed Image to add their configured image to the rich text editor.

flickrmodule_embed

The module produces an image tag that is embedded into the HTML of the rich text field.

<img alt="a cloud" class="my-img-class" src="https://farm4.staticflickr.com/3902/14828515897_7a39070eae.jpg" />

I’d like to take some more time to polish up this module, particularly adding the ability to search a specific user’s album.  This was a feature we were working on but didn’t have time to complete before the hackathon ended.  I’d also like to create a similar button dialog for embedding media from other services, such as YouTube, and turn this into an small suite of tools that can be added to the rich text editor.

Overall the hackathon was a lot of fun, and I’m looking forward to seeing what the other teams have created.

  • Joan Martinez Bolaños

    Hi,

    Do you have any sample code on how you achieved this?

    Thanks