Using IMGIX to Personalize Knolled Images

demo.rb

require 'open-uri'
require 'bundler/inline'

gemfile true do
  source 'https://rubygems.org'
  gem 'imgix'
  gem 'launchy'
end

DESIGN_URL = 'https://www.customink.com/email/imgix/design.png'
IMGIX_CLIENT = Imgix::Client.new host: ENV['IMGIX_SOURCE']

def ixpath(filename)
  IMGIX_CLIENT.path "/email/imgix/#{filename}"
end

# First Placement
# ---------------

Launchy.open ixpath('knolled.jpg').to_url(
  blend64: DESIGN_URL,
  bw: 110, bh: 80,
  bx: 40,  by: 130,
  bm: 'normal',
  fm: 'jpg',
  q: '90'
)

Launchy.open ixpath('knolled.jpg').to_url(
  blend64: DESIGN_URL,
  bw: 110, bh: 80,
  bx: 40,  by: 130,
  bm: 'normal',
  ba: 'middle,center', # Overridden by `bw/by` params.
  fm: 'jpg',
  q: '90'
)

Launchy.open ixpath('knolled.jpg').to_url(
  blend64: DESIGN_URL,
  bw: 110, bh: 80,
  bx: 40,  by: 130,
  bm: 'normal',
  bf: 'clip', # Best option, but already the default.
  fm: 'jpg',
  q: '90'
)

# New Placement Approach
# ----------------------

Launchy.open ixpath('1px.png').to_url(
  w: 110,  h: 80,
  fit: 'crop',
  blend64: DESIGN_URL,
  bw: 110, bh: 80,
  bm: 'normal',
  bf: 'clip',
  fm: 'png'
)

Launchy.open ixpath('1px-debug.png').to_url(
  w: 110,  h: 80,
  fit: 'crop',
  blend64: DESIGN_URL,
  bw: 110, bh: 80,
  bm: 'normal',
  bf: 'clip',
  fm: 'png'
)

Launchy.open ixpath('knolled.jpg').to_url(
  blend64: ixpath('1px-debug.png').to_url(
    w: 110,
    h: 80,
    fit: 'crop',
    blend64: DESIGN_URL,
    bw: 110,
    bh: 80,
    bm: 'normal',
    bf: 'clip',
  ),
  bx: 40,
  by: 130,
  bm: 'normal',
  fm: 'jpg',
  q: '90'
)


# Peeling Back The Layers
# -----------------------

WIDTH  = 600
HEIGHT = 432
ONEPX  = ENV['DEBUGPX'] ? '1px-debug.png' : '1px.png'

Launchy.open ixpath(ONEPX).to_url(
  w: WIDTH,
  h: HEIGHT,
  fit: 'crop',
  blend64: ixpath(ONEPX).to_url(
    w: 110,
    h: 80,
    fit: 'crop',
    blend64: DESIGN_URL,
    bw: 110,
    bh: 80,
    bm: 'normal',
    bf: 'clip',
  ),
  bx: 40,
  by: 130,
  bm: 'normal',
  fm: 'jpg',
  q: '90'
)


# Stacking The Deck
# -----------------

def design_layer(bw:, bh:, bx:, by:)
  ixpath('1px.png').to_url({
    w: WIDTH,
    h: HEIGHT,
    fit: 'crop',
    blend64: ixpath(ONEPX).to_url({
      w: bw,
      h: bh,
      fit: 'crop',
      blend64: DESIGN_URL,
      bw: bw,
      bh: bh,
      bm: 'normal',
      bf: 'clip'
    }),
    bx: bx,
    by: by,
    bm: 'normal',
    mark64: block_given? ? yield : nil,
    markx: 0,
    marky: 0
  })
end


# Putting It All Together
# -----------------------

Launchy.open ixpath('knolled.jpg').to_url({
  blend64: design_layer(bw: 110, bh: 80, bx: 40, by: 130) {
    design_layer(bw: 115, bh: 115, bx: 240, by: 130) {
      design_layer(bw: 42, bh: 42, bx: 495, by: 155) {
        design_layer(bw: 15, bh: 20, bx: 485, by: 295)
      }
    }
  },
  bm: 'normal',
  fm: 'jpg',
  q: 90
})