Get image dimensions with Paperclip in Rails

Hi, it’s been some time since the last post. Lots of work and excuses.
Today I will present a challenge that I had in a new project. The client wanted the original dimensions when uploading images. So I made a private method to extract it with the help of ImageMagick’s Geometry module.

First, add new columns through a migration:

bundle exec rails g migration AddImageDimensionsToPosts
class AddImageDimensionsToPosts < ActiveRecord::Migration[5.0]
  def up
    add_column :posts, :image_width, :integer
    add_column :posts, :image_height, :integer
  end

  def down
    remove_column :posts, :image_width, :integer
    remove_column :posts, :image_height, :integer
  end
end
bundle exec rails db:migrate

Then implement the method:

class User < ApplicationRecord
  belongs_to :team
  has_attached_file :image, {
    styles: {
      new_thumb: 'x1144',
      new_medium: '1242x',
      web_feed: '600x',
      thumb: '200x'
    }
  }

  before_save :extract_dimensions

  # .....

  private
    def extract_dimensions
    tempfile = self.temp_image_url
    unless tempfile.nil?
      geometry = Paperclip::Geometry.from_file(tempfile.sub('https', 'http'))
      geometry.auto_orient
      self.image_width = geometry.width.to_i
      self.image_height = geometry.height.to_i
    end
  end
end

As you saw we replaced https with http because it gave problems with Amazon’s AWS security which is being used to save the files.

Next we wanted to update all the users’ images that were already in the system. And as a need we created the following script:

heroku run rails console

def update_posts
  time = Time.now
  posts_count = 0
  posts_total = Post.where(image_width: nil, image_height: nil).count
  Post.where(image_width: nil, image_height: nil).find_each do |post|
    image = post.image(:original)
    geometry = Paperclip::Geometry.from_file(image.sub('https', 'http'))
    geometry.auto_orient
    post.update_attributes(image_width: geometry.width.to_i, image_height: geometry.height.to_i)
    posts_count = posts_count + 1
    puts "#{posts_count}/#{posts_total}"
  end
  puts"#{Time.now - time}"
end

update_posts

We used the find_each method instead of each, with each all the objects are loaded into memory and find_each loads one by one and in our case was much faster as it did not stress the server.

var and let the difference in JavaScript

Javascrit has something called Hoisting. This is when all variables and functions are loaded before the program runs.

function loadProfiles(userNames){
// some code...

    var loadingMessage = "Hold a sec... Profiles loading!";
// some code...
}

var loadingMessage = "Loading your profile!";

What will happen here is that the first declaration of loadingMessage will be loaded first,then the second declaration will be loaded and overwrite the first. Which will not give us what we want.
To solve this issue ES6 or ES2015 came with a solution: let !

function loadProfiles(userNames){
// some code...

    let loadingMessage = "Hold a sec... Profiles loading!";
//some code...

}

let loadingMessage = "Loading your profile!";

These variables will load locally, saving memory without overwriting each other. If you console.log the loadingMessage variable after the loadProfiles method, the result will be different from if you ran inside the loadProfiles scope.
What is a scope? I’ll tell you later.

Hexadecimal and Colors

This week will be more related to the Front End side of web development. So I thought about colors which are used everywhere. The web is one of the technologies that uses all the human senses, it evolved to become an everyday tool and entertainment.
Today I will teach you how to calculate hexadecimal numbers and how they can be related to numbers.

Hexa-decimal: Hexa comes from the Greek word héx which means six. The decimal I’m sure that you already now.
Decimal numbers run from 0-9.

81 (decimal):
multiply the left by 10, (8x10)
multiply the right by 1, (1x1)
We get 81 decimal.
81 (hexadecimal):
multiply the left by 16, (8x16)
multiply the right by 16, (1x1)
By adding them we get 129 hexadecimal!

When we work with colors particularly RGB, the minimum value is 0 and maximum is 255.
With hexadecimal numbers we work with 3 pairs of Red, Green and Blue, hence RGB.
_ _  _ _  _ _
R     G     B

The minimum pair is 00 and maximum FF. Oh! Letters? Yes, I will show you in a bit how this works. As I said above the decimal numbers are limited to 0-9, so a few engineers had to figure out a way to solve the problem. To get things working they assigned the following values:

A = 10, B = 11, C = 12, D = 13, E = 14, F = 15

Few examples:

#FF0000
Red: (15x16) + (15x1) = 255
Green: (0x16) + (0x1) = 0
Blue: (0x16) + (0x1) = 0
Yes, you got it right, the color is full red! My favorite color.

#83d900
Red: (8x16) + (3x1) = 131
Green: (13x16) + (9x1) = 217
Blue: (0x16) + (0x1) = 0

#efcc3a
Red: (14x16) + (15x1) = 239
Green: (11x16) + (11x1) = 187
Blue: (3x16) + (10x1) = 58

And that’s it! You know how to calculate hexadecimal number and how they are related to numbers.