Resize images embedded in Trix (SpinaCMS#602)

* Resize images embedded in Trix - Fixes SpinaCMS#601
channainfo · Jul 24, 2020 · 3220a3a · 3220a3a
1 parent 351089e
commit 3220a3a
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@
 
 ⚠️ _Beware: lots of changes regarding page content. The old page parts are gone in favor of new JSON-based parts. Read the [Upgrading Guide](https://www.spinacms.com/guide/getting-started/upgrading-from-v1) to learn how to upgrade._
 
+### Unreleased
+
+* Resize images embedded in Trix (configurable in spina.rb)
+
 ### 2.0.0.alpha
 
 * __Replaced all page content with JSON-based Spina::Parts__

diff --git a/app/assets/javascripts/spina/admin/controllers/media_picker_controller.js b/app/assets/javascripts/spina/admin/controllers/media_picker_controller.js
@@ -76,7 +76,7 @@
 
     insert_trix(event) {
       let customEvent = new CustomEvent("image-insert", {bubbles: true, cancelable: true, detail: {
-        url: this.trixImage.dataset.fullImageUrl, 
+        url: this.trixImage.dataset.imageUrl, 
         alt: this.altTarget.value, 
         link_to_url: this.linkToUrlTarget.value
       }})

diff --git a/app/assets/stylesheets/spina/_trix_custom.sass b/app/assets/stylesheets/spina/_trix_custom.sass
@@ -167,10 +167,14 @@ trix-editor
     font-size: 16px
 
   .trix-attachment-spina-image
+    background: #f5f5f5
+    border-radius: 6px
     cursor: default
     display: block
+    height: 150px
     margin-bottom: 40px
     position: relative
+    width: 200px
 
     &[data-label=""]
       margin-bottom: 0px
@@ -181,8 +185,8 @@ trix-editor
     img
       border-radius: 6px
       display: block
-      max-height: 150px
-      max-width: 200px
+      height: 150px
+      width: 200px
 
     &:before
       background: #eee

diff --git a/app/helpers/spina/images_helper.rb b/app/helpers/spina/images_helper.rb
@@ -26,5 +26,10 @@ def thumbnail_url(image)
       variant(image.file, resize: "400x300^", crop: "400x300+0+0")
     end
 
+    def embedded_image_url(image)
+      return "" if image.nil?
+      variant(image.file, resize: Spina.config.embedded_image_size)
+    end
+
   end
 end
diff --git a/app/views/spina/admin/media_picker/_image.html.haml b/app/views/spina/admin/media_picker/_image.html.haml
@@ -1,3 +1,3 @@
 %label.media-picker-image{data: {target: "media-picker.image"}}
-  = check_box_tag :image_id, image.id, image.id.in?(selected_ids), data: {action: "media-picker#choose", image_id: image.id, signed_blob_id: image.file.blob.signed_id, thumbnail_url: thumbnail_url(image), full_image_url: main_app.url_for(image.file), filename: image.file.filename}
+  = check_box_tag :image_id, image.id, image.id.in?(selected_ids), data: {action: "media-picker#choose", image_id: image.id, signed_blob_id: image.file.blob.signed_id, thumbnail_url: thumbnail_url(image), image_url: embedded_image_url(image), filename: image.file.filename}
   %span= image_tag thumbnail_url(image)
diff --git a/lib/spina.rb b/lib/spina.rb
@@ -12,7 +12,7 @@ module Spina
   PLUGINS = []
   THEMES = []
 
-  config_accessor :backend_path, :disable_frontend_routes, :storage, :max_page_depth, :locales
+  config_accessor :backend_path, :disable_frontend_routes, :storage, :max_page_depth, :locales, :embedded_image_size
 
   self.backend_path = 'admin'
 
@@ -24,4 +24,9 @@ module Spina
 
   self.locales = [I18n.default_locale]
 
+  # Images that are embedded in the Trix editor are resized to fit
+  # You can optimize this for your website and go for a smaller (or larger) size
+  # Default: 2000x2000px
+  self.embedded_image_size = "2000x2000>"
+
 end