rails-gallery 0.3.0 → 0.3.1
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +116 -58
- data/VERSION +1 -1
- data/lib/rails-gallery/rgallery/page.rb +8 -8
- data/lib/rails-gallery/rgallery/photo.rb +5 -3
- data/rails-gallery.gemspec +1 -1
- metadata +2 -2
data/README.md
CHANGED
@@ -53,6 +53,8 @@ In `application.js` manifest file:
|
|
53
53
|
//= require jquery/jquery.tmpl.min
|
54
54
|
```
|
55
55
|
|
56
|
+
Note: For galleria, you need to specify the theme to use.
|
57
|
+
|
56
58
|
## Touch-Touch
|
57
59
|
|
58
60
|
```javascript
|
@@ -105,7 +107,7 @@ Change `mode = 'carousel'` to `'fullview'`
|
|
105
107
|
|
106
108
|
To adjust placement of thumbnails, use: `prependTo` or `appendTo` in `gallery/responsive.js`:
|
107
109
|
|
108
|
-
|
110
|
+
```javascript
|
109
111
|
_addImageWrapper= function() {
|
110
112
|
|
111
113
|
// adds the structure for the large image and the navigation buttons (if total items > 1)
|
@@ -116,7 +118,7 @@ To adjust placement of thumbnails, use: `prependTo` or `appendTo` in `gallery/re
|
|
116
118
|
*Automatic slideshow*
|
117
119
|
|
118
120
|
I wanted the same thing and I find a way to do it.
|
119
|
-
In the file gallery.js, in the function _initCarousel add these lines after:
|
121
|
+
In the file gallery.js, in the function `_initCarousel` add these lines after:
|
120
122
|
|
121
123
|
`$esCarousel.elastislide( 'setCurrent', current );`
|
122
124
|
|
@@ -155,61 +157,23 @@ $(document).ready(function() {
|
|
155
157
|
|
156
158
|
See [galleria.io](http://galleria.io) for more info.
|
157
159
|
|
158
|
-
|
159
|
-
|
160
|
-
This gem is a Rails 3+ engine :)
|
161
|
-
|
162
|
-
Some *HAML* views (partials) are included in `app/views/gallery`
|
163
|
-
|
164
|
-
## Rails views usage
|
165
|
-
|
166
|
-
```ruby
|
167
|
-
class PropertiesController < ApplicationController
|
168
|
-
def show
|
169
|
-
@property = property
|
170
|
-
end
|
171
|
-
|
172
|
-
protected
|
160
|
+
[quick start](http://galleria.io/docs/getting_started/quick_start/)
|
173
161
|
|
174
|
-
|
175
|
-
|
176
|
-
description: decription,
|
177
|
-
photos: photos
|
178
|
-
end
|
162
|
+
```javascript
|
163
|
+
Galleria.loadTheme('gallery/galleria/classic.min.js');
|
179
164
|
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
165
|
+
// configure
|
166
|
+
Galleria.configure({
|
167
|
+
imageCrop: true,
|
168
|
+
transition: 'fade'
|
169
|
+
});
|
184
170
|
|
185
|
-
|
186
|
-
@photos ||= RGallery::Photos.new nil, photo_class: Property::Photo
|
187
|
-
5.times do
|
188
|
-
@photos.pages << 6.times.map {|n| (Kernel.rand(7) + 1).to_s }
|
189
|
-
end
|
190
|
-
@photos
|
191
|
-
end
|
192
|
-
end
|
171
|
+
Galleria.run('#galleria');
|
193
172
|
```
|
194
173
|
|
195
|
-
|
196
|
-
|
197
|
-
```ruby
|
198
|
-
@photos.pages.add_photo_w_sources 'banner' => [{src: 'banner-HD', sizing: '2x'}, {src: 'banner-phone', sizing: '100w'}]
|
199
|
-
|
200
|
-
Note: See module `RGallery::Pages` class.
|
201
|
-
|
202
|
-
# OR
|
203
|
-
|
204
|
-
@photos.pages.add_photo_sources 'banner' => [{src: 'banner-HD', sizing: '2x'}], 'logo' => [{src: 'logo-HD', sizing: '2x'}
|
205
|
-
|
206
|
-
OR on individual pages
|
207
|
-
|
208
|
-
@photos.page(:first).add_photo_sources 'banner' => [{src: 'banner-HD', sizing: '2x'}], 'logo' => [{src: 'logo-HD', sizing: '2x'}
|
209
|
-
|
210
|
-
```
|
174
|
+
### Model Configuration
|
211
175
|
|
212
|
-
|
176
|
+
The engine comes with a RGallery::Photos` model which can encapsulate your photos for display and allows you to group photos in multiple pages.
|
213
177
|
The `RGallery::Photo` class is a base class for describing a photo.
|
214
178
|
|
215
179
|
You should create your own Photo class that inherits from `RGallery::Photo` (or implements the API), which knows how to render and describe your photos.
|
@@ -219,6 +183,11 @@ Here is a rough example:
|
|
219
183
|
```ruby
|
220
184
|
class Property
|
221
185
|
class Photo < RGallery::Photo
|
186
|
+
def initialize property, options = {}
|
187
|
+
super
|
188
|
+
end
|
189
|
+
alias_method :property, :obj
|
190
|
+
|
222
191
|
def path
|
223
192
|
File.join folder, super
|
224
193
|
end
|
@@ -233,22 +202,28 @@ class Property
|
|
233
202
|
end
|
234
203
|
|
235
204
|
def folder
|
236
|
-
'
|
205
|
+
'gallery/images'
|
206
|
+
end
|
207
|
+
|
208
|
+
# Here we expect to create each photo with the
|
209
|
+
# id being set to a Property object
|
210
|
+
def property
|
211
|
+
id
|
237
212
|
end
|
238
213
|
|
239
214
|
# The filename of the picture.
|
240
215
|
# Here it assumes that the id assigned is a Property object, which has a
|
241
216
|
# method 'picture' which returns the picture id.
|
242
217
|
def filename
|
243
|
-
"property-#{
|
218
|
+
"property-#{property.picture}"
|
244
219
|
end
|
245
220
|
|
246
221
|
def title
|
247
|
-
|
222
|
+
property.title
|
248
223
|
end
|
249
224
|
|
250
225
|
def alt
|
251
|
-
|
226
|
+
title
|
252
227
|
end
|
253
228
|
|
254
229
|
def self.extension
|
@@ -271,10 +246,74 @@ In order to help debug the configuration of the photo class, you can use the vie
|
|
271
246
|
|
272
247
|
Or you can include the `RailsGallery::PhotoValidation` module anywhere you want to leverage these methods!
|
273
248
|
|
274
|
-
|
249
|
+
|
250
|
+
## Rails engine usage
|
251
|
+
|
252
|
+
The `RailsGallery::ViewHelper` is inluded into ActionView::Base by the engine.
|
253
|
+
|
254
|
+
The following are the main methods exposed:
|
255
|
+
|
256
|
+
* gallery_image type, photo
|
257
|
+
* gallery_imageset type, photo
|
258
|
+
|
259
|
+
Example usage:
|
260
|
+
|
261
|
+
```haml
|
262
|
+
= gallery_image :responsive, photo`
|
263
|
+
= gallery_imageset :galleria, photo`
|
264
|
+
```
|
265
|
+
|
266
|
+
The photo argument must be a kind of `RGallery::Photo::
|
267
|
+
|
268
|
+
### Controller and partials
|
269
|
+
|
270
|
+
Some *HAML* views (partials) are included in `app/views/gallery`
|
271
|
+
|
272
|
+
### Rails views usage
|
273
|
+
|
274
|
+
First set up photos in your controller.
|
275
|
+
|
276
|
+
```ruby
|
277
|
+
class PropertiesController < ApplicationController
|
278
|
+
def show
|
279
|
+
@property = property
|
280
|
+
end
|
281
|
+
|
282
|
+
protected
|
283
|
+
|
284
|
+
def property
|
285
|
+
Hashie::Mash.new title: 'A beautiful property',
|
286
|
+
description: decription,
|
287
|
+
photos: photos
|
288
|
+
end
|
289
|
+
|
290
|
+
def description
|
291
|
+
%q{Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mauris arcu, auctor ac rhoncus non, libero. Nulla dolor velit, volutpat a bibendum ut, hendrerit id mi. Pellentesque convallis erat in mi interdum rutrum. Phasellus interdum velit nulla.
|
292
|
+
}
|
293
|
+
end
|
294
|
+
|
295
|
+
def photos
|
296
|
+
@photos ||= RGallery::Photos.new nil, photo_class: Property::Photo
|
297
|
+
5.times do |n|
|
298
|
+
# using a paginator to get a page of properties
|
299
|
+
@photos.pages << Property.page(n)
|
300
|
+
end
|
301
|
+
@photos
|
302
|
+
end
|
303
|
+
end
|
304
|
+
```
|
305
|
+
|
306
|
+
In `property/show.html.haml`, render one of the partials of this gem, sending it the list of photos as a local variable `photo`:
|
307
|
+
|
308
|
+
```haml
|
309
|
+
.gallery
|
310
|
+
= render partial: 'gallery/gallery', locals: { photos: @property.photos}
|
311
|
+
```
|
275
312
|
|
276
313
|
*Responsive Gallery*
|
277
314
|
|
315
|
+
In your `properties/show.html.haml`:
|
316
|
+
|
278
317
|
```haml
|
279
318
|
= render partial: 'gallery/template/responsive'
|
280
319
|
= render partial: 'gallery/responsive', locals: { photos: @property.photos }
|
@@ -309,7 +348,7 @@ The engine includes a `config/locales/rails_gallery.yml` file, currently only wi
|
|
309
348
|
|
310
349
|
## View helpers
|
311
350
|
|
312
|
-
There are
|
351
|
+
There are some view helpers included in `rails-gallery/view_helper.rb`
|
313
352
|
|
314
353
|
`= gallery_image type, photo`
|
315
354
|
|
@@ -346,6 +385,25 @@ Iterate photos, first page visible, then remaining pages invisible.
|
|
346
385
|
= gallery_image :responsive, photo`
|
347
386
|
```
|
348
387
|
|
388
|
+
## Responsive gallery support
|
389
|
+
|
390
|
+
The RGallery also supports multiple photo sources for responsive galleries:
|
391
|
+
|
392
|
+
```ruby
|
393
|
+
@photos.pages.add_photo_w_sources 'banner' => [{src: 'banner-HD', sizing: '2x'}, {src: 'banner-phone', sizing: '100w'}]
|
394
|
+
|
395
|
+
Note: See module `RGallery::Pages` class.
|
396
|
+
|
397
|
+
# OR
|
398
|
+
|
399
|
+
@photos.pages.add_photo_sources 'banner' => [{src: 'banner-HD', sizing: '2x'}], 'logo' => [{src: 'logo-HD', sizing: '2x'}
|
400
|
+
|
401
|
+
# OR on individual pages
|
402
|
+
|
403
|
+
@photos.page(:first).add_photo_sources 'banner' => [{src: 'banner-HD', sizing: '2x'}], 'logo' => [{src: 'logo-HD', sizing: '2x'}
|
404
|
+
|
405
|
+
```
|
406
|
+
|
349
407
|
### Shortcuts for view helpers
|
350
408
|
|
351
409
|
```haml
|
@@ -368,7 +426,7 @@ Iterate photos, first page visible, then remaining pages invisible.
|
|
368
426
|
|
369
427
|
## Responsive images via "image srcset"
|
370
428
|
|
371
|
-
The View Helpers
|
429
|
+
The View Helpers includes tag helpers to create image tags with [srcset](https://github.com/borismus/srcset-polyfill). This can be installed and used with [picturefill-rails](https://github.com/kristianmandrup/picturefill-rails)
|
372
430
|
|
373
431
|
Example:
|
374
432
|
|
data/VERSION
CHANGED
@@ -1 +1 @@
|
|
1
|
-
0.3.
|
1
|
+
0.3.1
|
@@ -2,8 +2,8 @@ module RGallery
|
|
2
2
|
class Page < PhotoConfig
|
3
3
|
include Enumerable
|
4
4
|
|
5
|
-
def initialize
|
6
|
-
@
|
5
|
+
def initialize photo_objs = [], options = {}
|
6
|
+
@photo_objs = photo_objs
|
7
7
|
super options
|
8
8
|
end
|
9
9
|
|
@@ -18,9 +18,9 @@ module RGallery
|
|
18
18
|
end
|
19
19
|
end
|
20
20
|
|
21
|
-
def <<
|
22
|
-
@
|
23
|
-
@
|
21
|
+
def << photo_objs
|
22
|
+
@photo_objs ||= []
|
23
|
+
@photo_objs += [photo_objs].flatten
|
24
24
|
end
|
25
25
|
|
26
26
|
def add_photo_sources sources_hash
|
@@ -40,12 +40,12 @@ module RGallery
|
|
40
40
|
@photos << photo_class.new(key, options.merge(:sources => srclist))
|
41
41
|
end
|
42
42
|
|
43
|
-
def
|
44
|
-
@
|
43
|
+
def photo_objs
|
44
|
+
@photo_objs ||= []
|
45
45
|
end
|
46
46
|
|
47
47
|
def photos
|
48
|
-
@photos ||=
|
48
|
+
@photos ||= photo_objs.map {|obj| photo_class.new obj, options }
|
49
49
|
end
|
50
50
|
|
51
51
|
delegate :empty?, to: :photos
|
@@ -1,14 +1,16 @@
|
|
1
1
|
module RGallery
|
2
2
|
class Photo
|
3
|
-
attr_reader :
|
3
|
+
attr_reader :obj, :sizing, :sources, :options
|
4
4
|
|
5
|
-
def initialize
|
6
|
-
@
|
5
|
+
def initialize obj, options = {}
|
6
|
+
@obj = obj
|
7
7
|
self.sources = options.delete :sources
|
8
8
|
@sizing = options.delete :sizing
|
9
9
|
@options = options
|
10
10
|
end
|
11
11
|
|
12
|
+
alias_method :id, :obj
|
13
|
+
|
12
14
|
# map [{src: 'banner-HD.jpeg', sizing: '2x'}, {src: 'banner-phone.jpeg', sizing: '100w'}]
|
13
15
|
# into -> "banner-HD.jpeg 2x, banner-phone.jpeg 100w
|
14
16
|
def srcset
|
data/rails-gallery.gemspec
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: rails-gallery
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.3.
|
4
|
+
version: 0.3.1
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -322,7 +322,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
322
322
|
version: '0'
|
323
323
|
segments:
|
324
324
|
- 0
|
325
|
-
hash:
|
325
|
+
hash: 1161090395313718102
|
326
326
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
327
327
|
none: false
|
328
328
|
requirements:
|