Computers, Open-source, Ruby, Software

Don’t Use “#” In the Paperclip Gem

I’ve learned a whole lot more about ImageMagick commands last week than I ever really wanted to know. The problem was that our uploaded images were having content cropped off the top, bottom, and sides.  Like many folks in the Rails world, we pass our attachments through Paperclip to handle all of the nitty gritty resizing operations.

I was interested in understanding how we could prevent our content from being cropped off when I came across an interesting idiom in the geometry settings:

has_croppable_attachment :image,
styles: {
:'630x315' => { geometry: "630x315#", format: :jpg },
}

Well take a look at that. There is a “#” symbol suffixed to my image geometry. I went to ImageMagick to lookup what this flag meant. Spoiler alert: It doesn’t exist there. After some digging around, I discovered that this idiom is provided by the Paperclip gem, and translates to the following convert command:

convert '/path/to/source.jpg' -resize "630x" -crop "630x315+0+0" '/path/to/output.jpg'

You can see the resize + crop combination of commands being built by Paperclip according to their documentation:

Paperclip also adds the “#” option (e.g. “50×50#”), which will resize the image to fit maximally inside the dimensions and then crop the rest off (weighted at the center).

Well, that is no good! If an image is not a 2:1 aspect ratio as per my dimensions 630×315 (or whatever aspect ratio you have) YOU WILL LOSE CONTENT! Time to rethink this…

The dimensions are 306x306
The dimensions are 306×306

 

The image was scaled until it was large enough to cover a 630x315 canvas, then the tops and bottoms cropped off
The image was resized until it was large enough to cover a 630×315 canvas, then the top and bottom was cropped off

Instead of resizing maximally (so that an image is a minimum of 630 width AND a minimum of 315 height) lets resize minimally (so that an image is a maximum of 630 width OR 315 height). The aspect ratio is preserved in both scenarios.

We want to resize while preserving aspect ratio , but we also need to make our canvas 630×315. The canvas dimensions are referred to as the extent command. When we do this, we will likely have space on the top and bottom, or sides we need to fill to have exactly these dimensions. What you fill this background with can be a color (in my case white). We also likely want to center the minimally resized image on this canvas. You can pass these convert options into Paperclip like so:

convert_options: {
:'630x315' => " -background white -gravity center -extent 630x315",
}

The resulting command will look something like this:

convert '/path/to/source.jpg' -resize "630x315" -background white -gravity center -extent 630x315 '/path/to/output.jpg'

Notice that our lossy crop flag has been replaced with a nicer extent flag. We can see the results this has on a similarly sized image:

We have an image smaller than the target 630x315
We have an image smaller than the target 630×315

 

We now have a 630x315 image with the sides filled in with a white background to preserve the dimensions
We now have a 630×315 image with the sides filled in with a white background to preserve the dimensions. Note the sides of the image are white.

As a final note, this works for both images larger and smaller than the target outcome dimensions. Looking at the ImageMagick documentation for flags can be helpful, but daunting as the real power lies in chaining multiple flags for a desired effect.

With a little effort I was able to get what is (in my opinion) a better image resize with just a few custom flags.

Computers

Angular.js – An introduction for the unitiated

Angular.js 1.x presentation outlining resource management, view templating, filtering, directives, two way data binding, managed event bindings, routing.

Demo referenced in slides can be found at https://github.com/bsimpson/angular_pdx

Download the git repo, and to pull up the relevant demo code, use git checkout to switch to the relevant tag. Tag names are self descriptive and usually align with the slide title

Computers

I’m a new dad again!

The last week has been the most wonderful week of the entire year. I got to bring home my daughter, Adeline Bree Simpson, born November 15th at 5:12pm. We delivered at North Fulton hospital about 20 minutes from our house and were blessed to have family and friends all come and visit us in the following few days. Quite a different experience than we had with Morrigan in the freezing cold month of January in Rhode Island’s Women and Infants. We did that one with my mother-in-law Brenda. It was six months before my parents even got to see our daughter because of the distance.

I’ve taken two weeks of vacations (and called it paternity leave) to really get some time in with Adeline, and destress, and get some things done around the house while helping out my wife while she recovers. With all this time off, I’ve forgotten how much newborns sleep. Pretty much all day, which leaves me with a lot of free time. I’ve been keeping myself busy with projects. I scored a new sit/stand desk off Craigslist and moved the old desk out of my office single handedly. No small feat considering the weight of the old desk.

I’ve also cleaned out and organized often forgotten corners of the house including the “junk drawers”, and the closets. I’ve donated books to the library, and food we don’t plan to eat to the Norcross co/op for hungry families. I cooked steaks with rosemary and garlic mashed potatoes and side salad for Kristin’s birthday, and scheduled a party for her over the weekend with family and friends. I’ve also been keeping our two year old daughter busy by including her in a lot of activities and taking her to go play at the indoor playground (its cold outside!) I had plans to tackle the backsplash, however my wife has asked for a hiatus on new projects because I’m stressing her out.

I’m thankful for my new addition, and how mature my daughter has been adjusting to the new family dynamics. I’m glad to do it this time around in a house we own with plenty of space, a good job, and no move looming over our heads. Its been a good year and I’d be happy to live out the rest of my life just like the last week has gone.