I746 banner img customization

app/assets/javascripts/application.js

@@ -16,6 +16,8 @@
 //= require jquery3
 //= require jquery_ujs
 //= require jquery.fontselect
+//= require cropper.min
+
 //= require dataTables/jquery.dataTables
 //= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
 //= require stat_slider

app/assets/stylesheets/application.css

@@ -18,6 +18,7 @@
  *= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
  *= require bootstrap-datepicker
  *= require single_signon
+ *= require cropper.min
  *= require_self
 
  *

app/controllers/hyrax/admin/appearances_controller.rb

@@ -25,7 +25,10 @@ def show
       end
 
       def update
-        form_class.new(update_params).update!
+        form = form_class.new(update_params)
+        form.banner_image = update_params[:banner_image] if update_params[:banner_image].present?
+
+        form.update!
 
         if update_params['default_collection_image']
           # Reindex all Collections and AdminSets to apply new default collection image

app/forms/hyrax/forms/admin/appearance.rb

@@ -83,6 +83,8 @@ def persisted?
           true
         end
 
+        delegate :banner_image=, to: :site
+
         # The alt text for the logo image
         def logo_image_text
           block_for('logo_image_text')

app/views/hyrax/admin/appearances/_banner_image_form.html.erb

@@ -2,18 +2,86 @@
   <div class="panel-body">
     <% require_image = @form.banner_image? ? false : true %>
     <%# Upload Banner Image %>
-    <%= f.input :banner_image, as: :file, wrapper: :vertical_file_input, required: require_image, hint: t('hyrax.admin.appearances.show.forms.banner_image.hint') %>
+    <%= f.input :banner_image, as: :file, wrapper: :vertical_file_input, required: require_image, hint: t('hyrax.admin.appearances.show.forms.banner_image.hint').html_safe, input_html: { name: 'form[banner_image]' } %>
     <%= f.input :banner_image_text, required: true, as: :text, label: 'Banner image alt text' %>
-    <%= image_tag @form.banner_image.url, class: "img-responsive" if @form.banner_image? %>
+
+    <!-- Image preview and cropping area -->
+    <button type="button" id="activate-cropper" class="btn btn-primary" style=<%= @form.banner_image.url ? "display:block;" : "display:none;" %>>Crop Image</button>
+    <br />
+    <div id="image-preview" style="width: 100%; height: auto;">
+      <img id="image" src="<%= @form.banner_image.url || Hyrax.config.banner_image %>" alt="Banner Image Preview Area" class="img-responsive" />
+    </div>
   </div>
+
   <div class="panel-footer">
-    <%= f.submit class: 'btn btn-primary pull-right' %>
+    <%= f.submit class: 'btn btn-primary pull-right banner-submit' %>
   </div>
 <% end %>
+
 <% if @form.banner_image? %>
   <div class="panel-footer">
     <%= simple_form_for @form.site, url: main_app.site_path(@form.site) do |f| %>
-      <%= f.submit 'Remove banner image', class: 'btn btn-danger', name: :remove_banner_image %>
+      <%= f.submit 'Remove banner image', class: 'btn btn-danger pull-right', name: :remove_banner_image %>
     <% end %>
   </div>
-<% end %>
+<% end %>
+
+<%# TODO: move this into the assets folder and make it work %>
+<script>
+  var cropper;
+
+  document.getElementById('activate-cropper').addEventListener('click', function() {
+    var image = document.getElementById('image');
+    if (image.src) {
+      cropper = new Cropper(image, {
+        initialAspectRatio: 16 / 9,
+        aspectRatio: NaN,
+        zoomOnWheel: false
+      });
+    }
+  });
+
+  var inputImage = document.querySelector('[name="form[banner_image]"]');
+
+  inputImage.addEventListener('change', function(e) {
+    var files = e.target.files;
+    if (files && files.length) {
+      var reader = new FileReader();
+      reader.onload = function(e) {
+        var image = document.getElementById('image');
+        image.src = e.target.result;
+        if (cropper) {
+          cropper.destroy();
+        }
+        cropper = new Cropper(image, {
+          initialAspectRatio: 16 / 9,
+          aspectRatio: NaN,
+          zoomOnWheel: false
+        });
+      };
+      reader.readAsDataURL(files[0]);
+    }
+  });
+
+  document.querySelector('.banner-submit').addEventListener('click', function(e) {
+    e.preventDefault();
+    if (cropper) {
+      cropper.getCroppedCanvas().toBlob(function(blob) {
+        var formData = new FormData(document.querySelector('form'));
+        formData.append('admin_appearance[banner_image]', blob, 'cropped.jpg');  // Adjusted this line
+        $.ajax('/admin/appearance', {
+          method: 'POST',
+          data: formData,
+          processData: false,
+          contentType: false,
+          success() {
+            console.log('Upload success');
+          },
+          error() {
+            console.log('Upload error');
+          },
+        });
+      });
+    }
+  });
+</script>

config/locales/en.yml

@@ -202,7 +202,9 @@ en:
         show:
           forms:
             banner_image:
-              hint: "To use an image as a masthead background, you should use an image (JPG, GIF or PNG) that is at least 120 pixels tall and 1200 pixels wide. For best results, use an image at least 1800 pixels wide."
+              hint: |
+                To use an image as a masthead background, you should use an image (JPG, GIF or PNG) that is at least 120 pixels tall and 1200 pixels wide. For best results, use an image at least 1800 pixels wide.<br/>
+                Image can be cropped after upload, but be aware that the banner dynamically resizes with the window size. To restore full image after cropping, it is necessary to reupload the initial image.
             custom_css:
               confirm: "Custom CSS will always override other theming selections. Proceed?"
               warning: "If your theming customizations don't appear to be applying correctly, verify that they aren't being overwritten by Custom CSS."