Problem saving images uploaded using Image Cropper
Hi
I'm hoping someone can help me solve a problem with Umbraco 7 Image Cropper that is driving me crazy!
I have created a simple image (and text) gallery for my home page. This involved adding a Media Picker (+ some text fields) to a data type which was then added to a parent data type (with 'list view enabled' checked). Finally I added the parent data type to my home page, added content and confirmed it all worked correctly.
I then decided to convert the Media Picker to an Image Cropper. At first, I thought this was working correctly as the displayed image was being cropped as expected. The problem occurred the first time I tried to update the image using the upload mode of Image Cropper. I was able to select and display a new image but was unable to save it. Although the 'Saving...' message appeared for a few seconds, the 'Save and Publish' button remained permanently disabled and the usual 'content saved' message did not appear. Refreshing the page caused the selected image to disappear, confirming that it had not been saved.
This problem appears to be linked to the fact that the Image Cropper is being used on a data type added to the page. If I use Image Cropper directly on the home page it works as expected.
Images uploaded with Media Picker appear in sub folders of the Media folder but I have no idea where Image Cropper images are located.
I have pulled the whole structure apart and reassembled a number of times but cannot find what is causing this. The log file does not give any clues either.
Hi Jim,
Do you have any additional code for how you're getting the url of the cropped image?
The image cropper only saves the original image and then using the ImageProcessor module with query strings it will crop the image as expected. This is all made easier by the GetCropUrl() extension method of the IPublishedContent class.
For example if you have a property on your current page called "GalleryImage" you'd do the following:
The problem lies not with displaying the cropped image - I am using GetCropUrl in a Partial View and this part is working fine. The problem is uploading a new image. I can view the image in the Image Cropper editor but cannot save it - as I said earlier, the 'Save and Publish' button becomes disabled and stays that way.
I have experienced the Image Cropper upload/save process working when used directly on my home page but it won't work when used in a child data type...
Hi Jim,
Sorry about misreading the initial response. Could the issue be Umbraco is saving the initial image to disk - might not make a lot of sense given you have the upload preview for cropping.
I guess a couple of options are try a smaller image and see if it locks out the Save and Publish button too.
I must admit I typically create a media type for this kind of thing and then use a the media picker to select the cropped media type.
I've tried searching all of the sub folders in the site but I can't find any evidence of the source image having been stored anywhere. Do you know where I should be looking?
I have also tried smaller images but that did not work either.
I thought about creating a media type but that would surely change the image update operation from one step to two steps - first upload to the media library then select from there. I'd like to keep this as simple as possible.
Hi Jim,
This should be stored in the /Media/<propertyid>/ folder, but like I say I never use them on the document type itself.
I understand your thoughts on simplicity, I guess I've previously favoured reusability in the past. Having media items means they can used over multiple pages.
The images I'm uploading do not have any reuse value in other parts of the site and when they are updated I don't need to preserve the old versions for future use. For this reason, uploading directly via the Image Cropper would be perfect.
I'd really like to know what is preventing the image from being stored. I can't believe no-one else has come across the same problem....
Hi Jim,
Understood. I've created a couple of document types on a clean Umbraco v7.2.6 instance. Basic Page and Basic Sub Page. Both have a property on them of the Image Cropper type (the vanilla one not modified settings).
The Image Cropper I used was not vanilla - I created a new type to allow me to add specific crops. I will try using the unmodified version myself to see if that sheds any light.
I've just noticed you said you tried using Image Cropper on a basic page and basic sub page. This was also something I tested earlier and this arrangement worked for me too.
My structure is slightly more complex. Because I am making a photo gallery to contain any number of entries, I have placed the Image Cropper on a 'gallery item' Document Type that is not a page, as such. There is no corresponding template - the data is added to a partial view using a macro. Would this make a difference?
Hi Jim,
It shouldn't but I'll remove the Template from my sub document type.
As an aside, and not to complicate things further you might want to consider using Archetype for semantic data entry. It's really good at dealing content that you'd consider to be grouped in a fieldset.
I have once again gone through the process of deconstructing my document types and retracing my steps and believe I have discovered the (rather surprising) cause of this problem. It appears to be related to the presence of an underscore character in the alias of the Image Cropper property added to my 'gallery item' document type.
I had adopted the convention of appending the name of the document type to the name of the property (eg mainImage_GalleryItem) to distinguish it from other properties with the same name on other document types. It seems that mainImageGalleryItem is fine but mainImage_GalleryItem is not (!).
It would be interesting to see if you find the same on your test pages. If this is the cause I will need to go through all my other aliases (which seem to behave just fine) and remove the underscores for consistency. Is there a standard way to ensure property names are unique?
Also, I looked at Archetype, which seems to be ideal for my purposes. However, I noticed in the known issues list a suggestion that Image Cropper is not supported by Archetype. This was dated February of this year, so I don't know whether that has changed.
Hi Jim,
Looks like this is a known issue. It's not just the image cropper but anything that involves uploading. I also tried using an Upload property with an underscore on it too.
Seems the solution is avoid underscores on file upload properties!
Does anyone know what the current situation is with Archetype and Image Cropper? I've spent so much time solving my original problem I don't really want to start a detailed investigation of Archetype only to find out I can't use Image Cropper...!
Hi Jim,
Haha yea, we got there eventually didn't we? Great shout on the underscores. Could you mark the right post as the answer so we can get closure on this issue.
Also yea, it seems Archetype won't work for your solution as you want to keep it simple, which I respect. The only workarounds involve the MNTP or Media Picker which aren't suitable for your UX. Might be a bit of a dead end with the issues they're facing (reading the issues on their github). You could say it has come a cropper :P
Problem saving images uploaded using Image Cropper
Hi
I'm hoping someone can help me solve a problem with Umbraco 7 Image Cropper that is driving me crazy!
I have created a simple image (and text) gallery for my home page. This involved adding a Media Picker (+ some text fields) to a data type which was then added to a parent data type (with 'list view enabled' checked). Finally I added the parent data type to my home page, added content and confirmed it all worked correctly.
I then decided to convert the Media Picker to an Image Cropper. At first, I thought this was working correctly as the displayed image was being cropped as expected. The problem occurred the first time I tried to update the image using the upload mode of Image Cropper. I was able to select and display a new image but was unable to save it. Although the 'Saving...' message appeared for a few seconds, the 'Save and Publish' button remained permanently disabled and the usual 'content saved' message did not appear. Refreshing the page caused the selected image to disappear, confirming that it had not been saved.
This problem appears to be linked to the fact that the Image Cropper is being used on a data type added to the page. If I use Image Cropper directly on the home page it works as expected.
Images uploaded with Media Picker appear in sub folders of the Media folder but I have no idea where Image Cropper images are located.
I have pulled the whole structure apart and reassembled a number of times but cannot find what is causing this. The log file does not give any clues either.
Any help would be greatly appreciated!
Hi Jim,
Do you have any additional code for how you're getting the url of the cropped image?
The image cropper only saves the original image and then using the ImageProcessor module with query strings it will crop the image as expected. This is all made easier by the
GetCropUrl()extension method of theIPublishedContentclass.For example if you have a property on your current page called "GalleryImage" you'd do the following:
You can find out more about the Image Cropper data type on the Our Umbraco Documentation page.
Thanks,
Jamie
Hi Jamie
Thanks very much for your reply.
The problem lies not with displaying the cropped image - I am using
GetCropUrlin a Partial View and this part is working fine. The problem is uploading a new image. I can view the image in the Image Cropper editor but cannot save it - as I said earlier, the 'Save and Publish' button becomes disabled and stays that way.I have experienced the Image Cropper upload/save process working when used directly on my home page but it won't work when used in a child data type...
Regards
Jim
Hi Jim,
Sorry about misreading the initial response. Could the issue be Umbraco is saving the initial image to disk - might not make a lot of sense given you have the upload preview for cropping.
I guess a couple of options are try a smaller image and see if it locks out the Save and Publish button too.
I must admit I typically create a media type for this kind of thing and then use a the media picker to select the cropped media type.
Thanks,
Jamie
Hi Jamie
I've tried searching all of the sub folders in the site but I can't find any evidence of the source image having been stored anywhere. Do you know where I should be looking?
I have also tried smaller images but that did not work either.
I thought about creating a media type but that would surely change the image update operation from one step to two steps - first upload to the media library then select from there. I'd like to keep this as simple as possible.
Regards
Jim
Hi Jim,
This should be stored in the
/Media/<propertyid>/folder, but like I say I never use them on the document type itself.I understand your thoughts on simplicity, I guess I've previously favoured reusability in the past. Having media items means they can used over multiple pages.
Thanks,
Jamie
Hi Jamie
The images I'm uploading do not have any reuse value in other parts of the site and when they are updated I don't need to preserve the old versions for future use. For this reason, uploading directly via the Image Cropper would be perfect.
I'd really like to know what is preventing the image from being stored. I can't believe no-one else has come across the same problem....
Regards
Jim
Hi Jim,
Understood. I've created a couple of document types on a clean Umbraco v7.2.6 instance. Basic Page and Basic Sub Page. Both have a property on them of the Image Cropper type (the vanilla one not modified settings).
Both of them saved an image to /media/
Thanks,
Jamie
Hi Jamie
The Image Cropper I used was not vanilla - I created a new type to allow me to add specific crops. I will try using the unmodified version myself to see if that sheds any light.
Regards
Jim
Hi Jamie
Using a vanilla version made do difference.
I've just noticed you said you tried using Image Cropper on a basic page and basic sub page. This was also something I tested earlier and this arrangement worked for me too.
My structure is slightly more complex. Because I am making a photo gallery to contain any number of entries, I have placed the Image Cropper on a 'gallery item' Document Type that is not a page, as such. There is no corresponding template - the data is added to a partial view using a macro. Would this make a difference?
Regards
Jim
Hi Jim,
It shouldn't but I'll remove the Template from my sub document type.
As an aside, and not to complicate things further you might want to consider using Archetype for semantic data entry. It's really good at dealing content that you'd consider to be grouped in a fieldset.
Thanks,
Jamie
Hi Jamie
I have once again gone through the process of deconstructing my document types and retracing my steps and believe I have discovered the (rather surprising) cause of this problem. It appears to be related to the presence of an underscore character in the alias of the Image Cropper property added to my 'gallery item' document type.
I had adopted the convention of appending the name of the document type to the name of the property (eg
mainImage_GalleryItem) to distinguish it from other properties with the same name on other document types. It seems thatmainImageGalleryItemis fine butmainImage_GalleryItemis not (!).It would be interesting to see if you find the same on your test pages. If this is the cause I will need to go through all my other aliases (which seem to behave just fine) and remove the underscores for consistency. Is there a standard way to ensure property names are unique?
Also, I looked at Archetype, which seems to be ideal for my purposes. However, I noticed in the known issues list a suggestion that Image Cropper is not supported by Archetype. This was dated February of this year, so I don't know whether that has changed.
Regards
Jim
Hi Jim,
Looks like this is a known issue. It's not just the image cropper but anything that involves uploading. I also tried using an Upload property with an underscore on it too.
Seems the solution is avoid underscores on file upload properties!
Thanks,
Jamie
Hi Jamie
Thanks very much for your help in this!
Does anyone know what the current situation is with Archetype and Image Cropper? I've spent so much time solving my original problem I don't really want to start a detailed investigation of Archetype only to find out I can't use Image Cropper...!
(Should I start a new thread?)
Regards
Jim
Hi Jim,
Haha yea, we got there eventually didn't we? Great shout on the underscores. Could you mark the right post as the answer so we can get closure on this issue.
Also yea, it seems Archetype won't work for your solution as you want to keep it simple, which I respect. The only workarounds involve the MNTP or Media Picker which aren't suitable for your UX. Might be a bit of a dead end with the issues they're facing (reading the issues on their github). You could say it has come a cropper :P
Thanks,
Jamie
is working on a reply...