Image Cropping With Rails 3

I was looking at some options for the Image Cropping functionality with Rails 3 and got many great solutions on the net. This Rails Cast is the best place to start if you have the images stored as local. If you have it as s3 storage there are some changes you need to make.

My main haml file has these contents -

#cropperpopup.lpopup.x 
  %a.ccloser 
  %p.large Image Cropper 
  .cropper 
    = image_tag @user.avatar.url(:medium), :id => :cropbox 
  = form_for @user, :html => {:class => 'edit_user_two'} do |f| 
    - for attrbt in [:crop_x, :crop_y, :crop_w, :crop_h] 
      = f.text_field attrbt, :id => attrbt, :class => :coordinate 
    = f.submit 'Crop'

When on calls the popup, one should call the code for the Jcrop method

$('img#cropbox').Jcrop({ 
  onChange: update_crop, 
  onSelect: update_crop, 
  setSelect: [0, 0, 168, 202], 
  aspectRatio: (168/202) });

My aspect ratio setting is with respect to the configurations I did for the has_attached_file :avatar.

The thing you will have to do specifically for s3 is in the avatar_geometry method.


def cropping? 
  !crop_x.blank? && !crop_y.blank? && !crop_w.blank? && !crop_h.blank? 
end 

def avatar_geometry(style = :medium) 
  @geometry ||= {} 
  path = (avatar.options[:storage]==:s3) ? avatar.url(style).split(' ').join('%20') : avatar.path(style) 
  @geometry[style] ||= Paperclip::Geometry.from_file(path) 
end

Inside the model.

I'm having issues with the cropper processor and its not cropping fine. Will have to fix that. This is the Cropper

module Paperclip 
  class Cropper < Thumbnail 
    def transformation_command 
     if crop_command 
       r = super 
       if r.class == Array 
         r = r.join(' ') 
       end 
       crop_command + r.sub(/ -crop \S+/, '').sub(/-resize \S+/, '') 
     else 
       super 
     end 
   end 
   def crop_command 
     target = @attachment.instance 
     if target.cropping? 
       "-resize \"168x202\" -crop #{target.crop_w}x#{target.crop_h}+#{target.crop_x}+#{target.crop_y} " 
     end 
    end 
  end 
end

Orientation changes for iPad - Secha & PhoneGap

I was working on a mobile application developed for iPhone. The application was built using Sencha Touch and PhoneGap. Its great what these guys have done to bridge the gap between Objective C and HTML/JavaScript/CSS. The application now wants to be run on iPad.

The orientation was something that caused a problem here. The call back for the orientation, onorientationchange, was not being called for some reason. I went through most of the content in the web which described the problem. Solutions were limited.

I tried putting window.onorientationchange, added event listeners for orientation and even added Objective C code ! Did not work ...

Thats when onWindowResize came into picture. The code started working. But just once. You change orientation and that works just once. The code goes something like :

var or = function(){ 
    // alert( Ext.getOrientation()); 
    var width = (Ext.getOrientation()=="landscape") ? window.innerWidth-1 : window.innerWidth; 
    panel.setOrientation( Ext.getOrientation() , width , window.innerHeight ); 
    panel.el.parent().setSize(width, window.innerHeight); 
    // return 0; 
    panel.doComponentLayout(); 
} 
Ext.EventManager.onWindowResize(or);

The alert function caused a lot of issues for me. Firstly it creates an exception on the Objective C side. Signal Exception of some kind which says arguments are expected of a different kind. The setOrientation call is necessary for the panel to know the orientation. This did not update the width and height of the panel for some odd reason. So I did it manually by calling the setSize and to make sure I called the doComponentLayout.

Well, the code works now. This is for reference for all those people who have not still got the answers for this question.

Kudos !

Rails Again

I started digging into Rails again. The stuff I started to do was quite straight forward. The DB access, change routes etc. But the things I want to talk about was Haml and Coffeescript.

Haml :
Wow ! Just Wow !
I always wanted a templating engine which I could use to write easy code. Writing HTML was never so fun. The syntax might seem to be complex but trust me it gets to be fun. 

Just add a
config.generators do |g|
      g.template_engine :haml
end
in application.rb after adding the haml gem and the haml-rails gem.

Coffeescript :
This is an intermediate compiler which converts a file into javascript. Eliminate your braces and semicolons with coffeescript. The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript implementation, and tends to run as fast or faster than the equivalent handwritten JavaScript.

You will have to install barista, bisttro_car, coffeescript and coffeescript-script gems. I found an article which would be useful here.

Have Fun coding !

Oatmeal

The oatmeal has been one of the best sites for satirical humour. Just pasting one of their comics :)