Merge pull request #396 from platanus/shrine-images

Shrine images

Author: GabrielLyonB

.circleci/config.yml

@@ -32,6 +32,12 @@ commands:
           keys:
           - bundler-dependencies-{{ checksum "Gemfile.lock" }}
           - bundler-dependencies-
+      - run:
+          name: Install apt and vips buildpack dependencies
+          command: |
+            cd spec/dummy/
+            xargs -a Aptfile sudo apt-get install
+            sudo apt-get install libvips
       - run:
           name: Install bundle dependencies
           command: |

Gemfile.lock

@@ -96,9 +96,12 @@ GEM
     climate_control (0.2.0)
     coderay (1.1.2)
     concurrent-ruby (1.1.8)
+    content_disposition (1.0.0)
     crass (1.0.6)
     database_cleaner (1.8.2)
     diff-lcs (1.3)
+    down (5.2.4)
+      addressable (~> 2.8)
     enumerize (2.3.1)
       activesupport (>= 3.2)
     erubi (1.10.0)
@@ -107,7 +110,7 @@ GEM
     factory_bot_rails (5.1.1)
       factory_bot (~> 5.1.0)
       railties (>= 4.2.0)
-    ffi (1.12.2)
+    ffi (1.15.5)
     formatador (0.2.5)
     formtastic (3.1.5)
       actionpack (>= 3.2.13)
@@ -133,6 +136,9 @@ GEM
       activesupport (>= 4.1)
     i18n (1.8.10)
       concurrent-ruby (~> 1.0)
+    image_processing (1.12.1)
+      mini_magick (>= 4.9.5, < 5)
+      ruby-vips (>= 2.0.17, < 3)
     inherited_resources (1.11.0)
       actionpack (>= 5.0, < 6.1)
       has_scope (~> 0.6)
@@ -170,6 +176,7 @@ GEM
     mime-types (3.3.1)
       mime-types-data (~> 3.2015)
     mime-types-data (3.2019.1009)
+    mini_magick (4.11.0)
     mini_mime (1.0.2)
     mini_portile2 (2.6.1)
     minitest (5.14.4)
@@ -280,6 +287,8 @@ GEM
       ruby-progressbar (~> 1.7)
       unicode-display_width (~> 1.4.0)
     ruby-progressbar (1.10.1)
+    ruby-vips (2.1.4)
+      ffi (~> 1.12)
     rubyzip (2.2.0)
     sassc (2.2.1)
       ffi (~> 1.9)
@@ -296,6 +305,9 @@ GEM
     shellany (0.0.1)
     shoulda-matchers (4.2.0)
       activesupport (>= 4.2.0)
+    shrine (3.4.0)
+      content_disposition (~> 1.0)
+      down (~> 5.1)
     sprockets (4.0.0)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
@@ -343,6 +355,7 @@ DEPENDENCIES
   factory_bot_rails
   guard
   guard-rspec
+  image_processing
   mimemagic!
   paperclip
   pry-rails
@@ -352,6 +365,7 @@ DEPENDENCIES
   rspec_junit_formatter
   rubocop (~> 0.65.0)
   shoulda-matchers
+  shrine (~> 3.0)
   sqlite3
   webdrivers
   webpacker (~> 5.0)

README.md

@@ -78,13 +78,13 @@ Displays a paperclip link with attachment related icon into index and show views
 
 [Read more!](docs/paperclip_attachment.md)
 
-#### Paperclip Image
+#### Images
 
