Be careful naming images for Umbraco media

This post was imported from FARMCode.org which has been discontinued. These posts now exist here as an archive. They may contain broken links and images.
Well it's my first week at The FARM (who is now an Umbraco Solution Provider, we're the first in Australia!) I got to look at a bug which has been floating around for a while and no one could consistently replicate it or work out the problem.

To summarize the bug, some of the images which the client was uploading into the Umbraco Media section, then linking into the Umbraco WYSIWYG editor were being shown as broken images.
But only some images this was happening for, and we weren't quite sure which images were causing the problem and when we'd test with images they'd be fine.

So we had the client show us how to do it, in front of us and then we could dig into it a bit more, and while doing so I found something unexpected.
The problem was being caused by the image havine a file name like: MyImage_100x50.png, but the WYSIWYG editor would show MyImage.png as the URL. This obviously isn't right, so something was changing the image.

While digging into the TinyMCE code I found out that when it displays images it does a check for the image width & height in the image name, and removes it.

What... the... hell?! I'm looking at this code and I'm confused as anything about what's going on, I mean, why is it re-writing my image URL?
Oddly enough though, the image worked correctly on the published site so it was even more confusing!

After a quick email to the Umbraco core team I got a response from Niels stating that this code is meant to be there, and doing exactly what it was doing.
It turns out that when you go about resizing an image within TinyMCE itself Umbraco will then postfix the new dimensions into the URL in WidthxHeight. But since this isn't the real image URL it has to later strip it out.

So remember kids, don't put the image dimensions into the filename in Umbraco!

Author

Administrator (1)

comments powered by Disqus