Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Craig100 1072 posts 2359 karma points c-trib
    Jun 23, 2013 @ 15:40
    Craig100
    0

    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.

    @inherits Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>
    @using DigibizAdvancedMediaPicker;
    @using DAMP.PropertyEditorValueConverter
                <div class="span12 header cycle-slideshow"
                        data-cycle-fx="scrollHorz"
                        data-cycle-timeout="5000"
                        data-cycle-speed="1000"
                        data-cycle-random="true"
                        data-cycle-slides="> div">                  
                        @{
                        dynamic bannerList = Model.AncestorOrSelf(1).Sibling("Settings").GetPropertyValue("bannerImages");
                        
                        foreach(var item in bannerList) {
                        var theCropUrl = item.Crops.banner;
                              <div class="slide" style="background-image:url('@(theCropUrl)');"></div>
                            }
                        }                                                                                                                         
                </div>

    Any pointers would be appreciated as this is my first MVC site.

    Cheers,

    Craig

  • Craig100 1072 posts 2359 karma points c-trib
    Jun 23, 2013 @ 17:46
    Craig100
    0

    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

     

  • Jeavon Leopold 3008 posts 13216 karma points MVP 7x admin c-trib
    Jun 23, 2013 @ 20:34
    Jeavon Leopold
    0

    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

    @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})

    I think that's what you after?

    Cheers,

    Jeavon

  • Jeavon Leopold 3008 posts 13216 karma points MVP 7x admin c-trib
    Jun 23, 2013 @ 20:35
    Jeavon Leopold
    0

    Also, you need to add @using Eksponent.CropUp; to your View

  • Craig100 1072 posts 2359 karma points c-trib
    Jun 24, 2013 @ 01:16
    Craig100
    0

    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

     

  • Jeavon Leopold 3008 posts 13216 karma points MVP 7x admin c-trib
    Jun 24, 2013 @ 01:36
    Jeavon Leopold
    0

    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

  • Craig100 1072 posts 2359 karma points c-trib
    Jun 24, 2013 @ 11:43
    Craig100
    0

    HI Jeavon,

    I'm just getting a YSOD with "Object not set to an instance of an object" on the new line.

    Cheers,

    Craig

  • Jeavon Leopold 3008 posts 13216 karma points MVP 7x admin c-trib
    Jun 24, 2013 @ 12:25
    Jeavon Leopold
    102

    Hi Craig,

    Ok so i'm assuming that "photo" is your DAMP picker in the first example you gave, try this:

    @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">
    
                @if (item.HasProperty("photo") && item.HasValue("photo"))
                {
                    foreach (var itemPhoto in item.GetPropertyValue<DAMP.PropertyEditorValueConverter.Model>("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>    
            }
        }
    }

     

  • Craig100 1072 posts 2359 karma points c-trib
    Jun 24, 2013 @ 13:23
    Craig100
    0

    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

     

  • Jeavon Leopold 3008 posts 13216 karma points MVP 7x admin c-trib
    Jun 24, 2013 @ 13:33
    Jeavon Leopold
    0

    Hey Craig, awesome to hear all is working!

    Cheers,

    Jeavon

  • Jeroen Breuer 4861 posts 12136 karma points MVP 3x admin c-trib
    Jun 24, 2013 @ 20:33
    Jeroen Breuer
    1

    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:

    //Single image
    var image = Model.Content.GetCroppedImage("photo", 300, 148);
    <img src="@image.Crop" alt="@image.Alt"/>

    //Multiple images
    var images = Model.Content.GetCroppedImages("photos", 300, 148);
    foreach(var img in images)
    {
    <a href="@img.Url" targer="_blank"><img src="@img.Crop" alt="@img.Alt"/></a>

    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

  • Jeroen Breuer 4861 posts 12136 karma points MVP 3x admin c-trib
    Dec 19, 2013 @ 12:55
    Jeroen Breuer
    0

    The above extension methods are part of the Hybrid Framework.

    Jeroen

Please Sign in or register to post replies

Write your reply to:

Draft