Copied to clipboard

Flag this post as spam?

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


  • Iulia Maria Jensen 40 posts 71 karma points
    Nov 24, 2014 @ 15:26
    Iulia Maria Jensen
    0

    Get the Cropper object

    Hi,

    I have a partial View which implements @model IPublishedContent.

    I have the following   var typedMedia = Helper.TypedMedia(Model.GetPropertyValue("grafik")); and I need to get the Cropper object somehow in order to extract the focus points.

    Any ideas?

     

    Thanks in advance.

    Iulia

  • Jeavon Leopold 3000 posts 13163 karma points MVP 6x admin c-trib
    Nov 24, 2014 @ 15:32
    Jeavon Leopold
    1

    Hi Iulia,

    You will need to inherit from UmbracoViewPage, so change your first line to this:

    @inherits Umbraco.Web.Mvc.UmbracoViewPage<IPublishedContent>
    

    Then you should be able to do

    typedMedia.GetCropUrl
    

    Jeavon

  • Jeavon Leopold 3000 posts 13163 karma points MVP 6x admin c-trib
    Nov 24, 2014 @ 15:37
    Jeavon Leopold
    0

    I'm not sure what your "Helper" is but once your are inheriting from UmbracoViewPage you can use the default Umbraco Helper, e.g.

    var typedMedia = Umbraco.TypedMedia(Model.GetPropertyValue("grafik"));
    var cropUrl = typedMedia.GetCropUrl(100, 100);
    
  • Iulia Maria Jensen 40 posts 71 karma points
    Nov 24, 2014 @ 15:41
    Iulia Maria Jensen
    0

    Hi,

     

    Thanks for the quick answers!

    UmbracoHelper Helper = new UmbracoHelper(UmbracoContext.Current);

    All right, but can I then extract the Focus Point from the Cropper? 

    I don't think I was able to say cropUrl.Focuspoint or anything of the like..

     

    Thanks in advance.

    Iulia


  • Jeavon Leopold 3000 posts 13163 karma points MVP 6x admin c-trib
    Nov 24, 2014 @ 15:43
    Jeavon Leopold
    0

    Hi Iulia,

    What do you want to do with the focal point exactly?

    var cropUrl = typedMedia.GetCropUrl(100, 100);
    

    The snippet above for example would use the focal point to create a 100x100 crop from the source image...?

    Jeavon

  • Iulia Maria Jensen 40 posts 71 karma points
    Nov 24, 2014 @ 18:08
    Iulia Maria Jensen
    0

    Hi,

    I have a situation where the same image has to be shown with two different aspect ratios but same focus point on the same page (two different divs).

    The image is chosen on two different items but of the same kind/same node type. Then the image is rendered in a Partial view which already gets the IPublishedContent node/item as a model (which means each of those items at a time). But when I am down in the Partial, I do not know which one of the aspect ratios I should use (code-wise) as there is no indication. 

    Therefore what I really am trying to accomplish is to go around the CropUp default method and have something like this:

      <img src="@imgUrl?crop=@cropFocusPoint&cropmode=@cropMode&width=440&slimmage=true" alt="@media.altText" />, where I then can manipulate the width and height via CSS instead. As I do have a class/html element indication.

    Which is why I need a nice way for retrieving the Focus Point.. Any suggestions?

    I hope it makes sense.

    Iulia

  • Jeavon Leopold 3000 posts 13163 karma points MVP 6x admin c-trib
    Nov 24, 2014 @ 18:20
    Jeavon Leopold
    2

    Ok, given that slimmage does not support flexible heights, my approach would probably be to stack the two images using z-index then use CSS media queries to change the z-index so that the one you want is visible.

    e.g.

    <div>
    <img src="@typedMedia.GetCropUrl(100, 100)"/>
    </div>
    <div>
    <img src="@typedMedia.GetCropUrl(300, 100)"/>
    </div>
    

    If you really want to get the focal point values you can do it like this:

    @using Newtonsoft.Json
    @using Umbraco.Web.Models
    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @{
        var imageCropDataSet = JsonConvert.DeserializeObject<ImageCropDataSet>(Model.GetPropertyValue<string>("grafik"));    
        var focalLeft = imageCropDataSet.FocalPoint.Left;
        var focalTop = imageCropDataSet.FocalPoint.Top;           
    }
    

    Jeavon

  • Jan Skovgaard 11244 posts 23437 karma points MVP 6x admin c-trib
    Nov 24, 2014 @ 18:28
    Jan Skovgaard
    1

    Hi Iulia (and Jeavon)

    Sorry if I'm missing something but TL:DR :)

    I'm thinking if you could perhaps just use the approach mentioned by Brad Frost here so you can serve the proper image to the proper device? http://bradfrost.com/blog/post/responsive-images/

    That seems to be a better solution if you ask me rather than doing all kinds of CSS magic.

    Hope I got it right.

    /Jan

  • Jeavon Leopold 3000 posts 13163 karma points MVP 6x admin c-trib
    Nov 24, 2014 @ 18:36
    Jeavon Leopold
    0

    @Jan Picture polyfil is great but with img srcset you still don't get responsive width & height (so called art direction). Img srcset does pretty much the same as Slimmage but requires a little more work to get all the paths rendering statically into the HTML (especially if you consider all the pixel densities).

    Art direction is possible with the picture element itself. The best description of this I have read is in this blog post in the section "The Art-Direction Use Case" but I think it's pretty complex to get working!

    As a side note, I have been working on adding a option to Slimsy to render for img srcset instead of Slimmage.js

  • Iulia Maria Jensen 40 posts 71 karma points
    Nov 25, 2014 @ 08:53
    Iulia Maria Jensen
    0

    Hi Jan and Jeavon!

    Many thanks for the great answers! I got a lot of inspiration from them. I'll use some time today to see how I can solve this best.

    Also, adding an option to Slimsy to render for img srcset sounds like bliss! :)

    Iulia

  • Iulia Maria Jensen 40 posts 71 karma points
    Nov 25, 2014 @ 14:27
    Iulia Maria Jensen
    0

    Hi guys,

    I ended up separating the two like so:

        foreach (IPublishedContent item in boxCollection)
        {
            var partialName = "FrontpageHalfBoks";
            if (@item.DocumentTypeAlias != "Infoboks")
            {
                partialName = @item.DocumentTypeAlias;
            }
            @Html.Partial(@partialName, item)
        }

    I started on the idea that I shouldn't differentiate, since I am loading the partials via Item DocumentTypeAlias. But in the end I chose a logic separation anyway, after seeing your feedback and understanding the challenge better. It means that I have to maintain two different files but it seems the cleanest version for now.

    So thanks for now!

  • Jeavon Leopold 3000 posts 13163 karma points MVP 6x admin c-trib
    Nov 25, 2014 @ 16:05
    Jeavon Leopold
    0

    Sounds like a good plan Iulia, I hope for more demystification of Picture element and Art Direction over the next 12 months :)

Please Sign in or register to post replies

Write your reply to:

Draft