Built-In Image Slicing

Dynamic Image Slicing


Next, I'll cover image slicing in Campaign-Genius. This is not a function that everybody is going to use, but there are industries that still use what's called image slicing to send an image broken up into pieces. We thought that it was a wonderful technical challenge to be able to deliver a dynamically composed image in image slices. So that's what this function handles. It's probably faster than using photoshop for image slicing! 

In concept, it's fairly simple. You just divide your image into the size grid that gives you pieces and targets that fit the subject matter. So I'll put that in English instead. I've divided this into a three by three right now, which isn't a half bad target. Most of that first name block sits there, upper left in a one and most everything else is in a three. So if I was just going target those by url, you noticed we shade that a little bit so that you can see in the overlay up there, that it's actually got a url target.

In this one, we're going to send off to Google for no particular reason. We'll get rid of row, so I'm a one is going to be hyperlinked to Campaign-Genius.com and a three is going to be hyperlinked to Google and we're gonna try and initial table width of 699. This image is 600 wide. The math for image slicing gets a little tricky so there's a little bit of trial and error involved, but that big block of not particularly attractive html, we'll deliver this image sliced up and it will deliver the changes to the image as well. You'll note that my cursor changes when I hover over that top left. Aristotle is about where breaks and there a cut. I've got a different slice and then likewise, I've got a cursor to google.com when I'm in the bottom left.

So that's actually composed of nine separate busted up images. it's actually slightly faster in delivery because we cache any of the unchanged parts and they'll get there quicker. Only the changed slices will be regenerated.

Copy that block of html; that's what the little copy symbol does for you. And you'll notice that we were actually passing the parameters multiple times. Eat we pratt, we're passing the first name. If you're concerned about the size of the html in your template, you could go in and trim some of that out. Like hypothetically, I could say, I don't need to pass the parameters for some of these slices.

It's a little difficult to make that, to make that judgment call on size automatically. We couldn't do that very well in code, but you could certainly eyeball it manually and say, gosh, I don't need to pass any data at all in c, one, c, two c three because I don't see anything in the image underneath those blocks. that would only matter if you really are concerned about the size of the html. You can also, by the way, change to the alternative backgrounds and rerun the same thing.

Let's say we're going to hyperlink her face because we think people are likely to click there. I'm just regenerate the slice and I should see the image coming in in pieces on this width. Six slash 99 worked out. If you see white lines across the slices, they will typically show up in on the last row. It's just because the image size didn't divide evenly when sliced up into that number of rows and columns. So for better or worse, if you see white lines, tweak the width, drop it down by a few pixels and click show slice to regenerate it until you get a size that slices up evenly and nicely and looks good when the resulting blocks come in.