Created
June 9, 2015 00:49
-
-
Save joshmn/4eee52f1bb2c1e2846e6 to your computer and use it in GitHub Desktop.
Multiple specific cropped positions a single Paperclip record
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- to your form partial. yes, you could do this more dynamically, but for illustrative purposes. --> | |
<select id="style_select"> | |
<option></option> | |
<option value="cover" data-style-options='{"option": "setCropBoxData", "data": {"width": 1200, "height": 628}}'>Cover</option> | |
<option value="medium" data-style-options='{"option": "setCropBoxData", "data": {"width": 628, "height": 840}}'>Medium</option> | |
<option value="small_sq" data-style-options='{"option": "setCropBoxData", "data": {"width": 470, "height": 470}}'>Small Square</option> | |
<option value="thumb" data-style-options='{"option": "setCropBoxData", "data": {"width": 128, "height": 128}}'>Thumb</option> | |
</select> | |
<% %w{cover large medium medium_sq small small_sq thumb}.each do |w| %> | |
<%=w%>: <input class="form-control style_data" data-style-for="<%=w%>" type="text" name="image[crop][<%=w%>]" placeholder=""><br/> | |
<% end %> | |
<script> | |
$('#style_select').on('change', function() { | |
var t = $('#style_select option:selected').attr('data-style-options'); | |
var j = JSON.parse(t); | |
$('.img-container > img').cropper(j.option, j.data); | |
}); | |
$('#set').on('click', function() { | |
var sel = $('#style_select option:selected'); | |
$('.style_data[data-style-for="' + sel.val() + '"]').val(JSON.stringify($('.img-container > img').cropper("getCropBoxData"))); | |
}); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
If you have sizes, say, | |
`` | |
has_attached_file :content, | |
:styles=>{:cover => "1200x628#", :medium => "626x840#", :small_sq => "470x470#", :thumb => "64x64#" | |
`` | |
And you want to crop them individually them using something like [cropper](http://fengyuanchen.github.io/cropper/), here's the tricks. | |
Ensure that you're all ready to go with the Cropper demo. Drop the assets in and load up the page. | |
Add this guy to your form partial: | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
and you should be ready to go. make sure you permit the attributes. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# add ManualCrop as a processor | |
has_attached_file :content, | |
:styles=>{ :cover => "1200x628#", :medium => "626x840#",:small => "470x246#", :thumb => "64x64#"}, | |
:processors => [:shiny], | |
... | |
attr_accessor :cropper_data | |
def cropping? | |
!self.cropper_data.nil? | |
end | |
def convert_options(style) | |
{ | |
:left => self.cropper_data[style]['left'], | |
:top => self.cropper_data[style]['top'], | |
:width => self.cropper_data[style]['width'], | |
:height => self.cropper_data[style]['height'] | |
} | |
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
# /lib/paperclip_processors/manual_crop.rb | |
module Paperclip | |
class ManualCrop < Thumbnail | |
def transformation_command | |
if crop_command | |
crop_command + super.join(' ').sub(/ -crop \S+/, '').split(' ') | |
else | |
super | |
end | |
end | |
def crop_command | |
if @attachment.instance.cropping? | |
target = @attachment.instance.convert_options(options[:style]) | |
["-crop","#{target[:width].to_i}x#{target[:height].to_i}+#{target[:left].to_i}+#{target[:top].to_i}"] | |
end | |
end | |
end | |
end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment