I have a page that I use to hold several others in listview. When I display the page, I want to display summary information about the sub-pages (kind of like a blog), including images.
Using the listArticles.cshtml partial view, I am easily able to retrieve the information from the children, including the image. However, I can't figure out how to retrieve the cropped image.
My code is:
@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{
var selection = CurrentPage.Children.Where("Visible").OrderBy("CreateDate desc");
@* OrderBy() takes the property to sort by and optionally order desc/asc *@}
@foreach (var item in selection)
{
<div class="article">
<div class="articletitle"><a href="@item.Url">@item.description</a></div>
<div class="articleimage"><a href="@item.Url"><img src="@Url.GetCropUrl(Model.Content, "categoryIcon")" /></a></div>
<div class="articlepreview">@Umbraco.Truncate(@item.ArticleContents,200) <a href="@item.Url">Read More..</a></div>
</div>
<hr/>}
I am obviously not accessing the image cropper url properly. I have tried the various possibilities at this page:
There are some different approaches to working with Umbraco content nodes, that have evolved over the years, (dynamic, strongly type, and the most recently modelsbuilder) and each approach has a slightly different method for accessing GetCropUrl.
When you write
var selection = CurrentPage.Children.Where("Visible").OrderBy("CreateDate desc");
your selection variable will contain 'dynamic' representations of your umbraco content nodes.
and therefore if that's the approach you want to stick with the dynamic way of outputting the crop url is:
where item represents the umbraco node in your foreach loop, categoryIcon is the name of the property containing the media picker/item and cropName is the name of the crop you wish to display.
That worked perfectly. Thank you very much for the quick and detailed reply.
I especially appreciate the extra time you took to provide the history and background of the methods to access nodes. Learning how things have changed, and what to do depending on what approach you are currently using is very helpful.
Image Cropper within foreach
Hello,
I have a page that I use to hold several others in listview. When I display the page, I want to display summary information about the sub-pages (kind of like a blog), including images.
Using the listArticles.cshtml partial view, I am easily able to retrieve the information from the children, including the image. However, I can't figure out how to retrieve the cropped image.
My code is:
I am obviously not accessing the image cropper url properly. I have tried the various possibilities at this page:
https://our.umbraco.org/Documentation/Getting-Started/Backoffice/Property-Editors/Built-in-Property-Editors/Image-Cropper
Thank you for any help.
Hi Robert
There are some different approaches to working with Umbraco content nodes, that have evolved over the years, (dynamic, strongly type, and the most recently modelsbuilder) and each approach has a slightly different method for accessing GetCropUrl.
When you write
your selection variable will contain 'dynamic' representations of your umbraco content nodes.
and therefore if that's the approach you want to stick with the dynamic way of outputting the crop url is:
where item represents the umbraco node in your foreach loop, categoryIcon is the name of the property containing the media picker/item and cropName is the name of the crop you wish to display.
regards
Marc
Hello Marc,
That worked perfectly. Thank you very much for the quick and detailed reply.
I especially appreciate the extra time you took to provide the history and background of the methods to access nodes. Learning how things have changed, and what to do depending on what approach you are currently using is very helpful.
Robert
is working on a reply...