design/photo-comments.psd
design/photo-prev-next.psd
public/images/photo-comments.gif
public/images/photo-next-prev.gif
@@ -28,15 +28,24 @@ class Date
end
class Flickr
- def self.photos(method, params={})
- call(method, params)/:photo
+ def self.recent
+ call("search", "per_page" => 9)/:photo
end
- def self.photo(*args)
- photos(*args).first
+ def self.featured
+ call("search", "tags" => "feature", "per_page" => 500)/:photo
+ end
+ def self.photo(id)
+ call("getInfo", "photo_id" => id).search(:photo).first
end
def self.sizes(photo)
call("getSizes", "photo_id" => photo[:id])/:size
end
+ def self.next_previous(photo)
+ featured = featured()
+ [photo, featured].flatten.each {|p| def p.==(other); self[:id] == other[:id]; end }
+ index = featured.index(photo)
+ [index != 0 && featured[index-1], featured[index+1]]
+ end
def self.call(method, params)
res = Net::HTTP.get(URI.parse("http://api.flickr.com/services/rest/?method=flickr.photos.#{method}&api_key=0e5de53043827665f99e9508ce5c40cf&user_id=57794886@N00#{params.collect{|k,v|"&#{k}=#{v}"}}"))
return Hpricot(res) if !res.include?('stat="fail"')
@@ -87,6 +96,12 @@ helpers do
def flickr_url(photo)
"http://www.flickr.com/photos/toolmantim/#{photo[:id]}/"
end
+ def flickr_square(photo)
+ %(<img src="#{flickr_src(photo, "s")}" width="75" height="75" />)
+ end
+ def photo_path(photo)
+ "/photos/#{photo[:id]}"
+ end
end
before do
@@ -139,14 +154,15 @@ get '/projects' do
end
get '/photos' do
- @recent_photos = Flickr.photos("search", "per_page" => 9)
- @feature_photos = Flickr.photos("search", "tags" => "feature", "per_page" => 500)
+ @recent_photos = Flickr.recent
+ @feature_photos = Flickr.featured
haml :photos
end
get '/photos/:id' do
- @photo = Flickr.photo("getInfo", "photo_id" => params[:id]) || raise(Sinatra::NotFound)
+ @photo = Flickr.photo(params[:id]) || raise(Sinatra::NotFound)
@sizes = Flickr.sizes(@photo)
+ @prev_photo, @next_photo = Flickr.next_previous(@photo)
haml :photo
end
@@ -155,15 +171,15 @@ get '/sitemap.xml' do
haml :sitemap, :layout => false
end
-get '/sample-tumble' do
- haml :sample_tumble
-end if Sinatra::Application.environment == :development
-
not_found do
content_type 'text/html'
haml :not_found
end
+get '/sample-tumble' do
+ haml :sample_tumble
+end if Sinatra::Application.environment == :development
+
error do
@error = request.env['sinatra.error'].to_s
content_type 'text/html'
toolmantim.rb
@@ -6,32 +6,50 @@
- @head_content = %(<style type="text/css" media="screen">#body-inner { width: #{large_size[:width].to_i + image_padding * 2}px }</style>)
.photo
- %a{:href => flickr_url(@photo)}
+ %a.main{:href => flickr_url(@photo)}
%img{:src => flickr_src(@photo, "b"), :width => large_size[:width], :height => large_size[:height], :alt => @photo[:title]}/
- - if (title = (@photo/:title).text.strip).length != 0
- - @page_title = "'#{title}' by Tim Lucas"
- %h1
- %a{:href => flickr_url(@photo)}= title
- - else
- - @page_title = "Untitled by Tim Lucas"
+ %h1
+ %a{:href => flickr_url(@photo)}
+ - if (title = (@photo/:title).text.strip).length != 0
+ - @page_title = "'#{title}' by Tim Lucas"
+ = title
+ - else
+ - @page_title = "Untitled by Tim Lucas"
+ Untitled
+
+ .description
- - if (@photo/:description).text.strip.length != 0
- .description
+ - if (@photo/:description).text.strip.length != 0
= (@photo/:description).text.split("\n\n").map {|s| "<p>#{s}</p>"}
- %p.extra
- %a.comments{:href => flickr_url(@photo) + "#DiscussPhoto", :title => "Read and leave comments on Flickr" }
+ %p.comments
+ %a{:href => flickr_url(@photo) + "#DiscussPhoto", :title => "Read and leave comments on Flickr" }
- comments = (@photo/:comments).text.to_i
- case comments
- when 0
No comments
- when 1
- 1 comments
+ 1 comment
- else
== #{comments} comments
- \|
- %a.more{:href => "/photos#featured"} More photos →
%p.license
- License: Nothin.
+ %a{:rel => "license", :href => "http://creativecommons.org/licenses/by-sa/2.0/"}
+ %img{:src => "http://i.creativecommons.org/l/by-sa/2.0/80x15.png", :alt => "Creative Commons License"}/
+
+
+ .more-photos
+ %ul
+ - if @prev_photo
+ %li.prev
+ %a{:href => photo_path(@prev_photo), :title => @prev_photo[:title]}= flickr_square(@prev_photo)
+ %li.current
+ %span= flickr_square(@photo)
+ - if @next_photo
+ %li.next
+ %a{:href => photo_path(@next_photo), :title => @next_photo[:title]}= flickr_square(@next_photo)
+
+
+ %p.more
+ %a{:href => "/photos#featured"} and more…
\ No newline at end of file
views/photo.haml
@@ -1,8 +1,6 @@
- @body_class = "photos"
- @page_title = "Photos by Tim Lucas"
-- def flickr_square(photo); %(<img src="#{flickr_src(photo, "s")}" width="75" height="75" />); end
-- def photo_path(photo); "/photos/#{photo[:id]}"; end
%h1.major Photos
views/photos.haml
@@ -604,48 +604,101 @@ body.photo
:background #000
#body-inner
- :padding-top 20px
+ :padding-top 40px
- .photo img
+ .main img
:border 20px solid #fff
:margin-bottom 20px
h1
:font-size 2.4em
- h1 a, h1 a:active, .description p
- :color #999
-
- h1 a:hover
- :color = #fff
-
-
+ h1 a, h1 a:active
+ :color #fff
+
.description p
+ :color #fff
+
+ .description
+standard_text_size
- :width 40em
-
- .more-photos
- :margin-top 20px
- :font-size 1.4em
+ :max-width 40em
+ :margin-top 0.5em
- p.extra
+ p
+ :margin-top 0.5em
+
+ p.comments
+standard_text_size
:margin 10px 0
:color #333
- a
- &, &:active
- :color #666
+ a
+ :background transparent url(/images/photo-comments.gif) no-repeat top left
+ :padding-left 17px
+ :color #fff
+ :opacity 0.6
+
&:hover
- :color #bbb
-
- p.license
- :float left
- +standard_text_size
- :color #444
+ :opacity 1
+
+ p.license a
+ :opacity 0.6
&:hover
- :color #999
+ :opacity 1
+
+ .more-photos
+ :margin-top 50px
+ :margin-bottom 20px
+ :float left
+ :width 100%
+ :overflow hidden
+ :position relative
+
+ ul
+ :clear left
+ :float left
+ :position relative
+ :left 50%
+
+ li
+ :display block
+ :float left
+ :position relative
+ :right 50%
+
+ &.current
+ :opacity 0.5
+
+ a
+ :display block
+ :opacity 0.5
+
+ &:hover
+ :opacity 1
+
+ &.current
+ :margin 0 10px
+
+ &.prev
+ a
+ :background transparent url(/images/photo-next-prev.gif) no-repeat top left
+ :padding-left 12px
+
+ &.next
+ a
+ :padding-right 12px
+ :background transparent url(/images/photo-next-prev.gif) no-repeat top right
+
+ p.more
+ :text-align center
+ a
+ +standard_text_size
+ :opacity 0.4
+ :color #fff
+
+ &:hover
+ :opacity 0.7
body.photos
h2
views/stylesheets/screen.sass
2619d8dc83c76b2b003481b1beec72bdfe11c34b
Tim Lucas
t.lucas@toolmantim.com
http://github.com/toolmantim/toolmantim/commit/e9e152129474c7ed40d257e63c15ae4ce2a4bd4a
e9e152129474c7ed40d257e63c15ae4ce2a4bd4a
2009-04-12T05:02:00-07:00
2009-04-12T05:02:00-07:00
Added photo to photo nav, other cleanups
ada5bd41a6b691c44ac6c74680af5087270bf601
Tim Lucas
t.lucas@toolmantim.com