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
    Apr 08, 2013 @ 19:22
    Craig100
    0

    Crops and Image Types

     

    Just trying to understand if I've got things set up right. (umb V6.0.3)

    I have a normal Media Folder type holding images of custom media type "PageBanner", which is a normal Image media type with an added crop tab with a pageBanner property which is an image cropper with three crops set up on it: 1, 2 & 3.

    In my content page Doc Type I have a tab called "Banner Images" in which there are three different DAMP data types: 1, 2 & 3. Each DAMP data type is set to preview a different crop from the pageBanner property and can only allow a single image to be picked.

    When setting the images in the content page in the content section, each image shows a thumnail of the raw image. When I go to Edit, I can see all three available crops, if I pick the appropriate one for the DAMP data type, set it up and save it, it still shows the raw image as the thumbnail and not the crop I just set. Even after saving the page again.

    I just want to check I've understood this process correctly from this video:http://codegarden12.com/sessions/day-two/slot-four/lightning-package-heaven.aspx
    Do I need a seperate image type per crop for this to work or should each DAMP data type be able to save and show the crops in the content page tab even if they are on the same image, as some of them are?

    Thanks,

    Craig

     

  • Jeroen Breuer 4861 posts 12136 karma points MVP 3x admin c-trib
    Apr 16, 2013 @ 12:29
    Jeroen Breuer
    0

    Hello Craig,

    Yes you need a seperate image type per crop. That's how it's done in the video. Each media type will also have it's own datatype which can preview the crop of the media type (which is only 1).

    Currently I'm using CropUp and there you could also have 1 cropper which works with a center of gravity which the crops are based on. So you don't define the crops on the media type, but in your Razor or XSLT code.

    Jeroen

  • Craig100 1072 posts 2359 karma points c-trib
    Apr 16, 2013 @ 15:00
    Craig100
    0

    Hi Jeroen,

    I had to move quickly on this so using a bare bones install I played around with CropUp and then added DAMP. I've now built the finished site but using only the default image datatype as there's no way to bulk upload the images as custom datatypes.  All crops are defined in the web.config file as advised in CropUp's minimal documentation and the Niels K Show video.  it works well, just looks a bit naff on the cropper as all crops are available in all places.

    If there are any examples of how to:-

    1. Set up individual crops in Razor macros
    2. Bulk Upload images as custom data types
    I'd be very keen to see them for my next site build (too late for this one though).
    Thanks,
    Craig
  • Jeroen Breuer 4861 posts 12136 karma points MVP 3x admin c-trib
    Apr 16, 2013 @ 15:09
    Jeroen Breuer
    0

    If you want to see how to bulk upload custom media types check the DAMP Gallery. It has a custom version of MFU which supports custom media types.

    I don't use it anymore because I'm also using CropUp, but instead of defining crops in the config file I removed all crops from the config file and I'm using this code in Razor to show the crops:

    CropUp.GetUrl(url, new ImageSizeArguments() { Width = 500, Height = 250 }

    If I want a different crop I just pass another width and height in the Razor code so I don't need to define any crops.

    Jeroen

  • Craig100 1072 posts 2359 karma points c-trib
    Apr 16, 2013 @ 19:19
    Craig100
    0

    So the editor doesn't get to select or adjust crops other than setting the gravity point and won't see the effect in the various crop sizes?

  • Craig100 1072 posts 2359 karma points c-trib
    Apr 22, 2013 @ 16:06
    Craig100
    0

    Is there any way to have different crops set up for different image coppers so the Editor gets to see what the crops are doing, can change the gravity point and/or override them as they could if you put them in the config file? Otherwise you're editing blind.

  • Jeroen Breuer 4861 posts 12136 karma points MVP 3x admin c-trib
    Apr 22, 2013 @ 16:08
    Jeroen Breuer
    0

    If you watch this video you can see that you can also show a preview in DAMP: http://www.screenr.com/caC7

    Jeroen

  • Craig100 1072 posts 2359 karma points c-trib
    Apr 22, 2013 @ 22:24
    Craig100
    0

    Yes, I saw that.  But that also shows the crops set up in the config file.  If you remove them from the config file you get a YSOD.

    Having thought DAMP and Cropping was becoming understandable at last, it appears it's getting worse again.

    How do you configure your crops in your razor macros giving editors control? As far as I can see it HAS to be on the image datatype and there's no way to separate crops from eachother, i.e. you have to configure them in the config file or the editor isn't able to adjust or even see them in the UI.

    Craig

  • Balram Narad 36 posts 87 karma points
    May 06, 2014 @ 12:21
    Balram Narad
    0

    Hi

    I am trying to use the Damp Gallery with the CropUp package as shown in the video above but am unable to display the cropup preview/thumbnail in the gallery

    my code is below

    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage


    @{
        dynamic i = CurrentPage.galleryImages;
        if (i.Count > 0)
        {
            var p = Helper.GetPager(6, i.Count);
            <ul class="photogallery">
                @foreach (dynamic d in i.Skip(p.CurrentPage * p.ItemsPerPage).Take(p.ItemsPerPage))
                {
                    <li>
                        <a class="popup" rel="gallery" href="@d.Url">
                            <img src="@d.Crops.thumb" alt="@d.Alt"/>
                        </a>
                    </li>
                }
            </ul>
            <div class="pagination">
                @foreach (var number in p.Pages)
                {
                    if (number - 1 != p.CurrentPage)
                    {
                        <a href="[email protected]">@number</a>
                    }
                    else
                    {
                        <span>@number</span>
                    }
                }
            </div>
        }
    }

    I assume I have to change this line but have no idea what it should be

     

        <img src="@d.Crops.thumb" alt="@d.Alt"/>

     

    thanks

     

    Bal

Please Sign in or register to post replies

Write your reply to:

Draft