var Image = Umbraco.Media(CurrentPage.imageCropper);
<img src="@Image.Crop("crop", "landscape")" />
That just generates this error all the time, I can't see a way around it. I can kinda see what the problem is, but that's not helping me. I can't find any other documentation on how to use it.
Server Error in '/' Application.
The value of parameter 'id' must be either a string or an integer
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.InvalidOperationException: The value of parameter 'id' must be either a string or an integer
Source Error:
Line 15: }
Line 16: @:<p>@CurrentPage.imageCropper</p>
Line 17: var Image = Umbraco.Media(CurrentPage.imageCropper);
Line 18: <img src="@Image.Crop("crop", "landscape")" />
Line 19: }
Source File: c:\inetpub\wwwroot\u7Test\Views\Homepage.cshtml Line: 17
Stack Trace:
[InvalidOperationException: The value of parameter 'id' must be either a string or an integer]
Umbraco.Web.UmbracoHelper.ConvertIdObjectToInt(Object id, Int32& intId) +141
Umbraco.Web.UmbracoHelper.ConvertIdsObjectToInts(IEnumerable`1 ids) +134
Umbraco.Web.UmbracoHelper.Media(IEnumerable`1 ids) +139
System.Dynamic.UpdateDelegates.UpdateAndExecute2(CallSite site, T0 arg0, T1 arg1) +975
ASP._Page_Views_Homepage_cshtml.Execute() in c:\inetpub\wwwroot\u7Test\Views\Homepage.cshtml:17
System.Web.WebPages.WebPageBase.ExecutePageHierarchy() +280
System.Web.Mvc.WebViewPage.ExecutePageHierarchy() +126
System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage) +181
Umbraco.Core.Profiling.ProfilingView.Render(ViewContext viewContext, TextWriter writer) +140
System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context) +378
System.Web.Mvc.<>c__DisplayClass1a.<InvokeActionResultWithFilters>b__17() +33
System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +854940
System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +854940
System.Web.Mvc.ControllerActionInvoker.InvokeActionResultWithFilters(ControllerContext controllerContext, IList`1 filters, ActionResult actionResult) +265
System.Web.Mvc.ControllerActionInvoker.InvokeAction(ControllerContext controllerContext, String actionName) +854992
System.Web.Mvc.<>c__DisplayClass1d.<BeginExecuteCore>b__19() +40
System.Web.Mvc.Async.<>c__DisplayClass1.<MakeVoidDelegate>b__0() +15
System.Web.Mvc.Controller.EndExecuteCore(IAsyncResult asyncResult) +65
System.Web.Mvc.Async.<>c__DisplayClass4.<MakeVoidDelegate>b__3(IAsyncResult ar) +15
System.Web.Mvc.Controller.EndExecute(IAsyncResult asyncResult) +51
System.Web.Mvc.<>c__DisplayClass8.<BeginProcessRequest>b__3(IAsyncResult asyncResult) +42
System.Web.Mvc.Async.<>c__DisplayClass4.<MakeVoidDelegate>b__3(IAsyncResult ar) +15
System.Web.Mvc.MvcHandler.EndProcessRequest(IAsyncResult asyncResult) +51
System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +606
System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +288
Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.18408
Any help mach appreciated please. I am new to V7, new to MVC, and not able to find any real documentation. I have been using Razor for a while in V6.
Ok...it took me some time to figure this out. But I managed to get this working with the following code
@if (string.IsNullOrWhiteSpace(CurrentPage.crop.ToString()) == false){ var image = Umbraco.Media(CurrentPage.crop.ToString()); var path = image.umbracoFile; <img src="@image.GetCropUrl("crop", "box")" /> }
On my documenttype I have a media picker with the alias of "crop".
On my image type I have a cropper with the alias of "crop".
In the code above you need to specify that you want the box of the "crop" property on your image. I think this part is going to change in future releases.
In this context "crop" is my property alias for the image cropper set directly on my document type.
The above example should be used when you're using the cropper on the image in the media section and then referring the image by using the "media picker" property on your document type.
Hope it all makes sense now and sorry if I have confused you.
I eventually got there, as I suspected, being thick.
I had missed that the "crop" in <img src="@CurrentPage.GetCropUrl("crop","box")" /> was crucial. I had it as crop all the time, when mine was called "imageCropper".
I would however like to be able to do it the same way you have. My problem is I can't for the life of me create my own media type, when I do they never show up in the media section when I want to add new items. Can you please direct me to some instructions somewhere on how to do this please. I have been trying since V6 and never found out how to do it.
Thank you so much for sorting the Cropper for me.
On a final note for everyone else all I actually required was this line:
On a final note, I kinda though the whole point of this was to make the image cropper more responsive, and to be more like cropUp. Is that not kinda pointless when you have fixed sizes? I have seen cropUp adapt to the size of the container it is in dynamically, or am I being thick again.
Don't get me wrong, just having to pick a single point in the image, to get all of the crops done for me is great, I was ject expecting it to be more like cropUp.
Happy to hear that you managed to get it working in the end :) Please make sure to mark the post as solved so others can benefit and go directly to the solution should they be stuck with the same issue.
Actually I just added the image-cropper to the default "Image" type. And then I setup a media picker on my document type where I can pick an image and then when the image is picked it holds a reference to the id of the image in the media library, which you then have to find and then add then fetch the crop from the "crop" property on the image.
I asnwered your other post regarding how to setup new media, so it can be created in the media section. But please be aware that the media picker I mentioned probably won't allow you to choose your custom media type. Can't remember if this can be sorted in the umbracoSettings.config file though. I can investigate and get back.
BUT I'll recommend that you add a new tab on the "Image" type in the settings section called "Crop". And on that tab you place your imagecropper datatype. Then you sort the tabs so your "Crop" tab is the first tab. When you upload an image you then use the image cropper upload field.
Then on those of your document types where you want to reference the images you add a new field based on "media picker", make it have an alias of "image".
That should make you able to do it like I did by using the first example I posted.
But make sure you keep in mind that your media picker has an alias of "image", which means the code should be modified to use that alias when you do the CurrentPage stuff...so like Umbraco.Media.CurrentPage.image.
In regards to the responsive stuff. It actually is more responsive since the crop points being saved are relative coordinates of the images. But how you're going to make a practial use of it is up to you I guess. It's a huge benefit that you can call different crops for use in different sections of your site and if you make an approach to using responsive images using "RESS" (Where the server is involved using WURFL for instance) then you can define nice crop versions for phones, tablets etc. so you can make sure there is not loaded expensive kb's since the image is being cropped rather than scaled using CSS.
The way the coordinates are save means that you should also be able to serve retina friendly images - How you would go about this I have not quite figured out myself yet since I have not been playing that much with it. But I figure that it won't be long untill one of the wizards of the community will have something cool to show.
Using the new imagecropper in razor - getting errors
OK, I am totally stuck. I am trying to use the new image cropper in Umbraco 7, and I am getting no where.
This is what's stored in the array.
{ "focalPoint": { "left": 0.35, "top": 0.63666666666666671 }, "src": "/media/1001/100_3490.jpg", "crops": [ { "alias": "Landscape", "width": 224, "height": 168 }, { "alias": "Portraite", "width": 224, "height": 299 }, { "alias": "Square", "width": 224, "height": 224 } ] }
This is the code I am using from video http://www.youtube.com/watch?v=1rEVtjnDDyg (at 15 mins)
var Image = Umbraco.Media(CurrentPage.imageCropper);
<img src="@Image.Crop("crop", "landscape")" />
Server Error in '/' Application. The value of parameter 'id' must be either a string or an integer Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. Exception Details: System.InvalidOperationException: The value of parameter 'id' must be either a string or an integer Source Error: Line 15: } Line 16: @:<p>@CurrentPage.imageCropper</p> Line 17: var Image = Umbraco.Media(CurrentPage.imageCropper); Line 18: <img src="@Image.Crop("crop", "landscape")" /> Line 19: } Source File: c:\inetpub\wwwroot\u7Test\Views\Homepage.cshtml Line: 17 Stack Trace: [InvalidOperationException: The value of parameter 'id' must be either a string or an integer] Umbraco.Web.UmbracoHelper.ConvertIdObjectToInt(Object id, Int32& intId) +141 Umbraco.Web.UmbracoHelper.ConvertIdsObjectToInts(IEnumerable`1 ids) +134 Umbraco.Web.UmbracoHelper.Media(IEnumerable`1 ids) +139 System.Dynamic.UpdateDelegates.UpdateAndExecute2(CallSite site, T0 arg0, T1 arg1) +975 ASP._Page_Views_Homepage_cshtml.Execute() in c:\inetpub\wwwroot\u7Test\Views\Homepage.cshtml:17 System.Web.WebPages.WebPageBase.ExecutePageHierarchy() +280 System.Web.Mvc.WebViewPage.ExecutePageHierarchy() +126 System.Web.WebPages.WebPageBase.ExecutePageHierarchy(WebPageContext pageContext, TextWriter writer, WebPageRenderingBase startPage) +181 Umbraco.Core.Profiling.ProfilingView.Render(ViewContext viewContext, TextWriter writer) +140 System.Web.Mvc.ViewResultBase.ExecuteResult(ControllerContext context) +378 System.Web.Mvc.<>c__DisplayClass1a.<InvokeActionResultWithFilters>b__17() +33 System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +854940 System.Web.Mvc.ControllerActionInvoker.InvokeActionResultFilter(IResultFilter filter, ResultExecutingContext preContext, Func`1 continuation) +854940 System.Web.Mvc.ControllerActionInvoker.InvokeActionResultWithFilters(ControllerContext controllerContext, IList`1 filters, ActionResult actionResult) +265 System.Web.Mvc.ControllerActionInvoker.InvokeAction(ControllerContext controllerContext, String actionName) +854992 System.Web.Mvc.<>c__DisplayClass1d.<BeginExecuteCore>b__19() +40 System.Web.Mvc.Async.<>c__DisplayClass1.<MakeVoidDelegate>b__0() +15 System.Web.Mvc.Controller.EndExecuteCore(IAsyncResult asyncResult) +65 System.Web.Mvc.Async.<>c__DisplayClass4.<MakeVoidDelegate>b__3(IAsyncResult ar) +15 System.Web.Mvc.Controller.EndExecute(IAsyncResult asyncResult) +51 System.Web.Mvc.<>c__DisplayClass8.<BeginProcessRequest>b__3(IAsyncResult asyncResult) +42 System.Web.Mvc.Async.<>c__DisplayClass4.<MakeVoidDelegate>b__3(IAsyncResult ar) +15 System.Web.Mvc.MvcHandler.EndProcessRequest(IAsyncResult asyncResult) +51 System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +606 System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +288 Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.18408Any help mach appreciated please. I am new to V7, new to MVC, and not able to find any real documentation. I have been using Razor for a while in V6.
Thanks
Hi Stephen
As far as I can tell from your example above you have a parameter too much...I Niels example here http://www.youtube.com/watch?v=1rEVtjnDDyg&feature=share there is no "crop" parameter.
Try this
var Image = Umbraco.Media(CurrentPage.imageCropper);
<img src="@Image.Crop("landscape")" />
Does this help?
/Jan
Hi Jan,
Thanks for the reply.
Sorry I should have been clearer, the error is with the line before it:
Line 17: var Image = Umbraco.Media(CurrentPage.imageCropper);Perhaps I need to return the contents as a string??
Tried this:
var Image = Umbraco.Media(CurrentPage.imageCropper.ToString());
<img src="@Image.Crop("landscape")" />
Hi Stephen
Ok, I'm going to spin up a fresh install to figure out what's going on.
What version are you currently using? 7.1RC?
/Jan
Very latest version, only downloaded it about 6 hours ago.
Thanks
I am sure it's me being a numpty!
Hi Stephen
Ok...it took me some time to figure this out. But I managed to get this working with the following code
@if (string.IsNullOrWhiteSpace(CurrentPage.crop.ToString()) == false){
var image = Umbraco.Media(CurrentPage.crop.ToString());
var path = image.umbracoFile;
<img src="@image.GetCropUrl("crop", "box")" />
}
On my documenttype I have a media picker with the alias of "crop".
On my image type I have a cropper with the alias of "crop".
In the code above you need to specify that you want the box of the "crop" property on your image. I think this part is going to change in future releases.
I hope this helps!
/Jan
Hi Jan,
Thanks for the help, but no result for me.
I am a little confused though...Media picker?
My image cropper data type (called imageCropper) makes me upload the file,
So where does the media picker come into it?
Have I missed some key component out?
Thanks
Stephen
Hi Stephen
Oh, in that case you should use this instead
@if (string.IsNullOrWhiteSpace(CurrentPage.cropLoad.ToString()) == false){
var image = Umbraco.Media(CurrentPage.crop.ToString());
<img src="@CurrentPage.GetCropUrl("crop","box")" />
}
In this context "crop" is my property alias for the image cropper set directly on my document type.
The above example should be used when you're using the cropper on the image in the media section and then referring the image by using the "media picker" property on your document type.
Hope it all makes sense now and sorry if I have confused you.
/Jan
Hi Jan,
I eventually got there, as I suspected, being thick.
I had missed that the "crop" in <img src="@CurrentPage.GetCropUrl("crop","box")" /> was crucial. I had it as crop all the time, when mine was called "imageCropper".
I would however like to be able to do it the same way you have. My problem is I can't for the life of me create my own media type, when I do they never show up in the media section when I want to add new items. Can you please direct me to some instructions somewhere on how to do this please. I have been trying since V6 and never found out how to do it.
Thank you so much for sorting the Cropper for me.
On a final note for everyone else all I actually required was this line:
<img src="@CurrentPage.GetCropUrl("imageCropper","Landscape")" />
So my documenttype imagecropper alias is "imageCropper" and "Landscape" is one of the defined size in the datatype.
On a final note, I kinda though the whole point of this was to make the image cropper more responsive, and to be more like cropUp. Is that not kinda pointless when you have fixed sizes? I have seen cropUp adapt to the size of the container it is in dynamically, or am I being thick again.
Don't get me wrong, just having to pick a single point in the image, to get all of the crops done for me is great, I was ject expecting it to be more like cropUp.
Thanks
Hi Stephen
Happy to hear that you managed to get it working in the end :) Please make sure to mark the post as solved so others can benefit and go directly to the solution should they be stuck with the same issue.
Actually I just added the image-cropper to the default "Image" type. And then I setup a media picker on my document type where I can pick an image and then when the image is picked it holds a reference to the id of the image in the media library, which you then have to find and then add then fetch the crop from the "crop" property on the image.
I asnwered your other post regarding how to setup new media, so it can be created in the media section. But please be aware that the media picker I mentioned probably won't allow you to choose your custom media type. Can't remember if this can be sorted in the umbracoSettings.config file though. I can investigate and get back.
BUT I'll recommend that you add a new tab on the "Image" type in the settings section called "Crop". And on that tab you place your imagecropper datatype. Then you sort the tabs so your "Crop" tab is the first tab. When you upload an image you then use the image cropper upload field.
Then on those of your document types where you want to reference the images you add a new field based on "media picker", make it have an alias of "image".
That should make you able to do it like I did by using the first example I posted.
But make sure you keep in mind that your media picker has an alias of "image", which means the code should be modified to use that alias when you do the CurrentPage stuff...so like Umbraco.Media.CurrentPage.image.
In regards to the responsive stuff. It actually is more responsive since the crop points being saved are relative coordinates of the images. But how you're going to make a practial use of it is up to you I guess. It's a huge benefit that you can call different crops for use in different sections of your site and if you make an approach to using responsive images using "RESS" (Where the server is involved using WURFL for instance) then you can define nice crop versions for phones, tablets etc. so you can make sure there is not loaded expensive kb's since the image is being cropped rather than scaled using CSS.
The way the coordinates are save means that you should also be able to serve retina friendly images - How you would go about this I have not quite figured out myself yet since I have not been playing that much with it. But I figure that it won't be long untill one of the wizards of the community will have something cool to show.
So stay tuned :)
Hope this helps.
/Jan
Thanks Jan,
Massive help.
Hi Stephen
Happy I could help :)
Have a nice weekend.
/Jan
is working on a reply...