I recently discovered a useful tool that is part of the Broadleaf Commerce application which allows you to upload a single hi-resolution image that you can then manipulate through URL parameters.
If you've worked with mobile or tablet eCommerce applications then you know how important it can be to have web or mobile optimized images. Without a dynamic image server, you'd have to upload the same image in a variety of sizes.
Broadleaf Commerce solves that issue as well as a few others by providing an easy to use image manipulation system as part of the free open source version of the product.
This is best demonstrated by example.
If you'd like to follow along, you can create a free-demo site by following the instructions on our website's demo section.
Loading the Image
The first step is to load your hi-resolution image. I'm using one called sun.gif, negotiations were long, but Jerry's Demo store will finally be able to sell a variety of suns to remedy those gloomy, cloudy days.
To upload the image, log into the your demo store's admin. Go to Content Management -> Assets. Select 'Add', choose your file, enter the required information. I will use 'sun' for Item Name and '/sun.jpg' for Full URL.
Here is what the image looks like if I access it via the image server without any manipulation.
Through the Looking Glass...or Filters
There are two ways to work with the asset server, filters and named operations. For filters, you enter in the all the values directly into the URL. Using named operations, you have to run through a little more setup initially, but once done, it makes accessing them much cleaner. Setting up a named operation is outside the scope of this blog but at the end you will find a link to instructions on creating your own unique named operations as well as detailed information on the default filters.
Resizing the Image
The first image manipulation I'll do is to resize the image to use for displaying thumbnails then build on that for our remaining samples.
Let's start out by taking our image and making a thumbnail. This will help cut down the size of the file allowing less bandwidth to be taken up. To achieve this effect we will set the height amount and width amount to 80.
The two examples below show how you might use effects to control the colors of the image. We will create a red variation to make my sun look extra hot and a black and white variation, for those solemn winter months.
Red Sun Link
For this effect, in addition to the resizing to 80x80, we will manipulate the HSB factors, using -1 for hue, 1 for saturation and a 0.9 for brightness to make a little darker.
Black and White Link
Getting a black and white effect can be very straight forward by changing the saturation. To get the effect above, resize to 80x80 and the HSB factors will 1 for hue, 0 for saturation and a 1 for brightness.
There's still more!
The examples above are only a small sample of what you can do with the Broadleaf Commerce Dynamic Asset Server. You can also add blurs, crop images and more. For details, see the documentation.
Once we start to tap into all the available filters available the URL links provide a great way to quickly and easily manipulate the images uploaded to the asset server; but with each filter added, we add length (and complexity) to our URLs. We could craft the URLs and gingerly copy and paste them over and over, but there is a better way. We can use Named Operations.
Named operations allow us to combine a series of filters with defined values and give them a simple name. I will go into more detail on how to set these up with examples in an upcoming blog.
In the meantime you can find instructions on how to create your own named operations and how to use the asset server here:
We'd love to hear you feedback on this release and hope that this new tool helps improve your workflow!