SaaS CMS has officially launched! Learn more now.

Stephan Lonntorp
Feb 1, 2018
  2403
(2 votes)

Clean and unique media URLs with ImageResizer.NET presets

For a while I've been working on cleaning up the urls generated for images, to ensure that they are clean, cacheable, and preferrably querystring-free. Previously, I have been using IIS URL Rewrites to achieve this, but I have always known there are better ways, but just haven't gotten around to it yet. Better, meaning fewer moving parts, and a drop-in solution.

Yes, I am well aware of the built-in functionality of naming blob properties on media items and tacking on an attribute to get a scaled image, but image optimization is far more than just resizing, and a component like ImageResizer is a really great tool to have in your site. It really is worth the cost.

So, without further ado, here's "UniqueUrlFolderPresets", I didn't know what to name it, but this name is as good as any :)

What does it do?

It takes a media URL, like "/globalassets/my-images/my-image.jpg" and prepends it with a 8 character hash based off of the media item's last saved date. Out of the box, it also adds a max-age header, that caches it for a year. Yes, that's configurable. I know, this isn't a very new concept, but AFAIK no one has done it in conjunction with resizing images. This is the "UniqueUrl" part of the add-on.

The second part, the "FolderPresets" part, has support for imageresizing.net's presets as part of the segments of the URL, as opposed to tacking on an ugly querystring. I've added a couple of really simple UrlHelper extensions to help with generating the URLs, but in essence, if you prepend your image URL with "/optimized/<preset>", it will apply that preset, if it exists, to the image request. If the preset doesn't exist, it'll give you a 404. Yes, the "optimized" part is also configurable.

It should work with any other ImageResizer plugins, but I haven't tested it that much, please help with that. If you have clientcaching configured for imageresizer, this plugin replaces that, so you can remove it.

If there's no hash in the URL, you'll get a 301 redirect to the latest version (hash), and if there's an old hash in the url, you'll also get a 301 redirect.

Hopefully, someone besides me will find this useful. And as usual, I'm open to feedback and suggestions. Use github for that.

There's also a back-port for CMS 10, if you have yet to upgrade, you'll find it here.

Feb 01, 2018

Comments

valdis
valdis Feb 1, 2018 03:34 PM

why just not merge together with core IR plugin for Epi? ;))

Please login to comment.
Latest blogs
A day in the life of an Optimizely Developer - London Meetup 2024

Hello and welcome to another instalment of A Day In The Life Of An Optimizely Developer. Last night (11th July 2024) I was excited to have attended...

Graham Carr | Jul 16, 2024

Creating Custom Actors for Optimizely Forms

Optimizely Forms is a powerful tool for creating web forms for various purposes such as registrations, job applications, surveys, etc. By default,...

Nahid | Jul 16, 2024

Optimizely SaaS CMS Concepts and Terminologies

Whether you're a new user of Optimizely CMS or a veteran who have been through the evolution of it, the SaaS CMS is bringing some new concepts and...

Patrick Lam | Jul 15, 2024

How to have a link plugin with extra link id attribute in TinyMce

Introduce Optimizely CMS Editing is using TinyMce for editing rich-text content. We need to use this control a lot in CMS site for kind of WYSWYG...

Binh Nguyen Thi | Jul 13, 2024