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

- old
+ new

@@ -2,11 +2,11 @@ Popular Javascript Photo galleries/carousels ready to use with Rails 3+. ## Usage -`gem 'rails-gallery' +`gem 'rails-gallery'` ## Galleries included * slideshow * responsive @@ -19,35 +19,35 @@ In `application.css` manifest file: ```css /* - * require responsive-gallery - * require gallery/responsive/elastislide - * require gallery/responsive/style - * require gallery/slideshow - * require gallery/galleria - * require gallery/touch_touch + *= require gallery/responsive/elastislide + *= require gallery/responsive + *= require gallery/slideshow + *= require gallery/galleria/classic + *= require gallery/touch_touch */ ``` Using Compass, f.ex in `application.css.scss` ``` @import 'gallery/responsive/elastislide'; @import 'gallery/responsive'; @import 'gallery/slideshow'; -@import 'gallery/galleria'; +@import 'gallery/galleria/classic'; @import 'gallery/touch_touch'; ``` In `application.js` manifest file: ```javascript //= require gallery/responsive //= require gallery/slideshow //= require gallery/galleria +//= require gallery/galleria/classic //= require gallery/touch_touch //= require jquery/jquery.easing-1.3 //= require jquery/jquery.elastislide //= require jquery/jquery.tmpl.min @@ -64,10 +64,14 @@ }); ``` See [TouchTouch](http://tutorialzine.com/2012/04/mobile-touch-gallery/) and [github repo](https://github.com/martinaglv/touchTouch) +```haml += touchgal_image photo +``` + ## Minimalistic Slideshow gallery See [minimalistic-slideshow-gallery](http://tympanus.net/codrops/2010/07/05/minimalistic-slideshow-gallery/) for more info. @@ -186,16 +190,33 @@ @photos end 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'}] + +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 `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 a rough example: +Here is a rough example: ```ruby class Property class Photo < RGallery::Photo def path @@ -213,10 +234,17 @@ def folder 'responsive-gallery/images' 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}" + end + def title 'property title' end def alt @@ -228,12 +256,23 @@ end end end ``` -See the `lib/rails-gallery/rgallery/photos.rb +See the `lib/rails-gallery/rgallery/photos.rb` for details on how to extend this class appropriately to fit your scenario. +*debugging* + +In order to help debug the configuration of the photo class, you can use the view_helper methods: + +```ruby += validate_gallery_photo photo # prints error msg if invalid +- 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`: *Responsive Gallery* ```haml @@ -272,29 +311,29 @@ There are also some view helpers included in `rails-gallery/view_helper.rb` `= gallery_image type, photo` -Simple example: +*Simple example:* Iterate all photos as a "single page". ```haml - photos.all.each do |photo| = gallery_image :responsive, photo` ``` -Pages example: +*Pages example:* Iterate photos, one page at a time. ```haml - photos.pages.each do |photo| = gallery_image :responsive, photo` ``` -Advanced example: +*Advanced example:* Iterate photos, first page visible, then remaining pages invisible. ```haml .page.visible @@ -305,10 +344,41 @@ .page.hidden - page.photos.each do |photo| = gallery_image :responsive, photo` ``` +### Shortcuts for view helpers + +```haml +# galleria += riagal_image photo += riagal_imageset photo + +# slideshow += slidegal_image photo += slidegal_imageset photo + +# responsive += respgal_image photo += respgal_imageset photo + +# touchtouch += touchgal_image photo += 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) + +Example: + +```haml +- photos.pages.each do |photo| + = gallery_imageset :responsive, photo` +``` + Enjoy! ## Adding more galleries Simply follow the existing conventions (see the code). @@ -319,10 +389,10 @@ Then add gallery client-side pieces to the assets folder following conventions and make sure that your css files (and possible js files) references the icons used (and any other asset) correctly using `/assets/` in the path ;) ## TODO -Would perhaps be nice to allow pages/albums to have info assigned, such as title and/or description, tags etc. ? +Would be nice to allow pages/albums to have info assigned, such as title and/or description, tags etc. ## Contributing to rails-gallery * Check out the latest master to make sure the feature hasn't been implemented or the bug hasn't been fixed yet. * Check out the issue tracker to make sure someone already hasn't requested it and/or contributed it.