Instantly share code, notes, and snippets.

@metaskills /demo.rb
Last active Nov 28, 2018

Embed
What would you like to do?
Using IMGIX to Personalize Knolled Images
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
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment