So I'm trying to dynamically insert a crop I've defined ("Banner") into a loop and call the image URL that I used as a Main Image ("marqueeImage"). I'm wicked close, but I can't clear the last hurdle to get the actual cropped image to show.
My code:
@{
//Fetch the blogposts from a certain node id
var blogPosts = Umbraco.Content(1370);
foreach(var blogPost in blogPosts.Children.Take(4)){
<div class="row">
<div class="col-sm-12">
<article class="linkbox cat-sports">
<a href="@blogPost.Url">
<img src="@blogPost.GetCropUrl("marqueeImage", "Banner")" width="1170" height="480" alt="Responsive image" class="img-responsive" />
<div class="overlay">
<h2>@blogPost.Name</h2>
<p>@blogPost.theatre - Reviewed on: @blogPost.reviewedPerformanceDate.ToLongDateString()</p>
</div>
</a>
<a href="#" class="theme">
Review
</a>
</article>
</div>
</div>
}
}
From what I can see, you´ve done everything correctly.
Can you double/triple check that your Image Croppper property alias is exaclty marqueeImage and that the crop is Banner?
And then make sure you have fetched the correct BlogPost page (1370) and that all children have a images saved and published. (I´ve noticed you use a Take(), maybe you are debugging the wrong children?)
That should work if you're using a media cropper. In the off chance that you're using a media picker instead, you would need to crop your image like so:
Dennis: The Property Alias is marqueeImage and the crop is Banner.
Matthew: And you are also correct; marqueeImage IS a single-item media picker (I want to chose from the existing Media Library - not upload the same image multiple times).
So I tried your addition (in the syntax per the Image Cropper Documentation) as thus:
@{
//Fetch the blogposts from a certain node id
var blogPosts = Umbraco.Content(1370);
foreach(var blogPost in blogPosts.Children.Take(4)){
<div class="row">
<div class="col-sm-12">
@{
var mediaObject = Umbraco.TypedMedia(blogPost.GetPropertyValue<int>("marqueeImage"));
<article class="linkbox cat-sports">
<a href="@blogPost.Url">
<img src='@Url.GetCropUrl(mediaObject, propertyAlias: "umbracoFile", height: 480, width: 1170)' width="1170" height="480" alt="Responsive image" class="img-responsive" />
<div class="overlay">
<h2>@blogPost.Name</h2>
<p>@blogPost.theatre - Reviewed on: @blogPost.reviewedPerformanceDate.ToLongDateString()</p>
</div>
</a>
<a href="#" class="theme">
Review
</a>
</article>
}
</div>
</div>
}
}
To again no avail (Bow it throws a 'Compilation Error'). It still feels oh-so-close....
GetCropUrl inside of foreach loop for Carousel
Hey guys,
So I'm trying to dynamically insert a crop I've defined ("Banner") into a loop and call the image URL that I used as a Main Image ("marqueeImage"). I'm wicked close, but I can't clear the last hurdle to get the actual cropped image to show.
My code:
Any pointers to the right direction/syntax would be a big help! I tried to apply the markup from https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/image-cropper to no avail....
Hi Aaron.
From what I can see, you´ve done everything correctly.
Can you double/triple check that your Image Croppper property alias is exaclty marqueeImage and that the crop is Banner?
And then make sure you have fetched the correct BlogPost page (1370) and that all children have a images saved and published. (I´ve noticed you use a Take(), maybe you are debugging the wrong children?)
Other than that, it looks correct!
Best of luck!
Hi, Aaron.
That should work if you're using a media cropper. In the off chance that you're using a media picker instead, you would need to crop your image like so:
Okay, I'll expound and affirm.
Dennis: The Property Alias is marqueeImage and the crop is Banner.
Matthew: And you are also correct; marqueeImage IS a single-item media picker (I want to chose from the existing Media Library - not upload the same image multiple times).
So I tried your addition (in the syntax per the Image Cropper Documentation) as thus:
To again no avail (Bow it throws a 'Compilation Error'). It still feels oh-so-close....
Can you give us a more verbose error besides "Compilation Error"?
You can do this by getting the error from the Umbraco log or running your solution in debug mode.
The shortened response is:
Compiler Error Message: CS1739: The best overload for 'GetCropUrl' does not have a parameter named 'propertyAlias'
On the line:
Which version of Umbraco are you using?
7.5.2
Hmmm, you should definitely have the Url extension methods then.
Regardless, try this on your TypedMedia object:
Ok, so try:
@mediaObject.GetCropUrl("Banner");
Still much nope....
I changed TypedMedia to Media in the
declaration... The page displays, but in the debug console I am now getting:
500 (Internal Server Error) for all the images....
So code now is:
I don't think using Media or TypedMedia should matter here, though I try to use Typed objects as much as possible.
Did you try my suggestion above?
If this works, it could imply that the crop you're trying use, "Banner", is the problem.
Still not working...
What's the error this time?
Okay, update:
in the DOM, the image IS being loaded:
http://thecolumnonline.stuckomonkeyproductions.com/media/1113/image.jpeg?mode=crop&width=1170&height=480&rnd=131255086590000000
However is displays nothing.
Going to just the image pre-crop it exists ( http://thecolumnonline.stuckomonkeyproductions.com/media/1113/image.jpeg ).
Is there something amiss in the stock query?
is working on a reply...