README.md in rails-gallery-0.3.0 vs README.md in rails-gallery-0.3.1

- old
+ new

@@ -51,10 +51,12 @@ //= require jquery/jquery.easing-1.3 //= require jquery/jquery.elastislide //= require jquery/jquery.tmpl.min ``` +Note: For galleria, you need to specify the theme to use. + ## Touch-Touch ```javascript $(function(){ @@ -103,22 +105,22 @@ *placement of thumbnails* To adjust placement of thumbnails, use: `prependTo` or `appendTo` in `gallery/responsive.js`: -``javascript +```javascript _addImageWrapper= function() { // adds the structure for the large image and the navigation buttons (if total items > 1) // also initializes the navigation events $('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).prependTo( $rgGallery ) ``` *Automatic slideshow* I wanted the same thing and I find a way to do it. -In the file gallery.js, in the function _initCarousel add these lines after: +In the file gallery.js, in the function `_initCarousel` add these lines after: `$esCarousel.elastislide( 'setCurrent', current );` ```javascript window.setInterval(function(){ @@ -153,74 +155,41 @@ ## Galleria See [galleria.io](http://galleria.io) for more info. -## Rails engine usage +[quick start](http://galleria.io/docs/getting_started/quick_start/) -This gem is a Rails 3+ engine :) +```javascript + Galleria.loadTheme('gallery/galleria/classic.min.js'); -Some *HAML* views (partials) are included in `app/views/gallery` + // configure + Galleria.configure({ + imageCrop: true, + transition: 'fade' + }); -## Rails views usage - -```ruby -class PropertiesController < ApplicationController - def show - @property = property - end - - protected - - def property - Hashie::Mash.new title: 'A beautiful property', - description: decription, - photos: photos - end - - def description - %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. - } - end - - def photos - @photos ||= RGallery::Photos.new nil, photo_class: Property::Photo - 5.times do - @photos.pages << 6.times.map {|n| (Kernel.rand(7) + 1).to_s } - end - @photos - end -end + Galleria.run('#galleria'); ``` -The RGallery should now also support multiple photo sources for responsive galleries: +### Model Configuration -```ruby -@photos.pages.add_photo_w_sources 'banner' => [{src: 'banner-HD', sizing: '2x'}, {src: 'banner-phone', sizing: '100w'}] - -Note: See module `RGallery::Pages` class. - -# 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 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. 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. Here is a rough example: ```ruby class Property class Photo < RGallery::Photo + def initialize property, options = {} + super + end + alias_method :property, :obj + def path File.join folder, super end # mogrify -path fullpathto/temp2 -resize 60x60% -quality 60 -format jpg *.png @@ -231,26 +200,32 @@ def thumb File.join folder, 'thumbs', file_path end def folder - 'responsive-gallery/images' + 'gallery/images' end + # Here we expect to create each photo with the + # id being set to a Property object + def property + id + end + # The filename of the picture. # Here it assumes that the id assigned is a Property object, which has a # method 'picture' which returns the picture id. def filename - "property-#{id.picture}" + "property-#{property.picture}" end def title - 'property title' + property.title end def alt - 'property alt' + title end def self.extension :jpg end @@ -269,14 +244,78 @@ - validate_gallery_photo! photo # raise error if invalid ``` Or you can include the `RailsGallery::PhotoValidation` module anywhere you want to leverage these methods! -Then in your `properties/show.html.haml`: +## Rails engine usage + +The `RailsGallery::ViewHelper` is inluded into ActionView::Base by the engine. + +The following are the main methods exposed: + +* gallery_image type, photo +* gallery_imageset type, photo + +Example usage: + +```haml += gallery_image :responsive, photo` += gallery_imageset :galleria, photo` +``` + +The photo argument must be a kind of `RGallery::Photo:: + +### Controller and partials + +Some *HAML* views (partials) are included in `app/views/gallery` + +### Rails views usage + +First set up photos in your controller. + +```ruby +class PropertiesController < ApplicationController + def show + @property = property + end + + protected + + def property + Hashie::Mash.new title: 'A beautiful property', + description: decription, + photos: photos + end + + def description + %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. + } + end + + def photos + @photos ||= RGallery::Photos.new nil, photo_class: Property::Photo + 5.times do |n| + # using a paginator to get a page of properties + @photos.pages << Property.page(n) + end + @photos + end +end +``` + +In `property/show.html.haml`, render one of the partials of this gem, sending it the list of photos as a local variable `photo`: + +```haml +.gallery + = render partial: 'gallery/gallery', locals: { photos: @property.photos} +``` + *Responsive Gallery* +In your `properties/show.html.haml`: + ```haml = render partial: 'gallery/template/responsive' = render partial: 'gallery/responsive', locals: { photos: @property.photos } ``` @@ -307,11 +346,11 @@ The engine includes a `config/locales/rails_gallery.yml` file, currently only with english translation mappings. Include a `config/locales/rails_gallery.yml` file in your Rails app and override or supply you additional translation mappings ;) ## View helpers -There are also some view helpers included in `rails-gallery/view_helper.rb` +There are some view helpers included in `rails-gallery/view_helper.rb` `= gallery_image type, photo` *Simple example:* @@ -344,10 +383,29 @@ .page.hidden - page.photos.each do |photo| = gallery_image :responsive, photo` ``` +## Responsive gallery support + +The RGallery also supports multiple photo sources for responsive galleries: + +```ruby +@photos.pages.add_photo_w_sources 'banner' => [{src: 'banner-HD', sizing: '2x'}, {src: 'banner-phone', sizing: '100w'}] + +Note: See module `RGallery::Pages` class. + +# 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'} + +``` + ### Shortcuts for view helpers ```haml # galleria = riagal_image photo @@ -366,10 +424,10 @@ = touchgal_imageset photo ``` ## Responsive images via "image srcset" -The View Helpers also 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) +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) Example: ```haml - photos.pages.each do |photo|