Sign in Register
Go to solution
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 17 posts 179 karma points notactivated
    Dec 09, 2021 @ 13:02
    Alex Skennerton
    0

    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.

    Copy Link
  • Marc Goodson 2155 posts 14408 karma points MVP 9x c-trib
    Dec 11, 2021 @ 08:46
    Marc Goodson
    101

    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

    Copy Link
  • Alex Skennerton 17 posts 179 karma points notactivated
    Dec 20, 2021 @ 07:46
    Alex Skennerton
    0

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

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

    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" />
    </div>

}

    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

    Copy Link
  • Marc Goodson 2155 posts 14408 karma points MVP 9x c-trib
    Jun 29, 2022 @ 14:21
    Marc Goodson
    0

    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

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft