Copied to clipboard

Flag this post as spam?

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

  • Alex Skennerton 16 posts 168 karma points notactivated
    Dec 09, 2021 @ 13:02
    Alex Skennerton

    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.

  • Marc Goodson 2133 posts 14273 karma points MVP 8x c-trib
    Dec 11, 2021 @ 08:46
    Marc Goodson

    Hi Alex

    What I tend to have done over the years, is create a Macro

    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.



  • Alex Skennerton 16 posts 168 karma points notactivated
    Dec 20, 2021 @ 07:46
    Alex Skennerton

    thanks, Marc, I was leaning towards the Macro route, good to know I'm on the right track. :)

  • Paul Griffiths 370 posts 1021 karma points
    Jun 26, 2022 @ 18:56
    Paul Griffiths

    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

    var imageId = Model.GetParameterValue<int>("image");
    var imageUrl = imageId != 0 ? Umbraco.TypedMedia(imageId).Url : string.Empty;
    @if (!string.IsNullOrEmpty(imageUrl))
        <div class="rte-image-block @imagePosition">
            <img class="img-responsive" src="@imageUrl.GetCropUrl(500, 500, imageCropMode: ImageCropMode.Crop)" alt="Alternate Text" />

    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

  • Marc Goodson 2133 posts 14273 karma points MVP 8x c-trib
    Jun 29, 2022 @ 14:21
    Marc Goodson

    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 -

    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: 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?



Please Sign in or register to post replies

Write your reply to: