showing cropped images from multi media picker

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

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

Claushingebjerg 936 posts 2571 karma points

Mar 28, 2014 @ 15:11

Razor

Ok, so heres a noob question. Just getting into the 7 way of things coming from the xslt world of previous versions trying to get to grips with razor, so bear with me :)

Im trying to render a series of images cropped with the new cropper and chosen with the new multi media picker.

Using:

@if (Model.Content.HasValue("caseStudyImage"))
{
    var caseStudyImagesList = Model.Content.GetPropertyValue<string>("caseStudyImage").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
    var caseStudyImagesCollection = Umbraco.TypedMedia(caseStudyImagesList).Where(x => x != null);

    foreach (var caseStudyImage in caseStudyImagesCollection)
        {      
            <img src="@caseStudyImage.Url" />      
        }                                                               
}

The above renders the images just fine. But changing the img tag to:

<img src="@caseStudyImage.Url", "Tester")" />

throws an error...

Any pointer as to what im doing wrong?

Copy Link

Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Mar 28, 2014 @ 15:14

0

Hi Claus,

Are you using v7.1 beta or RC or a nightly?

Jeavon

Copy Link
Claushingebjerg 936 posts 2571 karma points

Mar 28, 2014 @ 15:15

0

7.1 RC

Copy Link
Claushingebjerg 936 posts 2571 karma points

Mar 28, 2014 @ 15:17
0
The code formatting f... my line. Heres what im trying:
```
<img src="@image.GetCropUrl("@caseStudyImage.Url", "Tester")" />
```
Copy Link
Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Mar 28, 2014 @ 15:17

1

Ah wait, do you mean <img src="@caseStudyImage.GetCropUrl("Tester")" /> where "Tester" is your Crop alias?

Copy Link
Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Mar 28, 2014 @ 15:19

101

Ok, caseStudyImage has the Cropper as the umbracoFile right?

Assuming that "Tester" is your Crop Alias, then <img src="@caseStudyImage.GetCropUrl("Tester")" /> should work?

Copy Link
Claushingebjerg 936 posts 2571 karma points

Mar 28, 2014 @ 15:20

0

Exactly, Thanks :)

Copy Link

Anders Schmidt 76 posts 207 karma points

Apr 14, 2014 @ 10:56

Hi,

I hopy you will help me out. I am confused about this cropper. My code without crop:

      @if (Model.HasValue("newsImages"))
         {foreach (var item in Model.GetProperty("newsImages").Value.Split(','))
          {
            <div>
               <div class="img-thumbnail">
                   <img src="@Model.MediaById(@item).umbracoFile" alt="" style="width:100%;" />
               </div>
          </div>
           }
        }

Using your code gives error.

Thanks

Copy Link

Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Apr 14, 2014 @ 11:05

0

Hi Anders,

Are you using a strongly typed partial view and passing a IPublishedContent model?

Jeavon

Copy Link
Anders Schmidt 76 posts 207 karma points

Apr 14, 2014 @ 11:27

0

Hi

Thanks for quick reply. I do not think :-) I am working with webforms - This case is inside: <umbraco:Macro runat="server" language="cshtml"> on template.

Is this anwser ? :-)

Thanks

Copy Link
Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Apr 14, 2014 @ 11:36

1

Ok, and is your macro a Partial View Macro? If not it needs to be.

When using Umbraco v7 and WebForms all of your macros should be partial view macros, razor macros that use DynamicNode and are stored in "macroScripts" folder are only for legacy support.

Copy Link

Anders Schmidt 76 posts 207 karma points

Apr 14, 2014 @ 12:27

Hi, sorry I have to ask you further:

Now I have this code running partial view macro:

@inherits Umbraco.Web.Macros.PartialViewMacroPage  
@if (Model.Content.HasValue("newsImages"))
    {
    var newsImageList = Model.Content.GetPropertyValue<string>("newsImages").Split(new string[] { "," }, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
    var newsImageCollection = Umbraco.TypedMedia(newsImageList).Where(x => x != null);

    foreach (var item in newsImageCollection)
        {      
                 <img src="@item.GetCropUrl("Landskab")" />           
        }        
    }

And now it displays image not the crop.

I have imageCropper datatype on media node:

Property editor alias

Umbraco.ImageCropper

One crop size: Landskab

On settings>media>image i have made a tab called crop. This has an generic property calles crop containing imageCropper.

What am i missing now?

THANKS

Copy Link

Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Apr 14, 2014 @ 12:29

0

What is the alias of the "cropper" on the document or image type?

Copy Link
Anders Schmidt 76 posts 207 karma points

Apr 14, 2014 @ 12:41

0

Thanks.

Copy Link
Jeavon Leopold 3072 posts 13628 karma points MVP 10x admin c-trib

Apr 14, 2014 @ 12:51

1

Ah ok, you don't need to the crop property, you need to change "umbracoFile" from type "Upload" to type "ImageCropper".

I did a little Screenr here where you can see the process :-)

Copy Link
Anders Schmidt 76 posts 207 karma points

Apr 14, 2014 @ 13:11

0

Arrrhh. Ofcourse. THANKS AGAIN

Copy Link
is working on a reply...

Please Sign in or register to post replies