Copied to clipboard

Flag this post as spam?

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


  • Bent Holz 100 posts 273 karma points
    Sep 30, 2015 @ 07:35
    Bent Holz
    0

    Image cropper - moving from 6.2.5 to 7.3

    I am trying to recreate an old 6.2.5 site in 7.3

    Have no experience with Razor/Mvc and have set up the installation with webforms.

    Created my document types, created simple templates and made the "Hello world" work in the browser, yay!

    Now I wan't to make a simple image slider for my frontpage using the built in image cropper.

    After creating a crop size to the image cropper data type, I added it to my frontslide doc type, uploaded a few images and tried to test it.

    My XSLT replaces the images if none is uploaded/can't find an image to display (see http://test.insane.dk). It outputs the node name etc., but no images.

    If I look in the media archive on the server, the image cropper has not created images according to my image cropper settings.

    Am I missing something here or is the 7.3 version of image cropper stashing the images somewhere else?

  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 8x admin c-trib
    Sep 30, 2015 @ 07:57
    Chriztian Steinmeier
    0

    Hi Bent,

    The Image Cropper in v7+ is pure magic compared to what's been available previously - it creates the images on the fly (and caches them somewhere smart).

    To output a specific crop, you'll probably need to use some Razor code, as there's no built-in library extensions for use with XSLT (I know, not too happy about that either :( but that's how it is...)

    You can get to the cropsettings through XSLT, but you'll be doing lots of calculations (as I have been forced to a couple of times, because of other factors), since they're JSON which is (apart from CDATA-wrapped WYSIWYG output) about the least usable format to work with in XSLT :-)

    That said, Umbraco is using Imageprocessor behind the scenes, so you can get a long way by getting the original mediaNode (using GetMedia()) as usual and then throw some options on the QueryString to manually crops/size the images.

    Hope that helps,

    /Chriztian

  • Bent Holz 100 posts 273 karma points
    Sep 30, 2015 @ 08:59
    Bent Holz
    1

    Hi Chriztian

    As always, thank you for the reply. They should put a bust of guys like you up at Umbraco Headquarters!

    "Arg!..." to say the least... Being the non-programmer that I am can I some how use Razor/new image cropper with my webforms site?

    /Bent

  • Chriztian Steinmeier 2798 posts 8788 karma points MVP 8x admin c-trib
    Sep 30, 2015 @ 09:08
    Chriztian Steinmeier
    1

    Haha - I like that idea :-)

    Actually, I don't see why you shouldn't be able to create a Razor Macro, and use that in you Webforms masterpage...

    Give it a try, and come back here if it explodes :)

    /Chriztian

  • Bent Holz 100 posts 273 karma points
    Sep 30, 2015 @ 09:37
    Bent Holz
    0

    Sigh!... Looks like I have to go learn something about Razor...

    Gonna "google" my way around and see if theres a "Razor for dummies" page somewhere...

    ...and I will be back I'm sure!

    /Bent

  • Janae Cram 63 posts 439 karma points MVP 8x c-trib
    Sep 30, 2015 @ 15:56
    Janae Cram
    1

    Hi Bent,

    Like Chriztian said, you can always append the URL of the media item in XSLT for ImageProcessor :)

    If you click on any of the methods listed in the sidebar here (I assume 'crop' is the one you'll be going for), they tell you the querystring parameters you'll need to append to your image: http://imageprocessor.org/imageprocessor-web/imageprocessingmodule/

    Alternately, if I were coding it in a "display the image" Razor Macro (I prefer to use the MVC Razor macros), my code would probably look like this:

    @inherits Umbraco.Web.Macros.PartialViewMacroPage
    
    @if (Model.Content.HasProperty("image") && Model.Content.HasValue("image"))
    {
        var image = Umbraco.TypedMedia(Model.Content.GetPropertyValue("image"));
    
        if (image != null)
        {
            <img src="@image.GetCropUrl(width: 100, height: 100)" alt="@image.Name" />
        }
    }
    
Please Sign in or register to post replies

Write your reply to:

Draft