How do I get the Rich Text Editor to use a cropped version of an image? At the moment the page just displays the full resolution image with no crop options, not great for page load times.
Also, how do I get said image alt text to work, as at the moment it just pulls through as null?
I have cropped images working through GetCropUrl(""); when I create a page template but am currently unable to do this for the end-user/editors who will be using the grid and RTE.
I then give the Macro Parameters
Image: Media Picker
Overriding Alt Text: Textbox
Caption: Textbox
Position: Radiobutton options for 'full width', 'pull-left', 'pull-right' 'inline'
And I let that Macro be inserted into the Grid and Rich Text Editors.
Then the associated Macro is implemented with a MacroPartialView and here I can take the parameters, get the image, use GetCropUrl, depending on the selected options and full control over the corresponding inserted markup, eg I can use an img srcset...
The editor can insert the macro anywhere in the rich text editor or in the grid, on some sites I've removed the insert image button from the editor, so that's not accidentally used instead... !
Does that help? (I think if you are using the existing image insert and the editor clicks on the corner of the image and drags it smaller they can reduce the size of the inserted image... but it's not responsive etc, which is why I prefer the control of a macro)
The image alt text being null might be a bug with V9 (away from my pc at the moment so can't verify) , and might be worth raising on the issue tracker. https://github.com/umbraco/Umbraco-CMS/issues
Sorry to drag up an old thread but I'm working on some improvements for image upload into the RTE on an old V7.15 site.
Is there any way to add the ImageCropper dataType as a Macro parameter, please?
At the moment I have added the single media picker which allows me to choose an uploaded image in the media library and in my code I have done the following
Although this resizes the image to be 500x500 I am losing the focal point of the image hence why I was trying to get the image cropper as a parameter type.
The GetCropUrl should respect the focal point of the image in the Media library, but that's not a lot of fun for the editors who really want to adjust that at the point of choosing to insert it.
In V8,V9,V10 etc there is a new Media Picker that enables you to have that cake and eat it, - pick the image and adjust the crops at the point of insertion.
I'm genuinely not sure/confident that the ImageCropper/Upload would work as a macro parameter, but there is a quick way to find out for V7! -
And that is to install Soren Kottal's Parameter Editor Generator: https://our.umbraco.com/packages/developer-tools/parameter-editor-generator/
Once installed, you right click the DataType in the backoffice, and choose to generate a package.manifest file, you add that file to your app_plugins folder and it will make the editor available as a parameter editor! hurrah!
Whether it will work... not sure, but worth a try?
Rich Text Editor and images
How do I get the Rich Text Editor to use a cropped version of an image? At the moment the page just displays the full resolution image with no crop options, not great for page load times.
Also, how do I get said image alt text to work, as at the moment it just pulls through as null?
I have cropped images working through
GetCropUrl("");when I create a page template but am currently unable to do this for the end-user/editors who will be using the grid and RTE.thanks in advance.
Hi Alex
What I tend to have done over the years, is create a Macro
https://our.umbraco.com/Documentation/Reference/Templating/Macros/
called InsertResponsiveImage.
I then give the Macro Parameters Image: Media Picker Overriding Alt Text: Textbox Caption: Textbox Position: Radiobutton options for 'full width', 'pull-left', 'pull-right' 'inline'
And I let that Macro be inserted into the Grid and Rich Text Editors.
Then the associated Macro is implemented with a MacroPartialView and here I can take the parameters, get the image, use GetCropUrl, depending on the selected options and full control over the corresponding inserted markup, eg I can use an img srcset...
The editor can insert the macro anywhere in the rich text editor or in the grid, on some sites I've removed the insert image button from the editor, so that's not accidentally used instead... !
Does that help? (I think if you are using the existing image insert and the editor clicks on the corner of the image and drags it smaller they can reduce the size of the inserted image... but it's not responsive etc, which is why I prefer the control of a macro)
The image alt text being null might be a bug with V9 (away from my pc at the moment so can't verify) , and might be worth raising on the issue tracker. https://github.com/umbraco/Umbraco-CMS/issues
regards
Marc
thanks, Marc, I was leaning towards the Macro route, good to know I'm on the right track. :)
Hi Marc,
Sorry to drag up an old thread but I'm working on some improvements for image upload into the RTE on an old V7.15 site.
Is there any way to add the ImageCropper dataType as a Macro parameter, please?
At the moment I have added the single media picker which allows me to choose an uploaded image in the media library and in my code I have done the following
Although this resizes the image to be 500x500 I am losing the focal point of the image hence why I was trying to get the image cropper as a parameter type.
Any advice would be welcome.
Thanks Paul
Hi Paul
The GetCropUrl should respect the focal point of the image in the Media library, but that's not a lot of fun for the editors who really want to adjust that at the point of choosing to insert it.
In V8,V9,V10 etc there is a new Media Picker that enables you to have that cake and eat it, - pick the image and adjust the crops at the point of insertion.
I built a custom property editor once that attached itself to a Media Picker, to open up the crops for editing in V7 - but I don't think that would work as a macro parameter - http://tooorangey.co.uk/posts/club-cropicana-crops-are-freeeee/
I'm genuinely not sure/confident that the ImageCropper/Upload would work as a macro parameter, but there is a quick way to find out for V7! -
And that is to install Soren Kottal's Parameter Editor Generator: https://our.umbraco.com/packages/developer-tools/parameter-editor-generator/ Once installed, you right click the DataType in the backoffice, and choose to generate a package.manifest file, you add that file to your app_plugins folder and it will make the editor available as a parameter editor! hurrah!
Whether it will work... not sure, but worth a try?
regards
marc
is working on a reply...