-Displays a paperclip image into index and show views
+Display images in the index and show views. This implementation supports [Shrine](https://github.com/shrinerb/shrine) and [Paperclip](https://github.com/thoughtbot/paperclip).
 
 <img src="./docs/images/paperclip-image-column.png" height="380" />
 
-[Read more!](docs/paperclip_images.md)
+[Read more!](docs/images.md)
 
 #### AASM Integration
 

activeadmin_addons.gemspec

@@ -32,6 +32,7 @@ Gem::Specification.new do |s|
   s.add_development_dependency "factory_bot_rails"
   s.add_development_dependency "guard"
   s.add_development_dependency "guard-rspec"
+  s.add_development_dependency "image_processing"
   s.add_development_dependency "paperclip"
   s.add_development_dependency "pry-rails"
   s.add_development_dependency "puma"
@@ -40,6 +41,7 @@ Gem::Specification.new do |s|
   s.add_development_dependency "rspec_junit_formatter"
   s.add_development_dependency "rubocop", "~> 0.65.0"
   s.add_development_dependency "shoulda-matchers"
+  s.add_development_dependency "shrine", "~> 3.0"
   s.add_development_dependency "sqlite3"
   s.add_development_dependency "webdrivers"
 end

docs/images.md

@@ -0,0 +1,53 @@
+# Images Integration
+
+## Paperclip
+
+### Image Row
+
+```ruby
+show do
+  attributes_table do
+    image_row :photo
+  end
+end
+```
+
+<img src="./images/paperclip-image-row.png" height="400" />
+
+### Image Column
+
+```ruby
+index do
+  image_column :photo, style: :thumb
+end
+```
+
+<img src="./images/paperclip-image-column.png" height="400" />
+
+> You can pass `style` attribute matching paperclip's style definition
+
+## Shrine
+
+### Image Row
+
+The Shrine implementation receives an optional `image_options` which is then used as the options for the [`image_tag`](https://apidock.com/rails/ActionView/Helpers/AssetTagHelper/image_tag) method.
+```ruby
+show do
+  attributes_table do
+    image_row :photo, image_options: { width: 400 }
+  end
+end
+```
+
+<img src="./images/paperclip-image-row.png" height="400" />
+
+### Image Column
+
+To use the Shrine [derivatives](https://shrinerb.com/docs/plugins/derivatives) you can use the `style` option with the name of the derivative like the example below. In this case you would need to have a derivative created with the `'jpg_small'` name.
+```ruby
+index do
+  image_column :photo, style: :jpg_small
+end
+```
+
+<img src="./images/paperclip-image-column.png" height="400" />

docs/paperclip_images.md

@@ -1,11 +1,38 @@
+require 'pry'
+
 module ActiveAdminAddons
   class ImageBuilder < CustomBuilder
     def render
       return nil if data.nil?
-      raise "you need to pass a paperclip image attribute" unless data.respond_to?(:url)
+
+      if Object.const_defined?('Paperclip::Attachment') && data.is_a?(Paperclip::Attachment)
+        paperclip_data
+      elsif Object.const_defined?('Shrine::UploadedFile') && data.is_a?(Shrine::UploadedFile)
+        shrine_data
+      else
+        raise "you need to pass a paperclip or shrine image attribute"
+      end
+    end
+
+    private
+
+    def paperclip_data
       style = options.fetch(:style, :original)
       context.image_tag(data.url(style)) if data.file?
     end
+
+    def shrine_data
+      image_options = options[:image_options].presence || {}
+      if options[:style] && derivatives.include?(options[:style])
+        context.image_tag(model.send("#{attribute}_url", options[:style]), image_options)
+      else
+        context.image_tag(data.url, image_options)
+      end
+    end
+
+    def derivatives
+      model.send("#{attribute}_derivatives")
+    end
   end
 end
 

lib/activeadmin_addons/addons/image_builder.rb

@@ -0,0 +1,5 @@
+libglib2.0-0
+libglib2.0-dev
+libpoppler-glib8
+libwebp-dev
+webp

spec/dummy/Aptfile

@@ -1,6 +1,6 @@
 ActiveAdmin.register Invoice do
-  permit_params :legal_date, :number, :paid, :state, :attachment, :photo, :category_id,
-    :city_id, :amount, :color, :updated_at, :active, item_ids: [], other_item_ids: []
+  permit_params :legal_date, :number, :paid, :state, :attachment, :photo, :category_id, :city_id,
+    :amount, :color, :updated_at, :picture, :active, item_ids: [], other_item_ids: []
 
   filter :id, as: :numeric_range_filter
 
@@ -17,6 +17,7 @@
     tag_column :state, interactive: true
     bool_column :paid
     image_column :photo, style: :thumb
+    image_column :picture, style: :jpg_small
     attachment_column :attachment
     number_column :amount, as: :currency, unit: "$", separator: ","
     toggle_bool_column :active
@@ -35,6 +36,7 @@
       list_row :details, localize: true
       image_row("Mi foto", :photo, style: :big, &:photo)
       attachment_row("My doc", :attachment, label: 'Download file', truncate: false, &:attachment)
+      image_row("Mi picture", :picture, image_options: { width: 100 }, &:picture)
       row :legal_date
       number_row("Monto", :amount, as: :human, &:amount)
       row :city
@@ -87,6 +89,8 @@
 
       f.input :photo
 
+      f.input :picture, as: :file
+
       f.input :color, as: :color_picker,
                       palette: Invoice.colors
 

spec/dummy/app/admin/invoices.rb

@@ -6,6 +6,7 @@ class Invoice < ActiveRecord::Base
   extend ::Enumerize
   include Paperclip::Glue
   include AASM
+  include ImageUploader::Attachment(:picture)
 
   belongs_to :category
   belongs_to :city