Copied to clipboard

Flag this post as spam?

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


  • Anthony Candaele 1197 posts 2049 karma points
    Sep 25, 2013 @ 10:15
    Anthony Candaele
    0

    DAMP 2.5 not cropping images

    Hi,

    I'm using DAMP 2.5 with DAMP Property Converter 1.2 in my Umbraco 6.1.5 install.

    I noticed that the images on the pages don't have the predefined dimensions that I set up with the Image Cropper datatype.

    For instance for the memberCrop if defined a dimension of 262 x 262 pixels.

    The xml that DAMP stores in umbraco.config looks like this:

    <memberImage>
          <DAMP fullMedia="">
            <mediaItem>
              <MemberImage id="2085" version="8fa7ca55-9118-4968-a2be-2d7d66d4a5a6" parentID="2080" level="3" writerID="0" nodeType="2081" template="0" sortOrder="1" createDate="2013-09-10T16:42:15" updateDate="2013-09-10T16:42:15" nodeName="sarah-vanleuven" urlName="sarah-vanleuven" writerName="admin" nodeTypeAlias="MemberImage" path="-1,2063,2080,2085">
                <umbracoFile>/media/1004/sarah-vanleuven.jpg</umbracoFile>
                <umbracoWidth>262</umbracoWidth>
                <umbracoHeight>262</umbracoHeight>
                <umbracoBytes>25190</umbracoBytes>
                <umbracoExtension>jpg</umbracoExtension>
                <memberCrop>
                  <crops date="2013-09-10T16:42:15">
                    <crop name="memberCrop" x="0" y="0" x2="262" y2="262" url="/media/1004/sarah-vanleuven_memberCrop.jpg" />
                  </crops>
                </memberCrop>
              </MemberImage>
            </mediaItem>
          </DAMP>
        </memberImage>
    

    However, when an editor uploads and stores an image with DAMP, it doesn't have the predifned dimensions when rendered in the page. When I check the dimensions with Chrome Dev, it has a dimens of 227 x 344 pixels. The image that the editor uploaded had a smaller width then the prefined 262 pixels. Could this had anything to do with it?

    Also on other pages, I notice that the size of the images do not conside with the predined crop dimensions.

    Thanks for your help,

    Anthony

  • Anthony Candaele 1197 posts 2049 karma points
    Sep 25, 2013 @ 10:26
    Anthony Candaele
    0

    The Code I'm using to read out the image crop looks like this:

    @if (member.HasValue("memberImage"))
                    {
                      var image = member.GetPropertyValue<DAMP.PropertyEditorValueConverter.Model>("memberImage");
                      <img alt="@image.First.Alt" src="@image.First.Url" />
                    }
    
  • Jeroen Breuer 4861 posts 12138 karma points MVP 3x admin c-trib
    Sep 25, 2013 @ 10:27
    Jeroen Breuer
    1

    Hello,

    I haven't seen this before. Did you try DAMP 2.6? It has some fixes which might solve it after resaving.

    Jeroen

  • Anthony Candaele 1197 posts 2049 karma points
    Sep 25, 2013 @ 10:28
    Anthony Candaele
    0

    oh, I didn't know there was a DAMP 2.6 Can I install it over DAMP 2.5 or do I need to uninstall DAMP 2.5 first?

  • Jeroen Breuer 4861 posts 12138 karma points MVP 3x admin c-trib
    Sep 25, 2013 @ 12:02
    Jeroen Breuer
    1

    You can read the upgrade instructions on the package page: http://our.umbraco.org/projects/backoffice-extensions/digibiz-advanced-media-picker

    Maybe also refresh Client Dependency.

    Jeroen

  • Anthony Candaele 1197 posts 2049 karma points
    Sep 25, 2013 @ 13:13
    Anthony Candaele
    0

    ok, I successfully installed DAMP 2.6 over 2.5

    just a little remark, when the installation of DAMP 2.6 was finished, I got the message:

    Digibiz Advanced Media Picker 2.5 successfully installed!
    

    But when I check the installed packages, the version of the installed DAMP package is 2.6 and the version history is DAMP 2.5

  • Jeroen Breuer 4861 posts 12138 karma points MVP 3x admin c-trib
    Sep 25, 2013 @ 13:21
    Jeroen Breuer
    1

    Good point. Forgot to update that file ;-).

    Jeroen

  • Anthony Candaele 1197 posts 2049 karma points
    Sep 25, 2013 @ 13:36
    Anthony Candaele
    0

    Dang, still no luck. Just upgraded to DAMP 2.6 on the testserver, but uploaded pictures still are not cropped properly, even when I remove them and add them again.

    enter image description here

    In the screenshot, you can see that the image doesn't have the dimension 262 x 262 pixels, as defined in the Image Cropper datatype, but 214 x 320 pixels.

    The images only have the proper dimensions when I scale them in Photoshop and upload them to the server.

    At this moment I'm not sure whether the problem lies within DAMP or within the page layout wich is build upon Bootstrap.

    You can view the page here: http://testcjs.ugent.be/members.aspx

  • Jeroen Breuer 4861 posts 12138 karma points MVP 3x admin c-trib
    Sep 25, 2013 @ 13:43
    Jeroen Breuer
    1

    If I look at the source it seems that it uses the normal media item and not a cropped image (those media names are usually different). Can you show the razor code here? 

    If you want an example how I use DAMP myself you can have a look at the Hybrid Framework.

    Jeroen

  • Anthony Candaele 1197 posts 2049 karma points
    Sep 25, 2013 @ 14:41
    Anthony Candaele
    0

    Hi Jeroen,

    This is my Razor Source Code:

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    

    @{ var members = Model.Content.Children;

    <ul class='thumbnails'>
        @foreach (var member in members)
        {
            <li class='span3'>                
                <a href="@member.Url" class="thumbnail with-content">
                    @if (member.HasValue("memberImage"))
                    {
                      var image = member.GetPropertyValue<DAMP.PropertyEditorValueConverter.Model>("memberImage");
                      <img alt="@image.First.Alt" src="@image.First.Url" />
                    }
                    else
                    {
                        <img alt="Photo-card-big-6" src="../images/test-user.png" />
                    }
    
                    <div class='thumbnail-hover-w'>
                        <div class='thumbnail-hover-title'>@member.Name</div>
                        @if (member.HasValue("memberIntro"))
                        {
                            <div class='thumbnail-hover-text'>@member.GetPropertyValue("memberIntro")</div>
                  }
                    </div>
                </a>
            </li>
        }
    </ul>
    

    }

    Thanks for looking into it.

    Anthony

  • Jeroen Breuer 4861 posts 12138 karma points MVP 3x admin c-trib
    Sep 25, 2013 @ 14:45
    Jeroen Breuer
    1

    I'm looking at your code, but you don't use the cropper anywhere. 

    Try this for the image:

    <img alt="@image.First.Alt" src="@image.First.TypedCrops["memberCrop"]" />

    Jeroen

  • Anthony Candaele 1197 posts 2049 karma points
    Sep 25, 2013 @ 15:24
    Anthony Candaele
    0

    Hi Jeroen,

    I tried the above code but then I get a KeyNotFoundException:

    The given key was not present in the dictionary.
    
  • Jeroen Breuer 4861 posts 12138 karma points MVP 3x admin c-trib
    Sep 25, 2013 @ 15:30
    Jeroen Breuer
    1

    Hmm try debugging the code and see what's in the image.First.TypedCrops dictionary.

    Jeroen

  • Anthony Candaele 1197 posts 2049 karma points
    Sep 25, 2013 @ 15:41
    Anthony Candaele
    0

    I debugged the code, the odd thing is, that the line:

    <img alt="@image.First.Alt" src="@image.First.TypedCrops["memberCrop"]" />
    

    never gets executed. The code breaks at the above line:

    var image = member.GetPropertyValue<DAMP.PropertyEditorValueConverter.Model>("memberImage");
    

    I checked the content of the memberImage property while debugging. It contains this:

    <DAMP fullMedia=""><mediaItem><MemberImage id="2085" version="8fa7ca55-9118-4968-a2be-2d7d66d4a5a6" parentID="2080" level="3" writerID="0" nodeType="2081" template="0" sortOrder="1" createDate="2013-09-10T16:42:15" updateDate="2013-09-25T13:10:02" nodeName="sarah-vanleuven" urlName="sarah-vanleuven" writerName="admin" nodeTypeAlias="MemberImage" path="-1,2063,2080,2085"><umbracoFile>/media/1004/sarah-vanleuven.jpg</umbracoFile><umbracoWidth>262</umbracoWidth><umbracoHeight>262</umbracoHeight><umbracoBytes>25190</umbracoBytes><umbracoExtension>jpg</umbracoExtension><memberCrop><crops date="2013-09-10T16:42:15"><crop name="memberCrop" x="0" y="0" x2="262" y2="262" url="/media/1004/sarah-vanleuven_memberCrop.jpg" /></crops></memberCrop></MemberImage></mediaItem></DAMP>
    
  • Jeroen Breuer 4861 posts 12138 karma points MVP 3x admin c-trib
    Sep 25, 2013 @ 15:49
    Jeroen Breuer
    0

    Do all your nodes have the memberImage property? Maybe it's better to post the xml of the entire node here.

    Jeroen

  • Anthony Candaele 1197 posts 2049 karma points
    Sep 25, 2013 @ 15:59
    Anthony Candaele
    0

    you mean the full xml of a MemberItem node?

    <MemberItem id="2078" parentID="2073" level="3" creatorID="0" sortOrder="0" createDate="2013-09-10T16:23:40" updateDate="2013-09-25T13:10:04" nodeName="Sarah Van Leuven" urlName="sarah-van-leuven" path="-1,1049,2073,2078" isDoc="" nodeType="2074" creatorName="admin" writerName="admin" writerID="0" template="2086" nodeTypeAlias="MemberItem">
        <umbracoNaviHide>0</umbracoNaviHide>
        <metaTitle><![CDATA[Sarah Van Leuven]]></metaTitle>
        <metaDescription><![CDATA[Sarah Van Leuven is als postdoctoraal onderzoeker verbonden aan het Center for Journalism Studies]]></metaDescription>
    
        <memberImage>
          <DAMP fullMedia="">
            <mediaItem>
              <MemberImage id="2085" version="8fa7ca55-9118-4968-a2be-2d7d66d4a5a6" parentID="2080" level="3" writerID="0" nodeType="2081" template="0" sortOrder="1" createDate="2013-09-10T16:42:15" updateDate="2013-09-25T13:10:02" nodeName="sarah-vanleuven" urlName="sarah-vanleuven" writerName="admin" nodeTypeAlias="MemberImage" path="-1,2063,2080,2085">
                <umbracoFile>/media/1004/sarah-vanleuven.jpg</umbracoFile>
                <umbracoWidth>262</umbracoWidth>
                <umbracoHeight>262</umbracoHeight>
                <umbracoBytes>25190</umbracoBytes>
                <umbracoExtension>jpg</umbracoExtension>
                <memberCrop>
                  <crops date="2013-09-10T16:42:15">
                    <crop name="memberCrop" x="0" y="0" x2="262" y2="262" url="/media/1004/sarah-vanleuven_memberCrop.jpg" />
                  </crops>
                </memberCrop>
              </MemberImage>
            </mediaItem>
          </DAMP>
        </memberImage>
        <memberCategory><![CDATA[Affiliate Member]]></memberCategory>
      </MemberItem>
    

    Is it normal that the fullMedia attribute is an empty string?

    DAMP fullMedia=""
    
  • Jeroen Breuer 4861 posts 12138 karma points MVP 3x admin c-trib
    Sep 25, 2013 @ 16:12
    Jeroen Breuer
    1

    Hmm that xml looks good and your code should work. Is there a node which looks different from this node? In your razor file you're looping through multiple members and I think that perhaps one of the member nodes has incorrect xml.

    Jeroen

  • Anthony Candaele 1197 posts 2049 karma points
    Sep 26, 2013 @ 10:44
    Anthony Candaele
    0

    Hi Jeroen,

    I don't think this is the case, as I have not only the problem with the memberImage property, but with all properties of type DAMP.

    Also the code breaks on a valid DAMP node.

    greetings,

    Anthony

  • Jeroen Breuer 4861 posts 12138 karma points MVP 3x admin c-trib
    Sep 26, 2013 @ 10:50
    Jeroen Breuer
    0

    Sorry I don't know what could be the problem. I've never had any issues so you probably did something wrong. 

    Maybe have a better look at the DAMP Gallery and Hybrid Framework to see how it's done there.

    Jeroen

  • Anthony Candaele 1197 posts 2049 karma points
    Sep 26, 2013 @ 11:03
    Anthony Candaele
    0

    yes, I checked out the Hybrid Framework project. Can I copy the GetCroppedImage extension method to my Umbraco 6.1.5 project?

  • Anthony Candaele 1197 posts 2049 karma points
    Sep 26, 2013 @ 11:45
    Anthony Candaele
    0

    found the issue,

    Got my script working by making the memberImage property dynamic and using the Crops dynamic library:

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    

    @{ var members = Model.Content.Children;

    <ul class='thumbnails'>
        @foreach (var member in members)
        {
            <li class='span3'>                
                <a href="@member.Url" class="thumbnail with-content">
                    @if (member.HasValue("memberImage"))
                    {
                      dynamic image = member.GetPropertyValue("memberImage"); 
    
                      <img alt="@image.First.Alt" src="@image.First.Crops.memberCrop" />
                    }
                    else
                    {
                        <img alt="Photo-card-big-6" src="../images/test-user.png" />
                    }
    
                    <div class='thumbnail-hover-w'>
                        <div class='thumbnail-hover-title'>@member.Name</div>
                        @if (member.HasValue("memberIntro"))
                        {
                            <div class='thumbnail-hover-text'>@member.GetPropertyValue("memberIntro")</div>
                  }
                    </div>
                </a>
            </li>
        }
    </ul>
    

    }

  • Jeroen Breuer 4861 posts 12138 karma points MVP 3x admin c-trib
    Sep 26, 2013 @ 11:53
    Jeroen Breuer
    0

    Hmm strange that it works when everything is dynamic. I'm not using dynamic because strongly typed can be faster.

    Jeroen

  • Anthony Candaele 1197 posts 2049 karma points
    Sep 26, 2013 @ 13:38
    Anthony Candaele
    0

    Maybe it has something to do with the namespaces I'm inheriting. My script is in a Partial View Macro File:

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    
  • Anthony Candaele 1197 posts 2049 karma points
    Sep 26, 2013 @ 14:12
    Anthony Candaele
    0

    the odd thing is, that when I debug my object of type DAMP.PropertyEditorValueConverter.Model the TypedCrops property is there, with 1 item in it:

    /media/1014/the-revolution-continues_publicationcrop_publicationCrop.jpg
    

    But when I try to access it via

    @image.First.TypedCrops["publicationCrop"]
    

    I'm getting the KeyNotFoundException error

  • Jeroen Breuer 4861 posts 12138 karma points MVP 3x admin c-trib
    Sep 26, 2013 @ 14:17
    Jeroen Breuer
    100

    I think I know the problem :-). TypedCrops lowers the key name. So it's not publicationCrop, but publicationcrop

    Try this:

    <img alt="@image.First.Alt" src="@image.First.TypedCrops["membercrop"]" />

    @image.First.TypedCrops["publicationcrop"]

    Jeroen

  • Anthony Candaele 1197 posts 2049 karma points
    Sep 26, 2013 @ 14:23
    Anthony Candaele
    0

    and we have a winner :)) It's working.

    Thanks a lot Jeroen

Please Sign in or register to post replies

Write your reply to:

Draft