Copied to clipboard

Flag this post as spam?

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


  • Aaron Lett 21 posts 72 karma points
    Dec 06, 2016 @ 23:03
    Aaron Lett
    0

    GetCropUrl inside of foreach loop for Carousel

    Hey guys,

    So I'm trying to dynamically insert a crop I've defined ("Banner") into a loop and call the image URL that I used as a Main Image ("marqueeImage"). I'm wicked close, but I can't clear the last hurdle to get the actual cropped image to show.

    My code:

    @{
        //Fetch the blogposts from a certain node id
        var blogPosts = Umbraco.Content(1370);
    
        foreach(var blogPost in blogPosts.Children.Take(4)){
        <div class="row">
            <div class="col-sm-12">
                <article class="linkbox cat-sports">
                    <a href="@blogPost.Url">
                        <img src="@blogPost.GetCropUrl("marqueeImage", "Banner")" width="1170" height="480" alt="Responsive image" class="img-responsive" />
                        <div class="overlay">
                            <h2>@blogPost.Name</h2>
                            <p>@blogPost.theatre - Reviewed on: @blogPost.reviewedPerformanceDate.ToLongDateString()</p>
                        </div>
                    </a>
                    <a href="#" class="theme">
                        Review
                    </a>
                </article>
            </div>
        </div>
      }
    }
    

    Any pointers to the right direction/syntax would be a big help! I tried to apply the markup from https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/image-cropper to no avail....

  • Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib
    Dec 07, 2016 @ 13:56
    Dennis Adolfi
    0

    Hi Aaron.

    From what I can see, you´ve done everything correctly.

    Can you double/triple check that your Image Croppper property alias is exaclty marqueeImage and that the crop is Banner?

    And then make sure you have fetched the correct BlogPost page (1370) and that all children have a images saved and published. (I´ve noticed you use a Take(), maybe you are debugging the wrong children?)

    Other than that, it looks correct!

    Best of luck!

  • Matthew Kirschner 323 posts 611 karma points
    Dec 07, 2016 @ 14:20
    Matthew Kirschner
    1

    Hi, Aaron.

    That should work if you're using a media cropper. In the off chance that you're using a media picker instead, you would need to crop your image like so:

    var mediaObject = Umbraco.TypedMedia(blogPost.GetPropertyValue<int>("marqueeImage"));
    
    Url.GetCropUrl(mediaObject, propertyAlias: "umbracoFile", height: 480, width: 1170);
    
  • Aaron Lett 21 posts 72 karma points
    Dec 07, 2016 @ 16:11
    Aaron Lett
    0

    Okay, I'll expound and affirm.

    Dennis: The Property Alias is marqueeImage and the crop is Banner.

    Matthew: And you are also correct; marqueeImage IS a single-item media picker (I want to chose from the existing Media Library - not upload the same image multiple times).

    So I tried your addition (in the syntax per the Image Cropper Documentation) as thus:

    @{
        //Fetch the blogposts from a certain node id
        var blogPosts = Umbraco.Content(1370);
    
        foreach(var blogPost in blogPosts.Children.Take(4)){
        <div class="row">
            <div class="col-sm-12">
                @{
                    var mediaObject = Umbraco.TypedMedia(blogPost.GetPropertyValue<int>("marqueeImage"));
                    <article class="linkbox cat-sports">
                        <a href="@blogPost.Url">
                            <img src='@Url.GetCropUrl(mediaObject, propertyAlias: "umbracoFile", height: 480, width: 1170)' width="1170" height="480" alt="Responsive image" class="img-responsive" />
                            <div class="overlay">
                                <h2>@blogPost.Name</h2>
                                <p>@blogPost.theatre - Reviewed on: @blogPost.reviewedPerformanceDate.ToLongDateString()</p>
                            </div>
                        </a>
                        <a href="#" class="theme">
                            Review
                        </a>
                    </article>
                }
            </div>
        </div>
        }
    }
    

    To again no avail (Bow it throws a 'Compilation Error'). It still feels oh-so-close....

  • Matthew Kirschner 323 posts 611 karma points
    Dec 07, 2016 @ 16:21
    Matthew Kirschner
    0

    Can you give us a more verbose error besides "Compilation Error"?

    You can do this by getting the error from the Umbraco log or running your solution in debug mode.

  • Aaron Lett 21 posts 72 karma points
    Dec 07, 2016 @ 16:48
    Aaron Lett
    0

    The shortened response is:

    Compiler Error Message: CS1739: The best overload for 'GetCropUrl' does not have a parameter named 'propertyAlias'

    On the line:

    <img src='@Url.GetCropUrl(mediaObject, propertyAlias: "umbracoFile", height: 480, width: 1170)' width="1170" height="480" alt="Responsive image" class="img-responsive" />
    
  • Matthew Kirschner 323 posts 611 karma points
    Dec 07, 2016 @ 17:04
    Matthew Kirschner
    0

    Which version of Umbraco are you using?

  • Aaron Lett 21 posts 72 karma points
    Dec 07, 2016 @ 17:21
    Aaron Lett
    0

    7.5.2

  • Matthew Kirschner 323 posts 611 karma points
    Dec 07, 2016 @ 18:33
    Matthew Kirschner
    0

    Hmmm, you should definitely have the Url extension methods then.

    Regardless, try this on your TypedMedia object:

    @mediaObject.GetCropUrl(1170, 480);
    
  • Dennis Adolfi 1082 posts 6449 karma points MVP 6x c-trib
    Dec 07, 2016 @ 17:52
    Dennis Adolfi
    0

    Ok, so try:

    @mediaObject.GetCropUrl("Banner");

  • Aaron Lett 21 posts 72 karma points
    Dec 07, 2016 @ 19:10
    Aaron Lett
    0

    Still much nope....

    I changed TypedMedia to Media in the

    var mediaObject = Umbraco.TypedMedia(blogPost.GetPropertyValue<int>("marqueeImage"));
    

    declaration... The page displays, but in the debug console I am now getting:

    500 (Internal Server Error) for all the images....

    So code now is:

    @{
        var blogPosts = Umbraco.Content(1370);
        foreach(var blogPost in blogPosts.Children.Take(4)){
        <div class="row">
            <div class="col-sm-12">
                @{
                    var mediaObject = Umbraco.Media(blogPost.GetPropertyValue<int>("marqueeImage"));
                    <article class="linkbox cat-sports">
                        <a href="@blogPost.Url">
                            <img src='@mediaObject.GetCropUrl("Banner")' width="1170" height="480" alt="Responsive image" class="img-responsive" />
                            <div class="overlay">
                                <h2>@blogPost.Name</h2>
                                <p>@blogPost.theatre - Reviewed on: @blogPost.reviewedPerformanceDate.ToLongDateString()</p>
                            </div>
                        </a>
                    <a href="#" class="theme">Review</a>
                    </article>
                }
            </div>
        </div>
        }
    }
    
  • Matthew Kirschner 323 posts 611 karma points
    Dec 07, 2016 @ 19:40
    Matthew Kirschner
    0

    I don't think using Media or TypedMedia should matter here, though I try to use Typed objects as much as possible.

    Did you try my suggestion above?

    If this works, it could imply that the crop you're trying use, "Banner", is the problem.

  • Aaron Lett 21 posts 72 karma points
    Dec 07, 2016 @ 20:20
    Aaron Lett
    0
    <img src='@mediaObject.GetCropUrl(1170, 480)' width="1170" height="480" alt="Responsive image" class="img-responsive" />
    

    Still not working...

  • Matthew Kirschner 323 posts 611 karma points
    Dec 07, 2016 @ 20:33
    Matthew Kirschner
    0

    What's the error this time?

  • Aaron Lett 21 posts 72 karma points
    Dec 07, 2016 @ 20:35
    Aaron Lett
    0

    Okay, update:

    in the DOM, the image IS being loaded:

    http://thecolumnonline.stuckomonkeyproductions.com/media/1113/image.jpeg?mode=crop&width=1170&height=480&rnd=131255086590000000

    However is displays nothing.

    Going to just the image pre-crop it exists ( http://thecolumnonline.stuckomonkeyproductions.com/media/1113/image.jpeg ).

    Is there something amiss in the stock query?

Please Sign in or register to post replies

Write your reply to:

Draft