Raghu
Joined: 12 Mar 2009
Posts: 29
|
 Posted: Tue Jul 28, 2009 7:27 am Post subject: Find flickr photos using tags from rails |
 |
|
Flickr is an image and video hosting website, web services suite, and online community platform.
Using API key we integrate flickr to our rails application as follows.
(You may need to login to Flickr first.)
You must have an API key to make use of the Flickr API.
You can get api key below url
url: http://www.flickr.com/services/api/misc.api_keys.html
• Click on Apply for your api key
• Click on Apply for a Non-Commercial API Key
Once submitting all required information you will get the following API key and Secret
Sample
Key:
5c211baf9bd705496b21522132c80148
Secret:
bb6500467b1af07f
Click on - Edit key details and select the Authentication Type: Web Application.
Once all the settings have been completed its time to create and rails application.
You must have need Flickr gem, now install the
>gem install flickr
Create a sample rails application for flickr
>rails flickr-demo
Add the following code at the bottom of the environment.rb file
require 'rubygems'
require 'flickr'
MY_KEY='Enter your Flicker API Key'
class Flickr
alias old_initialize initialize
def initialize(api_key=MY_KEY, email=nil, password=nil)
puts "new_initialize " + MY_KEY
old_initialize(api_key, email, password)
@host="http://api.flickr.com"
@activity_file='flickr_activity_cache.xml'
end
end
Add the following rhtml code at application.rhtml in your sample rails application
<html>
<head>
<title>Flickr</title>
<%= javascript_include_tag :defaults %>
<%= stylesheet_link_tag 'flickr' %>
</head>
<body>
<%= yield %>
</body>
</html>
Add the following styles at public\stylesheets\flickr.css
body {
background-color: #888;
font-family: Lucida Grande;
font-size: 11px;
margin: 25px;
}
form {
margin: 0;
margin-bottom: 10px;
background-color: rgb(222,231,236);
border: 5px solid #333;
padding: 25px;
}
fieldset {
border: none;
}
#spinner
{
float:right;
margin:10px;
}
#photos img {
border: 1px solid #000;
width: 75px;
height: 75px;
margin: 5px;
}
Now generate the controller
>ruby script/generate controller flickr
Add the following code to your index.rhtml
<% form_remote_tag :url => {:action => 'search'}, :update => 'photos',
:complete => visual_effect(:blind_down, 'photos'),
:before => %(Element.show('spinner')),
:success => %(Element.hide('spinner')) do %>
<%= image_tag 'spinner.gif', :id => 'spinner', :style => 'display: none' %>
<label for="tags">Tags:</label>
<%= text_field_tag 'tags' %>
<%= submit_tag 'Find' %>
<div id="photos" style="display: none"></div>
<% end %>
Add the following code in your controller.rb
def search
flickr = Flickr.new
if params[:tags].empty?
render :text => '<h2>Please enter a search string</h2>'
else
begin
photos = flickr.photos(:tags => params[:tags], :per_page => '24')
render :partial => 'photo', :collection => photos
rescue NoMethodError
render :text => '<h2>No matching photos found</h2>'
end
end
end
Add the following line in _photo.rhtml
<img class='photo' src="<%= photo.sizes[0]['source'] %>">
restart your server, and try it:
http://localhost:3000/flickr and find the photos using your flickr tags
thanq
Raju |
|
