Crop Image
Crop the image by clicking and dragging the mouse over the image.
Pressing "Save Image" will crop the image and insert it into the page.
<%= cropper_image_tag({ :url => File.join('content', @pg.path, @image_file) }) %>
<%= form_remote_tag :update => 'insert_image_dialog_content', :url => { :action => "save_crop", :id => @pg, :filename => @image_file } do -%>
Adjust Crop:
<%= text_field :selection, :x2, :size => 3, :onkeyup => "resizeCropper();" %> x <%= text_field :selection, :y2, :size => 3, :onkeyup => "resizeCropper();" %>
Output Image Dimensions
<%- if defined?(CmsImageCropPresets) -%>
Presets:
<%- CmsImageCropPresets.each do |name, dimensions| -%>
<%= "#{name} (#{dimensions[0]}x#{dimensions[1]})" %>
<%- end -%>
<%- end -%> <%= text_field :image, :max_width, :size => 3, :value => @width, :onchange => "deselectAllPresets(); recalculateHeight();" %> x <%= text_field :image, :max_height, :size => 3, :value => @height, :onchange => "deselectAllPresets(); recalculateWidth();" %> <%= javascript_tag "$('image_max_width').onkeydown = disableEnterKey; $('image_max_height').onkeydown = disableEnterKey;" %> <%= image_tag('management/icon_unlocked.png', :id => 'icon_unlocked', :onclick => "deselectAllPresets(); lockImageSize();") %> <%= image_tag('management/icon_locked.png', :id => 'icon_locked', :onclick => "deselectAllPresets(); unlockImageSize();", :style => 'display: none;') %> <%= link_to_function "Apply", "resizeCropperScaled();" %> | <%= link_to_function "Reset", "cropper.reset(); resize_ratio = 1.0;" %>
<%= sprintf("%.3f", @aspect_ratio) %>
<%= text_field :image, :x1, :style => "display: none" %> <%= text_field :image, :y1, :style => "display: none" %> <%= text_field :image, :x2, :style => "display: none" %> <%= text_field :image, :y2, :style => "display: none" %> <%= text_field :image, :width, :style => "display: none" %> <%= text_field :image, :height, :style => "display: none" %>
<%= submit_tag 'Save Image', :class => 'form_button', :style => 'width: 90px;', :onclick => 'cropper.remove(); this.disabled = true; this.value = "Saving...";' %> <%= link_to_function "Cancel", "cancelInsertImage();" %> <%- end -%>