I have made a slider that is constructed like this:
Slides - Slide 1 - Slide 2
In Slide 1 and Slide 2 I use a media picker that I configured to use the Image Cropper datatype. I works fine in the back-office but I can't manage to render the image in my markup. I've tried many things but this is how I ended up for now:
In addition to this documentation I would also recommend you to watch this https://www.youtube.com/watch?v=bQsvGmnYaUU episode from uHangout where Jeavon explains how the image cropper is working.
I think its a little bit strange that this do not work:
var slides = Umbraco.Content(1244).Children;
@foreach (var slide in slides) { }
To me the "slide" variable in the foreach-loop is a node that contains the cropped image in the same way that the node i get from "@Umbraco.Content(1245)"
What am I missing?
ANSWER:
I had a variable that was getting it's value from a node that did not exist anymore in my markup, thats why the markup failed to render.
<img src="@slide.GetCropUrl("image", "slide")" /> works fine.
Getting cropped image from node
Hi,
I have made a slider that is constructed like this:
Slides
- Slide 1
- Slide 2
In Slide 1 and Slide 2 I use a media picker that I configured to use the Image Cropper datatype. I works fine in the back-office but I can't manage to render the image in my markup. I've tried many things but this is how I ended up for now:
var slides = Umbraco.Content(1244).Children;
<div id="owl-example" class="owl-carousel">
@foreach (var slide in slides)
{
var bild = Umbraco.Media(slide.Bild);
<div>
<img src="@slide.GetCropUrl("bild")" />
<br />
<br />
<h3>@slide.Titel</h3>
<p>@slide.Text</p>
</div>
}
</div>
Why can't i get the image as I did before when it was not cropped?
Hi Paul and welcoeme to our :),
Have you seen the documentation about how to use the image cropper, I think would help you https://our.umbraco.org/documentation/Using-Umbraco/Backoffice-Overview/Property-Editors/Built-in-Property-Editors-v7/Image-Cropper
In addition to this documentation I would also recommend you to watch this https://www.youtube.com/watch?v=bQsvGmnYaUU episode from uHangout where Jeavon explains how the image cropper is working.
Hope this helps,
/Dennis
Thank you Dennis Aaen! :)
I will check the links out, thanks.
I will write here when I find the solution to my problem as I think there is other people out there that need a clear answer to this question. :)
This line works for me:
.GetCropUrl()
I think its a little bit strange that this do not work:
var slides = Umbraco.Content(1244).Children;
@foreach (var slide in slides)
{
}
To me the "slide" variable in the foreach-loop is a node that contains the cropped image in the same way that the node i get from "@Umbraco.Content(1245)"
What am I missing?
ANSWER:
I had a variable that was getting it's value from a node that did not exist anymore in my markup, thats why the markup failed to render.
<img src="@slide.GetCropUrl("image", "slide")" /> works fine.
is working on a reply...