Copied to clipboard

Flag this post as spam?

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


  • Matthew 138 posts 201 karma points
    Mar 27, 2014 @ 22:53
    Matthew
    0

    image cropper for dummies

    Despite everyone's best efforts, I still didn't get it so maybe this helps clarify for someone else who isn't quite up to speed with how objects, elements, methods, umbraco helpers, etc work.  Hopefully someone smart will point out any misteakz.

    -- CROPPER DOCS --

    data type: create
    - property editor: Image Cropper
    - property editor alias: Umbraco.ImageCropper
    - name: (My Image Cropper); save
    - add new crops: name (My First Crop, My Second Crop, etc); size; save crop
    - save data type

    document type: add property
    - name: My Image Crops
    - alias: myImageCrops
    - type: My Image Cropper
    - save document type

    content: upload/adjust image & crops

    template: edit

    @if (string.IsNullOrWhiteSpace(CurrentPage.myImageCrops.ToString()) == false)
    {
     <img src="@CurrentPage.GetCropUrl("myImageCrops", "My First Crop")" alt="" />
    }

    what I was getting hung up on was in GetCropUrl, which was which data type, alias, property, property type alias, yadda yadda...

    if you're using it with a media picker, you need to do something more like declare a var for the image and use that in your img (although I haven't tested that)

    var Image = Umbraco.Media(CurrentPage.myImageCrops.ToString());

    for a little more clarity, what it's doing (examples):

    @CurrentPage.myImageCrops - returns: 
    { "focalPoint": { "left": 0.5075, "top": 0.50375939849624063 }, "src": "/media/1003/MyPic.jpg", "crops": [ { "alias": "My First Crop", "width": 800, "height": 150 }, { "alias": "My Second Crop", "width": 500, "height": 300 } ] }
    @CurrentPage.Image (if using a var) - returns: 
    /media/SampleImages/1001/MyPic.jpg
    @CurrentPage.croppedBanner - returns: 
    THE CROPPED IMAGE(S)
  • Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib
    Mar 27, 2014 @ 23:12
    Jeroen Breuer
    0

    Hello,

    This video demos how the Image Cropper in 7.1 works. Maybe it will help: http://www.screenr.com/OWSN

    The comments in this issue might also might make it clearer: http://issues.umbraco.org/issue/U4-4376#comment=67-13130

    Jeroen

  • Matthew 138 posts 201 karma points
    Mar 27, 2014 @ 23:37
    Matthew
    0

    Yep, thanks, the video adds a piece but... (no good deed goes unpunished), you wouldn't happen to know how Jearon gets intellisense to work in VS?  I've read several disjointed bits on it and haven't actually gotten it to fly, still get all the 'dynamic... resoloved at runtime' stuff.

  • Jeroen Breuer 4908 posts 12265 karma points MVP 5x admin c-trib
    Mar 27, 2014 @ 23:41
    Jeroen Breuer
    1

    You can read the differences between Dynamic and Strongly Typed here: http://our.umbraco.org/documentation/Reference/Mvc/querying

    Make sure you don't use CurrentPage (that's dynamic) anywhere in your views and use Model.Content (same object, but strongly typed) instead.

    Jeroen

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Mar 28, 2014 @ 00:08
    Jeavon Leopold
    0

    Hi Matthew,

    As Jeroen says use Model.Content instead of CurrentPage then you get Intellisense. I converted the partial view in that Screenr from the starter kit to strongly typed from the dynamic the stater kit is as default.

    Jeavon

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Mar 28, 2014 @ 00:09
    Jeavon Leopold
    0

    p.s. If our want to post some code I'm sure we can help you convert it to strongly typed :-)

  • Matthew 138 posts 201 karma points
    Mar 28, 2014 @ 02:16
    Matthew
    0

    Thank you both.  I don't have any code yet, I've just been waiting for the image cropper to arrive before I got serious with this new website.  It's been a year since my last one @ 4.11 and I'm sure things have changed a lot.  I'm just an implementor but last time I enjoyed learning Razor so this time I thought I'd man up and start with the fundamentals of how asp, .net and @umbraco work, see if that didn't make life easier.

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Mar 28, 2014 @ 11:39
    Jeavon Leopold
    0

    No problem, here is the umbFeatures.cshtml from the starter kit both dynamic and strongly typed:

    Dynamic:

    @inherits UmbracoTemplatePage
    @{
        var homePage = CurrentPage.AncestorsOrSelf(1).First();
    }
    <!-- Features -->
    <section class="is-features">
        <h2 class="major"><span>Wonderful featured pages</span></h2>
        <div>
            <div class="row">
                @foreach (var feature in homePage.umbTextPages.Where("featuredPage"))
                {
                    <div class="3u">
                        <!-- Feature -->
                        <section class="is-feature">
                            <a href="@feature.Url" class="image image-full"><img src="@feature.Image" alt="" /></a>
                            <h3><a href="@feature.Url">@feature.Name</a></h3>
                            @Umbraco.Truncate(feature.BodyText, 100)
                        </section>
                        <!-- /Feature -->
                    </div>
                }
            </div>
        </div>
    </section>
    <!-- /Features -->
    

    Strongly Typed:

    @inherits UmbracoTemplatePage
    @{
        var homePage = Model.Content.AncestorsOrSelf(1).First();
    }
    <!-- Features -->
    <section class="is-features">
        <h2 class="major"><span>Wonderful featured pages</span></h2>
        <div>
            <div class="row">
                @foreach (var feature in homePage.Children.Where(x => x.DocumentTypeAlias == "umbTextPage" && x.GetPropertyValue<bool>("featuredPage")))
                {
                    <div class="3u">
                        <!-- Feature -->
                        <section class="is-feature">
                            <pre>
    @feature.GetPropertyValue("image")
    </pre>
                            <a href="@feature.Url" class="image image-full"><img src="@feature.GetPropertyValue("Image")" alt="" /></a>
                            <h3><a href="@feature.Url">@feature.Name</a></h3>
                            @Umbraco.Truncate(feature.GetPropertyValue<string>("BodyText"), 100)
                        </section>
                        <!-- /Feature -->
                    </div>
                }
            </div>
        </div>
    </section>
    <!-- /Features -->
    
  • Matthew 138 posts 201 karma points
    Mar 29, 2014 @ 01:21
    Matthew
    0

    Thanks again, the comparitive example helps, now the info in the 'Querying and Traversal' doc starts to make sense.

  • Mark 17 posts 88 karma points
    Mar 29, 2014 @ 01:58
    Mark
    0

    sorry guys this might be out of place but i am new to umbraco ... can someone send me the code to simply add an image from a media picker to a template 

    the id of my media picker is "featureImage" . i am using umbraco 7.0.4, below is the html code

    ( Also is there a manual somewhere with examples on how to do simple tasks like adding an image to a template )

         

    @Umbraco.Field("featureImage")

                   

                  

    @Umbraco.Field("featureHeading")

                       

    @Umbraco.Field("featureIntro")

                   

  • Matthew 138 posts 201 karma points
    Mar 29, 2014 @ 03:27
    Matthew
    0

    I'm just getting my feet wet again since 4.11 so I'm rusty but if you install a starter template you'll see how they do it in serveral places.  For instance, on the News Item template, they've used:

    <img src="@CurrentPage.Image"/>

    and in the Partial Views, umbNewsOverviewWidget.cshtml, they've set a variable 'featuredNewsItem' and used:

    <img src="@featuredNewsItem.Image"/>

    In my last one, I had used a lot of:

    <img src='@Model.Media("YourMedia", 'umbracoFile")'/>

    Haven't gotten to figuring out if that still works though.

    There is no manual per se but there are the docs mentioned above:

    http://our.umbraco.org/documentation

    There are the starter packages and the forum (you've noticed that inserting code here can be tricky), there is the umbraco tv (http://umbraco.tv/) which is pretty cheap and full of stuff you need to know, there is a now kind of old umbraco book available on amazon in a kindle edition that's pretty reasonable, there's the blog that has posted some great info and there's a pretty good bit of stuff on stackoverflow.

    I couldn't say why there's no consolidated, updated documentation but my guess is it is the nature of open source: so many good ideas to implement, so little time...  My experience with most documetation is it is often unsatisfying anyway.  My take on it is, if you're just getting started, add 40 hours of play time to your production schedule.  If you're going to be doing custom CMS sites, I think umbraco has the best concept and is worth the learning curve.

    And dig around the forum.  Frustrating as it can be at times, there's good info and good people.

     

  • Jeavon Leopold 3074 posts 13632 karma points MVP 11x admin c-trib
    Mar 29, 2014 @ 08:41
    Jeavon Leopold
    0

    I've replied to Mark in a specific new thread he created here

    However a little more info for you, with the switch to MVC templates there is new object for representing content called IPublishedContent as previously with the Razor macros we used the DynamicNode object. You access IPublishedContent using either CurrentPage (dynamic) or Model.Content (typed) rather than Model (dynamic). Also with MVC we have a UmbracoHelper which is accessed using @Umbraco. which is pretty similar to the @Library. we had in the legacy Razor Macros.

    This is a pretty good documentation page for looking at dynamic vs typed.

    There are lot of v7 specific Razor samples here and for the ones that are currently missing check the v4/v6 property editor Razor samples here, look for the MVC samples as lot of them will still work with v7.

    Hope that's all helpful?

    Jeavon

  • Matthew 138 posts 201 karma points
    Apr 08, 2014 @ 02:56
    Matthew
    0

    @Jeavon, getting down to it now and looking back to this post, it is a very helpful and thank you very much.

Please Sign in or register to post replies

Write your reply to:

Draft