Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added integration with responsive images using srcset

  • Loading branch information...
commit f406a47d8a2021a693833da3630a5c57af957007 1 parent 2a16bfd
@kristianmandrup authored
View
3  Gemfile
@@ -1,5 +1,8 @@
source "http://rubygems.org"
+gem 'rails'
+gem 'hashie', '~> 1.2.0'
+
group :development do
gem "rspec", ">= 2.8.0"
gem "rdoc", ">= 3.12"
View
74 Gemfile.lock
@@ -1,15 +1,77 @@
GEM
remote: http://rubygems.org/
specs:
+ actionmailer (3.2.8)
+ actionpack (= 3.2.8)
+ mail (~> 2.4.4)
+ actionpack (3.2.8)
+ activemodel (= 3.2.8)
+ activesupport (= 3.2.8)
+ builder (~> 3.0.0)
+ erubis (~> 2.7.0)
+ journey (~> 1.0.4)
+ rack (~> 1.4.0)
+ rack-cache (~> 1.2)
+ rack-test (~> 0.6.1)
+ sprockets (~> 2.1.3)
+ activemodel (3.2.8)
+ activesupport (= 3.2.8)
+ builder (~> 3.0.0)
+ activerecord (3.2.8)
+ activemodel (= 3.2.8)
+ activesupport (= 3.2.8)
+ arel (~> 3.0.2)
+ tzinfo (~> 0.3.29)
+ activeresource (3.2.8)
+ activemodel (= 3.2.8)
+ activesupport (= 3.2.8)
+ activesupport (3.2.8)
+ i18n (~> 0.6)
+ multi_json (~> 1.0)
+ arel (3.0.2)
+ builder (3.0.0)
diff-lcs (1.1.3)
+ erubis (2.7.0)
git (1.2.5)
+ hashie (1.2.0)
+ hike (1.2.1)
+ i18n (0.6.0)
jeweler (1.8.4)
bundler (~> 1.0)
git (>= 1.2.5)
rake
rdoc
+ journey (1.0.4)
json (1.7.5)
+ mail (2.4.4)
+ i18n (>= 0.4.0)
+ mime-types (~> 1.16)
+ treetop (~> 1.4.8)
+ mime-types (1.19)
multi_json (1.3.6)
+ polyglot (0.3.3)
+ rack (1.4.1)
+ rack-cache (1.2)
+ rack (>= 0.4)
+ rack-ssl (1.3.2)
+ rack
+ rack-test (0.6.1)
+ rack (>= 1.0)
+ rails (3.2.8)
+ actionmailer (= 3.2.8)
+ actionpack (= 3.2.8)
+ activerecord (= 3.2.8)
+ activeresource (= 3.2.8)
+ activesupport (= 3.2.8)
+ bundler (~> 1.0)
+ railties (= 3.2.8)
+ railties (3.2.8)
+ actionpack (= 3.2.8)
+ activesupport (= 3.2.8)
+ rack-ssl (~> 1.3.2)
+ rake (>= 0.8.7)
+ rdoc (~> 3.4)
+ thor (>= 0.14.6, < 2.0)
rake (0.9.2.2)
rdoc (3.12)
json (~> 1.4)
@@ -25,13 +87,25 @@ GEM
multi_json (~> 1.0)
simplecov-html (~> 0.5.3)
simplecov-html (0.5.3)
+ sprockets (2.1.3)
+ hike (~> 1.2)
+ rack (~> 1.0)
+ tilt (~> 1.1, != 1.3.0)
+ thor (0.16.0)
+ tilt (1.3.3)
+ treetop (1.4.10)
+ polyglot
+ polyglot (>= 0.3.1)
+ tzinfo (0.3.33)
PLATFORMS
ruby
DEPENDENCIES
bundler (>= 1.0.0)
+ hashie (~> 1.2.0)
jeweler (>= 1.8.4)
+ rails
rdoc (>= 3.12)
rspec (>= 2.8.0)
simplecov (>= 0.5)
View
19 README.md
@@ -66,6 +66,10 @@ $(function(){
See [TouchTouch](http://tutorialzine.com/2012/04/mobile-touch-gallery/) and [github repo](https://github.com/martinaglv/touchTouch)
+```haml
+= ttouch_image photo
+```
+
## Minimalistic Slideshow gallery
See [minimalistic-slideshow-gallery](http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/) for more info.
@@ -188,6 +192,21 @@ class PropertiesController < ApplicationController
end
```
+The RGallery should now also support multiple photo sources for responsive galleries:
+
+```ruby
+@photos.pages.add_photo_w_sources 'banner' => [{src: 'banner-HD', sizing: '2x'}, {src: 'banner-phone', sizing: '100w'}]
+
+# OR
+
+@photos.pages.add_photo_sources 'banner' => [{src: 'banner-HD', sizing: '2x'}], 'logo' => [{src: 'logo-HD', sizing: '2x'}
+
+OR on individual pages
+
+@photos.page(:first).add_photo_sources 'banner' => [{src: 'banner-HD', sizing: '2x'}], 'logo' => [{src: 'logo-HD', sizing: '2x'}
+
+```
+
This engine comes with a RGallery::Photos` model which can encapsulate your photos for display and allows you to group photos in multiple pages.
The `RGallery::Photo` class is a base class for describing a photo.
View
2  VERSION
@@ -1 +1 @@
-0.2.1
+0.2.2
View
3  app/views/gallery/_galleria.html.haml
@@ -1,4 +1,3 @@
#galleria
- photos.all.each do |photo|
- %a{href:"/assets/#{photo.path}"}
- = image_tag photo.path, :"data-title" => photo.title, :"data-description" => photo.description
+ galleria_image photo
View
5 app/views/gallery/_responsive.html.haml
@@ -10,6 +10,5 @@
.es-carousel
%ul
- photos.all.each do |photo|
- %li
- %a{href:"#"}
- = image_tag photo.thumb, :"data-large" => "/assets/#{photo.path}", :alt => photo.alt, :"data-description" => photo.title
+ = respgal_image photo, wrap: true
+
View
4 app/views/gallery/_slideshow.html.haml
@@ -13,12 +13,12 @@
.msg_thumb_wrapper
- photos.page(:first).photos.each do |photo|
%a{href: "#"}
- = image_tag photo.thumb, alt: "/assets/#{photo.path}"
+ = ssgal_image photo
- photos.pages.remainder.each do |page|
.msg_thumb_wrapper{style: 'display:none'}
- page.photos.each do |photo|
%a{href: "#"}
- = image_tag photo.thumb, alt: "/assets/#{photo.path}"
+ = ssgal_image photo
%a#msg_thumb_next.msg_thumb_next{href: '#'}
%a#msg_thumb_prev.msg_thumb_prev{href: '#'}
%a#msg_thumb_close.msg_thumb_close{href: '#'}
View
33 lib/rails-gallery/rgallery/page.rb
@@ -7,6 +7,39 @@ def initialize photo_ids = [], options = {}
super options
end
+ # a source is a hash of the form:
+ # 'banner' => [{src: 'banner-HD', sizing: '2x'}, {src: 'banner-phone', sizing: '100w'}]
+ # see: add_photo_sources
+ def self.from_source sources
+ page = self.create sources.keys, options
+
+ @photos ||= sources.map do |key, srclist|
+ photo_class.new key, options.merge(:sources => srclist)
+ end
+ end
+
+ def << photo_ids
+ @photo_ids ||= []
+ @photo_ids += [photo_ids].flatten
+ end
+
+ def add_photo_sources sources_hash
+ sources_hash.each do |source|
+ add_photo_w_sources source
+ end
+ end
+
+ def add_photo_w_sources source
+ raise ArgumentError, "Must be a hash, was: #{source}" unless source.kind_of? Hash
+ key = source.keys.first
+ srclist = source.values.first
+ raise ArgumentError, "Hash value must be an Array, was: #{srclist}" unless srclist.kind_of? Array
+
+ self.send :<<, key
+ @photos ||= []
+ @photos << photo_class.new(key, options.merge(:sources => srclist))
+ end
+
def photo_ids
@photo_ids ||= []
end
View
15 lib/rails-gallery/rgallery/pages.rb
@@ -23,6 +23,21 @@ def << photo_list
pages << RGallery::Page.new(photo_list, options)
end
+ # a source is a hash of the form:
+ # 'banner' => [{src: 'banner-HD', sizing: '2x'}, {src: 'banner-phone', sizing: '100w'}]
+ def add_photo_w_sources source
+ pages << RGallery::Page.from_source(source, options)
+ end
+
+ # a Hash where each element is a source of the form:
+ # 'banner' => [{src: 'banner-HD', sizing: '2x'}, {src: 'banner-phone', sizing: '100w'}]
+ def add_photo_sources sources_hash
+ sources_hash.each do |source|
+ pages.add_photo_w_sources source
+ end
+ end
+
+
delegate :empty?, to: :pages
protected
View
27 lib/rails-gallery/rgallery/photo.rb
@@ -1,12 +1,37 @@
module RGallery
class Photo
- attr_reader :id, :options
+ attr_reader :id, :sizing, :sources, :options
def initialize id, options = {}
@id = id
+ self.sources = options.delete :sources
+ @sizing = options.delete :sizing
@options = options
end
+ # map [{src: 'banner-HD.jpeg', sizing: '2x'}, {src: 'banner-phone.jpeg', sizing: '100w'}]
+ # into -> "banner-HD.jpeg 2x, banner-phone.jpeg 100w
+ def srcset
+ return '' unless sources_photos.kind_of? Array
+ @srcset ||= source_photos.inject([]) do |res, photo|
+ res << [photo.id, photo.sizing].join(' ')
+ end.join(',')
+ end
+
+ # A photo can contain a source set of other photos!
+ def source_photos
+ return [] unless sources.kind_of? Array
+ @source_photos ||= sources.map do |source|
+ RGallery::Photo.new source.src, options.merge(:sizing => source.sizing)
+ end
+ end
+
+ # make sure that sources are wrapped as Hashies to allow method access
+ def sources= sources = []
+ return unless sources.kind_of? Array
+ @sources = sources.map{|source| Hashie::Mash.new source }
+ end
+
def filename
id
end
View
2  lib/rails-gallery/rgallery/photo_config.rb
@@ -12,7 +12,7 @@ def initialize options = {}
protected
def photo_class
- @photo_class ||= Photos::Photo
+ @photo_class ||= RGallery::Photo
end
end
end
View
12 lib/rails-gallery/view_helper.rb
@@ -1,7 +1,7 @@
module RailsGallery
module ViewHelper
def self.galleries
- %w{galleria responsive slideshow}
+ %w{galleria responsive slideshow touch_touch}
end
# autoload all galleries when references
@@ -10,13 +10,21 @@ def self.galleries
end
def gallery_image type, photo
- meth_name = "#{type}_gallery_image"
+ meth_name = "#{type}gal_image"
unless respond_to? meth_name
raise ArgumentError, "Gallery #{type} is not yet supported. Please add a View helper module for this gallery using the convention followed by the other galleries..."
end
send(meth_name, photo)
end
+ def gallery_imageset type, photo
+ meth_name = "#{type}gal_imageset"
+ unless respond_to? meth_name
+ raise ArgumentError, "Gallery #{type} is not yet supported for imageset. Please add a View helper module for this gallery using the convention followed by the other galleries..."
+ end
+ send(meth_name, photo)
+ end
+
protected
# include view helper modules for all galleries :)
View
15 lib/rails-gallery/view_helper/galleria.rb
@@ -1,9 +1,18 @@
module RailsGallery
module ViewHelper
module Galleria
- def galleria_gallery_image photo
- content_tag :a, href: "/assets/#{photo.path}" do
- image_tag photo.path, :"data-title" => photo.title, :"data-description" => photo.description
+ def galleria_image photo, options = {}
+ content_tag :a, href: photo.path do
+ options.merge! :"data-title" => photo.title, :"data-description" => photo.description
+ image_tag photo.path, options
+ end
+ end
+
+ def galleria_image photo, srcset, options = {}
+ content_tag :a, href: photo.path do
+ options.merge! :"data-title" => photo.title, :"data-description" => photo.description
+ options.merge! :srcset => srcset
+ image_tag photo.path, options
end
end
end
View
25 lib/rails-gallery/view_helper/responsive.rb
@@ -1,9 +1,30 @@
module RailsGallery
module ViewHelper
module Responsive
- def responsive_gallery_image photo
- image_tag photo.thumb, :"data-large" => "/assets/#{photo.path}", :alt => photo.alt, :"data-description" => photo.title
+ def respgal_image photo, options = {}
+ options.merge! :alt => photo.alt
+ options.merge! :"data-large" => photo.path, :"data-description" => photo.title
+ return image_tag photo.thumb, options unless options.delete :wrap
+
+ content_tag :li do
+ content_tag :a, href: '#' do
+ image_tag(photo.thumb, options)
+ end
+ end
end
+
+ def respgal_imageset photo, srcset, options = {}
+ options.merge! :alt => photo.alt
+ options.merge! :"data-large" => photo.path, :"data-description" => photo.title
+ options.merge! :srcset => srcset
+ return imageset_tag photo.thumb, options unless options.delete :wrap
+
+ content_tag :li do
+ content_tag :a, href: '#' do
+ imageset_tag(photo.thumb, options)
+ end
+ end
+ end
end
end
end
View
8 lib/rails-gallery/view_helper/slideshow.rb
@@ -1,8 +1,12 @@
module RailsGallery
module ViewHelper
module Slideshow
- def slideshow_gallery_image photo
- image_tag photo.thumb, alt: "/assets/#{photo.path}"
+ def slidegal_image photo, options = {}
+ image_tag photo.thumb, options.merge(alt: photo.path)
+ end
+
+ def slidegal_imageset photo, srcset, options = {}
+ imageset_tag photo.thumb, options.merge(alt: photo.path, :srcset => srcset)
end
end
end
View
9 lib/rails-gallery/view_helper/touch_touch.rb
@@ -0,0 +1,9 @@
+module RailsGallery
+ module ViewHelper
+ module TouchTouch
+ def touchgal_image photo, options = {}
+ content_tag :a, nil, options.merge(href: photo.path, title: photo.title)
+ end
+ end
+ end
+end
View
7 spec/rails-gallery_spec.rb
@@ -1,7 +0,0 @@
-require 'spec_helper')
-
-describe "RailsGallery" do
- it "fails" do
- fail "hey buddy, you should probably rename this file and start specing for real"
- end
-end
View
50 spec/rgallery/photos_spec.rb
@@ -0,0 +1,50 @@
+require 'spec_helper'
+require 'rgallery/property_photo'
+
+describe RGallery::Photos do
+ context 'New empty RGallery::Photos collection' do
+ subject { RGallery::Photos.new }
+
+ its(:pages) { should be_empty }
+ its(:pages) { should be_a RGallery::Pages }
+
+ describe '.page :first' do
+ specify { subject.page(:first).should be_empty }
+ end
+
+ describe '.page :remainder' do
+ specify { subject.pages.remainder.should be_empty }
+ end
+ end
+
+ context 'Photos with one page' do
+ subject { RGallery::Photos.new ['0'] }
+
+ its(:pages) { should_not be_empty }
+ its(:pages) { should be_a RGallery::Pages }
+
+ describe '.page' do
+ describe ':first' do
+ specify { subject.page(:first).should_not be_empty }
+ end
+
+ describe ':remainder' do
+ specify { subject.pages.remainder.should be_empty }
+ end
+ end
+
+ describe '.all' do
+ specify { subject.all.first.should be_a RGallery::Photo }
+
+ specify { subject.all.first.id.should == '0' }
+
+ specify { subject.all.first.path.should == '0.png' }
+ end
+ end
+
+ context 'configure with custom Photo class' do
+ subject { RGallery::Photos.new ['0'], photo_class: Property::Photo }
+
+ specify { subject.all.first.should be_a Property::Photo }
+ end
+end
View
32 spec/rgallery/property_photo.rb
@@ -0,0 +1,32 @@
+class Property
+ class Photo < RGallery::Photo
+ def path
+ File.join folder, super
+ end
+
+ # mogrify -path fullpathto/temp2 -resize 60x60% -quality 60 -format jpg *.png
+
+ # this will take all png files in your current directory (temp),
+ # resize to 60% (of largest dimension and keep aspect ratio),
+ # set jpg quality to 60 and convert to jpg.
+ def thumb
+ File.join folder, 'thumbs', file_path
+ end
+
+ def folder
+ 'responsive-gallery/images'
+ end
+
+ def title
+ 'property title'
+ end
+
+ def alt
+ 'property alt'
+ end
+
+ def self.extension
+ :jpg
+ end
+ end
+end
View
8 spec/spec_helper.rb
@@ -1,10 +1,6 @@
require 'rspec'
+require 'rails'
require 'rails-gallery'
-# Requires supporting files with custom matchers and macros, etc,
-# in ./support/ and its subdirectories.
-Dir["#{File.dirname(__FILE__)}/support/**/*.rb"].each {|f| require f}
-
-RSpec.configure do |config|
-
+RSpec.configure do |config|
end
Please sign in to comment.
Something went wrong with that request. Please try again.