Accessing crops in DAMP2.5 with CropUp in UmbV6.1.1 MVC
The DAMP is in a Settings page which is at the Content Root. The same Root as the Home page so it's a sibling to the Home page. In my Base View has a Partial View which has to get hold of the DAMP images for an image slider in the header.
Can't see what's wrong with the code below. I'm either not hitting the DAMP control with the dynamic bannerList line or not getting the crops.
What appears in the source is <img src="" alt="Focus Article" class="img-polaroid"> So the DAMP is being hit or I wouldn't be getting the alt text, just not getting a URL.
Any advice on how to access the crops URL would be greatly appreciated.
Seem to have this trouble everytime the Umbraco API changes, not enough documentation.
As I understand it, you are using DAMP plus have installed the CropUp compatibility pack plus have installed the DAMP property editor converter package and are using CropUp to render out your Cropped image using a specifc crop alias. DAMP (and it's converter) will not return you the CropUp data it will only return native Umbraco Cropping editor data, instead you just need to get the Url from DAMP using @imageItem.Url then use CropUp normally. The CropUp pack for DAMP makes use of CropUp in the Umbraco UI and allows your editors to see the CropUp settings (if added to your media items) when using DAMP.
e.g for a specifc CropUp cropping alias named "article" in your Eksponent.CropUp.config
@CropUp.GetUrl(imageItem.Url, new ImageSizeArguments {CropAlias = "article"})
Or if you just wanted to use a auto crop, specifying a width
@CropUp.GetUrl(imageItem.Url, new ImageSizeArguments { Width = 200})
Thanks for that. I now have images showing in a couple of scenarios but the final two escape me.
One is a page that has a Partial that lists out child content nodes and within each node is a DAMP. So it ends up being a foreach in a foreach.
The other is a page that list out child nodes within each is a DAMP, again, it's a foreach in a foreach but not in a partial.
In each case it's the inner foreach that fails. Seems like the dataType of the first foreach doesn't contain the necessary structure for the second......
I think you are nearly there, can you just try specifying the DAMP converter type after your GetPropertyValue methods? e.g item.GetPropertyValue<DAMP.PropertyEditorValueConverter.Model>("image") I think that's all your missing but I cant properly check until tomorrow now. Let me know.
I think are probably one of the first to be putting all this together but I'm sure it will be useful to others.
You assumed correctly. Putting that check in place has fixed all of my DAMP access issues.
This brought out the fact that the first record in the DAMP in the first foreach didn't have an image selected but the second one did. So that must have been where the "Object not set to an instance of an object" came from. Good job this was the case actually as it would have been embarrassing had it gone live and the client just removed the first image!
I'm using DAMP with CropUp in MVC with some extension methods. Here is how I use it:
MediaItem.cs
public class MediaItem
{
public string Url { get; set; }
public string Alt { get; set; }
public virtual bool HasValue
{
get
{
return !string.IsNullOrEmpty(Url) && !string.IsNullOrEmpty(Alt);
}
}
}
MediaItemCrop.cs
public class MediaItemCrop : MediaItem
{
public string Crop { get; set; }
public override bool HasValue
{
get
{
return !string.IsNullOrEmpty(Url) && !string.IsNullOrEmpty(Alt) && !string.IsNullOrEmpty(Crop);
}
}
}
Extension methods:
/// <summary>
/// Return the media item.
/// </summary>
/// <param name="content"></param>
/// <param name="alias"></param>
/// <returns></returns>
public static MediaItem GetMediaItem(this IPublishedContent content, string alias, string altAlias = "", string placeholder = "")
{
//Get all media items from DAMP.
var dampModel = content.GetPropertyValue<DAMP.PropertyEditorValueConverter.Model>(alias);
if (!dampModel.Any)
{
if (!string.IsNullOrEmpty(placeholder))
{
return new MediaItem()
{
Alt = "Placeholder",
Url = placeholder
};
}
return new MediaItem();
}
//Get the first media item from DAMP.
var dampMedia = dampModel.First;
//Return the media item with the properties set.
return new MediaItem()
{
Url = dampMedia.Url,
Alt = !string.IsNullOrEmpty(altAlias) ? dampMedia.GetProperty(altAlias) : dampMedia.Alt,
};
}
/// <summary>
/// Return a croped image based on the width and height.
/// </summary>
/// <param name="content"></param>
/// <param name="alias"></param>
/// <param name="width"></param>
/// <param name="height"></param>
/// <returns></returns>
public static MediaItemCrop GetCroppedImage(this IPublishedContent content, string alias, int width, int height, string altAlias = "", string placeholder = "")
{
//Get all media items from DAMP.
var dampModel = content.GetPropertyValue<DAMP.PropertyEditorValueConverter.Model>(alias);
if (!dampModel.Any)
{
if (!string.IsNullOrEmpty(placeholder))
{
return new MediaItemCrop()
{
Alt = "Placeholder",
Url = placeholder,
Crop = placeholder
};
}
return new MediaItemCrop();
}
//Get the first media item from DAMP.
var dampMedia = dampModel.First;
//Return the media item with the properties set.
return new MediaItemCrop()
{
Url = dampMedia.Url,
Alt = !string.IsNullOrEmpty(altAlias) ? dampMedia.GetProperty(altAlias) : dampMedia.Alt,
Crop = CropUp.GetUrl(dampMedia.Url, new ImageSizeArguments() { Width = width, Height = height })
};
}
/// <summary>
/// Return all media items.
/// </summary>
/// <param name="content"></param>
/// <param name="alias"></param>
/// <returns></returns>
public static IEnumerable<MediaItem> GetMediaItems(this IPublishedContent content, string alias, string altAlias = "")
{
//Get all media items from DAMP.
var dampModel = content.GetPropertyValue<DAMP.PropertyEditorValueConverter.Model>(alias);
if (!dampModel.Any())
{
//Return an empty IEnumerable if DAMP doesn't have any media items.
return Enumerable.Empty<MediaItem>();
}
//Return the media items with the properties set.
return
(
from m in dampModel
select new MediaItem()
{
Url = m.Url,
Alt = !string.IsNullOrEmpty(altAlias) ? m.GetProperty(altAlias) : m.Alt,
}
);
}
/// <summary>
/// Return all images with crop based on the width and height.
/// </summary>
/// <param name="content"></param>
/// <param name="alias"></param>
/// <param name="width"></param>
/// <param name="height"></param>
/// <returns></returns>
public static IEnumerable<MediaItemCrop> GetCroppedImages(this IPublishedContent content, string alias, int width, int height, string altAlias = "")
{
//Get all media items from DAMP.
var dampModel = content.GetPropertyValue<DAMP.PropertyEditorValueConverter.Model>(alias);
if (!dampModel.Any())
{
//Return an empty IEnumerable if DAMP doesn't have any media items.
return Enumerable.Empty<MediaItemCrop>();
}
//Return the media items with the properties set.
return
(
from m in dampModel
select new MediaItemCrop()
{
Url = m.Url,
Alt = !string.IsNullOrEmpty(altAlias) ? m.GetProperty(altAlias) : m.Alt,
Crop = CropUp.GetUrl(m.Url, new ImageSizeArguments() { Width = width, Height = height })
}
);
}
With those extension methods you can do this in your view:
Accessing crops in DAMP2.5 with CropUp in UmbV6.1.1 MVC
The DAMP is in a Settings page which is at the Content Root. The same Root as the Home page so it's a sibling to the Home page. In my Base View has a Partial View which has to get hold of the DAMP images for an image slider in the header.
Can't see what's wrong with the code below. I'm either not hitting the DAMP control with the dynamic bannerList line or not getting the crops.
Any pointers would be appreciated as this is my first MVC site.
Cheers,
Craig
Now trying in a normal page with a DAMP called "image" and a cropup crop called "article".
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage@using DigibizAdvancedMediaPicker;@using DAMP.PropertyEditorValueConverter.......... @foreach(var imageItem in CurrentPage.image){ <img src="@imageItem.Crops.article" alt="@imageItem.Alt" class="img-polaroid"> }What appears in the source is <img src="" alt="Focus Article" class="img-polaroid"> So the DAMP is being hit or I wouldn't be getting the alt text, just not getting a URL.
Any advice on how to access the crops URL would be greatly appreciated.
Seem to have this trouble everytime the Umbraco API changes, not enough documentation.
Cheers,
Craig
Hey Craig,
As I understand it, you are using DAMP plus have installed the CropUp compatibility pack plus have installed the DAMP property editor converter package and are using CropUp to render out your Cropped image using a specifc crop alias. DAMP (and it's converter) will not return you the CropUp data it will only return native Umbraco Cropping editor data, instead you just need to get the Url from DAMP using @imageItem.Url then use CropUp normally. The CropUp pack for DAMP makes use of CropUp in the Umbraco UI and allows your editors to see the CropUp settings (if added to your media items) when using DAMP.
e.g for a specifc CropUp cropping alias named "article" in your Eksponent.CropUp.config
Or if you just wanted to use a auto crop, specifying a width
I think that's what you after?
Cheers,
Jeavon
Also, you need to add @using Eksponent.CropUp; to your View
Hi Jeavon,
Thanks for that. I now have images showing in a couple of scenarios but the final two escape me.
One is a page that has a Partial that lists out child content nodes and within each node is a DAMP. So it ends up being a foreach in a foreach.
The other is a page that list out child nodes within each is a DAMP, again, it's a foreach in a foreach but not in a partial.
In each case it's the inner foreach that fails. Seems like the dataType of the first foreach doesn't contain the necessary structure for the second......
Without Partial
@inherits Umbraco.Web.Mvc.UmbracoTemplatePage@using DigibizAdvancedMediaPicker;@using DAMP.PropertyEditorValueConverter;@using Eksponent.CropUp;@{ foreach (var item in Model.Content.Children) { <div class="row-fluid"> <div class="span2">@foreach(var itemPhoto in item.GetPropertyValue("photo")){
<img src="@CropUp.GetUrl(itemPhoto.Url, new ImageSizeArguments {CropAlias = "article"})" alt="@itemPhoto.Alt" class="img-polaroid"> } </div> <div class="span10"> <p class="lead">@item.GetPropertyValue("staffMemberName")</p> @item.GetPropertyValue("bio") </div> </div> if(item.IsLast()==false){ <hr> } } }With Partial
@inherits Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>@using DigibizAdvancedMediaPicker;@using DAMP.PropertyEditorValueConverter;@using Eksponent.CropUp;@{ if (Model.HasValue("articleList")) { String typedMultiNodeTreePickerCSV = Model.GetPropertyValue<string>("articleList"); IEnumerable<int> typedPublishedMNTPNodeListCSV = typedMultiNodeTreePickerCSV.Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(x => int.Parse(x)); IEnumerable<IPublishedContent> typedMNTPCollectionCSV = Umbraco.TypedContent(typedPublishedMNTPNodeListCSV).Where(x => x != null); foreach (IPublishedContent item in typedMNTPCollectionCSV) { <article class="well"> <div class="row-fluid addPointer" onclick="go('@item.Url')"> <div class="span8"> <h3><a href="@item.Url">@item.GetPropertyValue("articleTitle")</a></h3> @item.GetPropertyValue("summary") <a href="@item.Url" class="btn btn-small btn-info"><i class="icon-eye-open icon-white"></i> Read more...</a> </div> <div class="span4"> @{foreach(var itemImage in item.GetPropertyValue("image")){
var theCropUrl = CropUp.GetUrl(itemImage.Url, new ImageSizeArguments {CropAlias = "summary"}); <img src="@theCropUrl" alt="@itemImage.Alt" class="img-polaroid"> } } </div> </div> </article> } } }Is this stuff something that's discoverable or really requires documentation? In anycase, I hope this is helping someone else too.
Cheers,
Craig
I think you are nearly there, can you just try specifying the DAMP converter type after your GetPropertyValue methods? e.g item.GetPropertyValue<DAMP.PropertyEditorValueConverter.Model>("image") I think that's all your missing but I cant properly check until tomorrow now. Let me know.
I think are probably one of the first to be putting all this together but I'm sure it will be useful to others.
Thanks, Jeavon
HI Jeavon,
I'm just getting a YSOD with "Object not set to an instance of an object" on the new line.
Cheers,
Craig
Hi Craig,
Ok so i'm assuming that "photo" is your DAMP picker in the first example you gave, try this:
Hi Jeavon,
You assumed correctly. Putting that check in place has fixed all of my DAMP access issues.
This brought out the fact that the first record in the DAMP in the first foreach didn't have an image selected but the second one did. So that must have been where the "Object not set to an instance of an object" came from. Good job this was the case actually as it would have been embarrassing had it gone live and the client just removed the first image!
Many thanks,
Craig
Hey Craig, awesome to hear all is working!
Cheers,
Jeavon
I'm using DAMP with CropUp in MVC with some extension methods. Here is how I use it:
MediaItem.cs
MediaItemCrop.cs
Extension methods:
With those extension methods you can do this in your view:
You can only use GetProperty on a DAMP model if you use the latest version on codeplex. Otherwise you should just use m.alt.
Jeroen
The above extension methods are part of the Hybrid Framework.
Jeroen
is working on a reply...