rails-gallery 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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:
|