using the cropper with rte or media picker

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 10, 2010 @ 15:19

0

Using the cropper with RTE or media picker

Image Cropper

This is shaping up to be a great package, but to be perfect i really think the user should be possible to:

1. select the a cropped image with the media picker
2. insert a cropped images in the RTE.

This doesnt seem to be possible in the current version or am i missing something?

Copy Link
Anders Stentebjerg 58 posts 234 karma points

Jan 27, 2011 @ 13:41

0

Any updates on this one?

//Anders

Copy Link
Sebastiaan Janssen 5045 posts 15476 karma points MVP admin hq

Sep 19, 2011 @ 13:22

0

Can't do it in the RTE, correct. With the media picker, just pick the media item with the crops on it and select the crop in either XSLT or Razor.

Copy Link
Kalle Ekstrand 181 posts 259 karma points c-trib

Sep 20, 2011 @ 07:26

0

But since the cropped image is there, why not display it in the media section? It would really make a lot of my customers happy.

//Kalle

Copy Link
Sebastiaan Janssen 5045 posts 15476 karma points MVP admin hq

Sep 20, 2011 @ 07:41

0

Ah, I thoughr you had that already: go to Settings, Media Types, Image and add the cropper there as a new property.

Copy Link
Kalle Ekstrand 181 posts 259 karma points c-trib

Sep 20, 2011 @ 07:54

0

I think you misunderstand me. I have the Image cropper as a property on my Image media type. And everything works just fine, and I can crop images an so on.

But I would like the cropped files to show up in the media section. for example:

test-image.jpg when cropped also displays the test-image_cropped.jpg in the media section.

If this works, it would also be possible to use a cropped image in the RTE.

And most of my clients would not have to use Photoshop at all...

//Kalle

Copy Link
Sebastiaan Janssen 5045 posts 15476 karma points MVP admin hq

Sep 20, 2011 @ 08:12

0

That would require a significant change in the rte datatype. If you just want resizing, then you can set a maximum size for images in the rte datatype, but if you need real cropping as well you'rr looking at changing the insert image dialog in the rte datatype. It can be done, but rhere's no ready made examples at the moment.

Copy Link
Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib

Sep 20, 2011 @ 11:29

0

If you use the DAMP 2.0 RC it can show the cropped image on the picker. Perhaps not what you want, but at least the user can see the crops only not in the RTE. At the end of this video it also shows cropped images: http://www.screenr.com/vshs.

Jeroen

Copy Link
Kalle Ekstrand 181 posts 259 karma points c-trib

Sep 20, 2011 @ 11:56

0

I dont need the crop dialog in the RTE, I just want to access the already cropped images there.

The cropping-logic are made under the media section as default in the data type.

But today, when you make these cropped images you have to know the extension imagename_"cropped".jpg.

Since it seems like the Image Cropper are really making a separate file, why is it not displayed in the tree under the media section?

//Kalle

Copy Link
Jeroen Breuer 4908 posts 12265 karma points MVP 4x admin c-trib

Sep 20, 2011 @ 11:59

0

Unfortunately the Image Cropper isn't integrated that much into Umbraco. Crops aren't even created by default if you create a new media item. I created a package for that, but the fact that I needed to create that package says enough about how it's integrated.

Jeroen

Copy Link
Mads Sørensen 188 posts 433 karma points

May 10, 2012 @ 14:56

0

Know that this is an old post, but i've got the same question.

I've installed a Media Cropper And it leaves two images and the original:

org: imageName.jpg

1: imageName_big.jpg

2: imageName_small.jpg

But again I cant see the big and the small image in the media section?!?

So, how can I acces this two images with the RichText Editor??? Any suggestions?

//mads

Copy Link
Mads Sørensen 188 posts 433 karma points

May 10, 2012 @ 16:18

0

Is there a way to add a proberty in the RTE insert image option, like chose imageCrop: Big og small???

Any good ideas?

Copy Link
Mads Sørensen 188 posts 433 karma points

May 10, 2012 @ 16:18

0

Is there a way to add a proberty in the RTE insert image option, like chose imageCrop: Big og small???

Any good ideas?

Copy Link
Halima Koundi 8 posts 79 karma points

Mar 23, 2016 @ 11:22

0

Hi,

I know this is an old thread, but has anyone been able to display cropped images when selecting a media in the Rich text editor on Umbraco ?

Cheers

Copy Link
Mads Sørensen 188 posts 433 karma points

Mar 23, 2016 @ 12:03

0

You can do someting with Macros :)

Copy Link
Halima Koundi 8 posts 79 karma points

Mar 23, 2016 @ 12:59

0

Hi Mads,

Thank you for your reply. Any guidance, documentation or sample code would help a lot :) !

Cheers

Copy Link

Mads Sørensen 188 posts 433 karma points

Mar 23, 2016 @ 13:35

This is from a project where i did it :)

@{
  var floatRight = Model.MacroParameters["floatRight"].ToString();
  var text = Model.MacroParameters["text"].ToString();
  var image = int.Parse(Model.MacroParameters["image"].ToString());
  var floatClass = (floatRight == "1") ? "floatRight" : "floatLeft";

  dynamic crop = (!String.IsNullOrEmpty(Model.MacroParameters["crop"].ToString())) ? Json.Decode((dynamic)HttpUtility.HtmlDecode(Model.MacroParameters["crop"].ToString())) : null;

  if(crop.alias == "no-crops") {
    floatClass += " no-crops";
  }

}

@{
  var crops = Umbraco.Media(image).umbracoFile.crops;
  var w = "0";


  foreach(var c in crops) {
    if(c.alias == crop.alias) {
      w = c.width + "px";
    }

  }
}

@if(crop.alias != "no-crops") {

  <div class="image-with-text @floatClass" style="width: @w;">
    <img src="@Umbraco.Media(image).GetResponsiveCropUrl(crop.alias)" class="cropped"/>
    <div class="description">@text</div>
  </div>

}else {

  <div class="image-with-text @floatClass">
    <img src="@Umbraco.Media(image).GetResponsiveImageUrl(270, 0)" class="not-cropped"/>
    <div class="description">@text</div>
  </div>

}

enter image description here

You will have to setup the an media picker and a crop selector in your Macro and what you else need :D

Copy Link

Halima Koundi 8 posts 79 karma points

Mar 23, 2016 @ 16:40

0

Thanks a lot !!

I will give it a try tomorrow.

Cheers.

Halima

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?