I'm currently in the process trying to get Elijah Glover's Umbraco S3 Provider (https://github.com/ElijahGlover/Umbraco-S3-Provider) going on a new Umbraco 7.2.5 site. This approach allows the use of an included VirtualPathProvider to be used so that the entire path of an S3 hosted image doesn't need to be saved into the CMS, instead it saves the relative path.
I prefer this approach to some of the other S3 providers out there which either save the entire path to the file, or require a local duplicate of the file to be kept in addition to the S3 one.
I've got the S3 file provider up and running and it's working great except it seems to struggle with with ImageProcessor. Using the S3 Provider's VirtualPathProvider, I can link to an image at http://www.my-website.com/media/1002/sample-1.jpg and it will serve the file from my S3 bucket seamlessly. The problem with ImageProcessor is that as soon as I add width or height to the url eg. http://www.my-website.com/media/1002/sample-1.jpg?width=100 , ImageProcessor is invoked, and it returns a 404.
At a guess, I'm assuming that ImageProcessor is trying to fetch the image by it's local physical path, the image doesn't exist, and it throws a 404. Is it possible to configure ImageProcessor/Umbraco in a way which will fetch the image from my S3 bucket by default instead of from the local filesystem?
I'm thinking I need to alter the LocalFileImageService to use a RemoteImageService instead of the Local service... just trying to nut out the right configuration (and or write my own service) to get it going though. Any pointers still greatly appreciated :)
Yeah... You'll have to use the remote image service. ImageProcessor doesn't know Umbraco exists so can't tap into it's provider system... Unless you replaced the LocalFileImageService with your own Umbraco version.
Thanks a lot James, you've definietley pointed me in the right direction. I had a dig around in the source to work out what was going on and built an extremely quick and dirty service to replace the LocalFileImageService of my own to make it play nice with Umbraco.Storage.S3.
I wrote my own service, because RemoteService seems to be expecting a fully qualified path, but with Umbraco.Storage.S3 configured with the Virtual Path Provider maintains the same relative/local paths that out of the box Umbraco has. So instead, in GetImage() I'm grabbing the local path, converting it into relative path to the media directory then prepending the bucket hostname to produce a fully qualified path that can be fed to ImageProcessor.
Hi James, (or anyone else!) I've just run into another slight problem which is slightly related. I've noticed that when I insert an image with the RTE in Umbraco and then resize using the draggy corner resize toggle thingies (I'm sure there's a technical name for this), the RTE changes the src url of the image tag to have its width and height as ?width=300px&height=200px as in, it adds "px" to the dimensions. When there is "px" in the querystring It seems that ImageProcessor still runs, and it outputs a file to the cache, but that image is not resized.
I've noticed this happening both with my custom service, and with your standard Local File Service. I'm not sure if this is a problem with ImageProcessor or a problem with Umbraco, but, I don't suppose you know of any workaround for this? I've updated to the latest versions of ImageProcessor and ImageProcessor.Web from nuget, and have the latest Umbraco as well.
Yeah... ImageProcessor is picking up that someone is adding querystring params to the image request but those requests don't match the API. To be honest I have no idea why Umbraco would be generating them, to me it's a bug in Umbraco.
Earlier versions used to generate a new image if you resized it inside the RTE, and name it something like "/myImage_300x200.jpg" - I guess that the inclusion of ImageProcessor in the Core product, made it feasible to just use its resizing features - but then it was probably just implemented wrongly?
I guess I'll go check for an issue in the tracker about that...
404 when media is provided by a VirtualPathProvider (Umbraco.Storage.S3)
G'day folks,
I'm currently in the process trying to get Elijah Glover's Umbraco S3 Provider (https://github.com/ElijahGlover/Umbraco-S3-Provider) going on a new Umbraco 7.2.5 site. This approach allows the use of an included VirtualPathProvider to be used so that the entire path of an S3 hosted image doesn't need to be saved into the CMS, instead it saves the relative path.
I prefer this approach to some of the other S3 providers out there which either save the entire path to the file, or require a local duplicate of the file to be kept in addition to the S3 one.
I've got the S3 file provider up and running and it's working great except it seems to struggle with with ImageProcessor. Using the S3 Provider's VirtualPathProvider, I can link to an image at http://www.my-website.com/media/1002/sample-1.jpg and it will serve the file from my S3 bucket seamlessly. The problem with ImageProcessor is that as soon as I add width or height to the url eg. http://www.my-website.com/media/1002/sample-1.jpg?width=100 , ImageProcessor is invoked, and it returns a 404.
At a guess, I'm assuming that ImageProcessor is trying to fetch the image by it's local physical path, the image doesn't exist, and it throws a 404. Is it possible to configure ImageProcessor/Umbraco in a way which will fetch the image from my S3 bucket by default instead of from the local filesystem?
thanks for your time!
I'm thinking I need to alter the LocalFileImageService to use a RemoteImageService instead of the Local service... just trying to nut out the right configuration (and or write my own service) to get it going though. Any pointers still greatly appreciated :)
Update
A better answer to this problem can be found in the forums here
https://our.umbraco.org/forum/developers/api-questions/75142-images-with-querystring-using-s3-storage-throwing-500-error-articulate-blog-issue#242353
Yeah... You'll have to use the remote image service. ImageProcessor doesn't know Umbraco exists so can't tap into it's provider system... Unless you replaced the
LocalFileImageServicewith your own Umbraco version.Config-wise the setup is simple though.
You'll need to add your S3 bucket to the whitelist of allowable urls. http://imageprocessor.org/imageprocessor-web/configuration/#securityconfig
You don't have to be terrible specific with this url, just the domain should do it.
Let me know how you get on.
Incidentally there is an S3 cache provider for ImageProcessor on it's way soon so that you will be able to run everything in S3. https://github.com/JimBobSquarePants/ImageProcessor/pull/168
Thanks for this, I didn't have exactly the same error as described (500 instead) but very similar and this resolved the issue.
Thanks a lot James, you've definietley pointed me in the right direction. I had a dig around in the source to work out what was going on and built an extremely quick and dirty service to replace the LocalFileImageService of my own to make it play nice with Umbraco.Storage.S3.
I wrote my own service, because RemoteService seems to be expecting a fully qualified path, but with Umbraco.Storage.S3 configured with the Virtual Path Provider maintains the same relative/local paths that out of the box Umbraco has. So instead, in GetImage() I'm grabbing the local path, converting it into relative path to the media directory then prepending the bucket hostname to produce a fully qualified path that can be fed to ImageProcessor.
You can see what I mean here: https://gist.github.com/anonymous/bf6abd6d60b4abdc2d75 which obviously needs cleaning up a bit to make it less likely to die, but it works!
btw that sounds great that there's an S3 cache provider coming! Thanks for your help.
This is really cool!
I wonder if as a community we could write more Umbraco aware IImageService implementations to allow people to pull images from the various providers.
Hi James, (or anyone else!) I've just run into another slight problem which is slightly related. I've noticed that when I insert an image with the RTE in Umbraco and then resize using the draggy corner resize toggle thingies (I'm sure there's a technical name for this), the RTE changes the src url of the image tag to have its width and height as ?width=300px&height=200px as in, it adds "px" to the dimensions. When there is "px" in the querystring It seems that ImageProcessor still runs, and it outputs a file to the cache, but that image is not resized.
I've noticed this happening both with my custom service, and with your standard Local File Service. I'm not sure if this is a problem with ImageProcessor or a problem with Umbraco, but, I don't suppose you know of any workaround for this? I've updated to the latest versions of ImageProcessor and ImageProcessor.Web from nuget, and have the latest Umbraco as well.
Yeah... ImageProcessor is picking up that someone is adding querystring params to the image request but those requests don't match the API. To be honest I have no idea why Umbraco would be generating them, to me it's a bug in Umbraco.
Hi,
RE: The resized RTE images...
Earlier versions used to generate a new image if you resized it inside the RTE, and name it something like "/myImage_300x200.jpg" - I guess that the inclusion of ImageProcessor in the Core product, made it feasible to just use its resizing features - but then it was probably just implemented wrongly?
I guess I'll go check for an issue in the tracker about that...
/Chriztian
is working on a reply...