Imagine this; you're about to make an email campaign with text and images. Problem is you neither have nor desire to work with an image editing tool and your designers don't have time...
- Sincerly every Marketer
What's the whole deal anyway
Essentially what we're challenging is, why you do you even have an image editing tool in your process to begin with, once you've set up a template and started production?
If the point of a template is so everything is done consistently and on-brand all the time, then surely the template should also be able to crop whichever image I as a user upload to it, regardless of the image material. I mean a designer can surely explain it in words how they want it to look and feel.
And here lies the challenge...
Because making a template, consists of equal part code equal part design rules and that's hard expressing in just HTML and CSS, without visual examples and words. Individually they're just ideas, but combined they form what we call a template.
What can be done
So knowing that is a challenge every marketer, designer and developers are facing on a daily basis we've tried to combine all of their needs into one single solution.
We've simply made it so you don't need to edit the images anymore - you simply just have to drop in the original image to a Block, and automatically it will be cropped/scaled/edited to whatever the Designer or Developer intended it should look like. Simple as that!
"The industry doesn't need another built-in image processing tool where the user can crop or put a tint on their image themselves- we need the template to do it for us automatically"
- Filip Bisp, CEO & Co-founder, Alpaco
What's even better, once you've uploaded your original image, you don't need to keep doing that over and over again for different Blocks - it's all stored in our Asset Manager, ready to be used for any other Block you may need to fit it in. Gone are the days of repeating yourself, trying to find that image again in your bin you deleted 3 months ago.
Why does it matter
We think It's an upgrade from what we're used to in email marketing. The industry doesn't need another built-in image processing tool where the user can crop or put a tint on their image themselves- we need the template to do it for us automatically.
This helps everyone in the process to stay on brand, so they don't need to remember all these small details about each part of the design.
As an author you stay productive because you don't have to take your eyes off your content production, to go work in another interface and cropping images.
It also gives you the ability to optimize each image, so it is scaled to the exact dimensions that is needed for whichever Block it's used in while compressing size for speed. This saves performance, which can have all sort of derived effect.
But most important, removes unnecessary time spent tinkering with image processing tools in a dis-jointed process away from the campaign you're actually trying to create.
-
Stay on brand
-
Stay productive
-
Optimize image dimension and size
-
Save unnecessary time spent in image processing tools
How does it work
From a user perspective there's really nothing more to it. It's just as simple as dragging in an image into the Block either from their desktop, a URL or the Asset Manager as shown in the examples above.
However from a Designer or Developers aspect it's a lot more juicy. We've made the functionality available to you so you have free reign over how your images performs in your template and the different scenarios you want to take into account.
Example of automatic image manipulation
<img src="{{ image_gallery.img.url | image: width: 80, height: 120, dpr: 2, trim: '90,0,90,0', fit: 'cover' }}" width="80" style="width: 80px; display:block; border: 0;" class="w-gallery" />
In the example we set the width, height, DPR, trim the top and bottom and lastly ensures the image is scaled up to cover the new dimensions.
Best thing is you can combine it with virtually any rule you can create in the our templating language, for instance: "add a play icon on top of the image, if the user enables a specific toggle" without having to instruct the user to have to upload the image again after doing so.
That's the general concept of it. For more in-depth we refer to our documentation.
It's an immensely powerful and flexible aspect of our platform and a thing we've needed throughout our time in the industry - so we went ahead and build it, for all of you to enjoy🦙
