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

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);

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

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

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

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

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

@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

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

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!

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

is working on a reply...