November Happy Hour will be moved to Thursday December 5th.

Bartosz Sekula
Jan 21, 2019
  5668
(9 votes)

Image property editor enhancements

In the next release of CMS UI (version 11.15.0), we will be releasing a few more Image Property enhancements.

Based on a very positive feedback after the last improvements in that area that addressed only the Media Selector we decided to continue and this time try to improve the Editor itself.

The new editor looks like this:

editor.png

As you can see we can now see a bigger thumbnail (150x90) that is displayed together with the image filename.

User interaction remains the same, editor either clicks on the editor which shows the Media Selector that I mentioned earlier or drags & drops an image from the Assets Pane.

choosing_image.gif

Another useful feature is the ability to drag & drop a local image directly onto the property editor:

upload_local_image.gif

If the image file is big or the internet connection is slow you will see a progress bar together with a preview:

uploading_progress_bar.gif

The new editor is now turned on by default for all properties with UIHint("Image") and of type ContentReference or Url

[UIHint(UIHint.Image)]
public virtual ContentReference Image1 { get; set; }

[UIHint(UIHint.Image)]
public virtual Url Image2 { get; set; }
Jan 21, 2019

Comments

valdis
valdis Jan 23, 2019 11:14 AM

nice

Eric Petersson
Eric Petersson Jan 23, 2019 12:09 PM

very nice

Antti Alasvuo
Antti Alasvuo Jan 24, 2019 05:27 AM

Very nice feature and I believe editors will appreciate it.

Henrik Fransas
Henrik Fransas Jan 24, 2019 06:24 AM

Nice, fun to se some more improvements to the GUI!

Patrik
Patrik Jan 24, 2019 07:48 AM

Thumbs up!

Jan 25, 2019 09:01 AM

A nice start but what I'd really like to see in the API is some native out of the box image processing and manipulation features.

In a modern responsive website you always have to scale images and so far we have

  • ImageResizer - Has issues without paid version for caching and PNG compression
  • ImageProcessor - Currently IMO the best version for resizing

https://world.episerver.com/blogs/vincent-baaij/dates/2019/1/episerver-and-imageprocessor-new-crop-addition/ has added cropping support for images and hopefully is adding ratio support but I really think in the modern web stack that should be a CMS feature baked in rather than needing 3rd party solutions.

ImageProcessor works great but it would be nice for such a core part of the web development process to not need 3rd parties and I'm pretty sure EVERYONE is doing things like using image resizers and picture elements so when it's most people needing to have a package it should be part of core.

Toke Frostholm
Toke Frostholm Jan 28, 2019 08:02 AM

Nice feature, but I have to agree with Scoot Reed. 

Bartosz Sekula
Bartosz Sekula Jan 28, 2019 09:32 AM

Scott, you made a very good point.

However the enhancements I described are only relevant to the Edit Mode where we do not need to care so much about compression, resizing etc. we just wanted to improve the way editors can work with images.

Valina Eckley
Valina Eckley Feb 8, 2019 04:11 PM

This is awesome, and will be great for most of our authors.


However, we have a select groups of web authors whome we can't allow to be able to upload their own images, otherwise they will really break their pages. 

In the old version they were able to select from a list of approved images, and this works great for the admins to control. 

Is there way I can turn off the drag and drop feature for certain images?  Just allow them to select images again? 

Valina Eckley
Valina Eckley Feb 8, 2019 04:30 PM

I guess I could make it UIHint.MediaFile...

I woudn't put it against some of these users trying to link an PDF as an image.   

Henrik Fransas
Henrik Fransas Mar 7, 2019 04:41 PM

This is working great.

A small feature request though, could you make it display svg files also, now they look like a broken image

Minesh Shah (Netcel)
Minesh Shah (Netcel) Mar 28, 2019 05:11 PM

Placing an SVG in here is causing an 500 error can we revert back to the old Image Property Editor ? 

A bug was raised but status is set to closed will not fix 

John Ligtenberg
John Ligtenberg Apr 9, 2019 09:36 AM

I've also run into the problem with the SVG files, I hope this will be fixed.

Linus Ekström
Linus Ekström May 24, 2019 02:06 PM

Thanks for fixing this Bartosz!

Luc Gosso (MVP)
Luc Gosso (MVP) Sep 23, 2019 12:41 PM

Hi there Bart! How do we config the allowedExtenstions? for the direct upload? seems to be possible but how? default is set to: 

0: "svg"
1: "gif"
2: "jpg"
3: "jpeg"
4: "jpe"
5: "ico"
6: "bmp"
7: "png"

Thx

Please login to comment.
Latest blogs
Adding Geolocation Personalisation to Optimizely CMS with Cloudflare

Enhance your Optimizely CMS personalisation by integrating Cloudflare's geolocation headers. Learn how my Cloudflare Geo-location Criteria package...

Andy Blyth | Nov 26, 2024 | Syndicated blog

Optimizely SaaS CMS + Coveo Search Page

Short on time but need a listing feature with filters, pagination, and sorting? Create a fully functional Coveo-powered search page driven by data...

Damian Smutek | Nov 21, 2024 | Syndicated blog

Optimizely SaaS CMS DAM Picker (Interim)

Simplify your Optimizely SaaS CMS workflow with the Interim DAM Picker Chrome extension. Seamlessly integrate your DAM system, streamlining asset...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Optimizely CMS Roadmap

Explore Optimizely CMS's latest roadmap, packed with developer-focused updates. From SaaS speed to Visual Builder enhancements, developer tooling...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Set Default Culture in Optimizely CMS 12

Take control over culture-specific operations like date and time formatting.

Tomas Hensrud Gulla | Nov 15, 2024 | Syndicated blog

I'm running Optimizely CMS on .NET 9!

It works 🎉

Tomas Hensrud Gulla | Nov 12, 2024 | Syndicated blog