Blog Post - 3. April 2019
ActiveStorage avatar image with resize crop

ActiveStorage avatar image with resize crop

I recently struggled a little with the (almost) new Rails 5 ActiveStorage image upload. I usually used Paperclip for handling and converting image uploads with Rails. Following the official docs, the upload itself was very easy but I needed some time to figure out e.g. how to convert an image afterwards using mogrify commands (docs).

To convert an image to a former 'resize-fit' image with dimensions 256x256 and then crop to a centered square image, you need to use:

= image_tag user.avatar.variant(combine_options: {resize: '256x256^', extent: '256x256', gravity: 'Center'})

The resize option value remains the same, extent sets the desired proportions and gravity sets the position of the crop. If the options should be combined, you need to use combine_options. In the official docs there are a lot of examples like simple resizing, where you don't need to wrap the options into a combine_options-Hash. e.g.

= image_tag user.avatar.variant(resize: '256>')

The combine_options-Hash isn't documented at all, what caused me a lot of trouble, because I tried setting the options like this:

= image_tag user.avatar.variant(resize: '256x256^', extent: '256x256', gravity: 'Center')

And in this case the gravity-Option was ignored all the time.