Copied to clipboard

Flag this post as spam?

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


  • cosminu 7 posts 99 karma points
    Jan 15, 2019 @ 09:48
    cosminu
    0

    RichTextEditor image and formatting

    Hi Everyone,

    First of all, excuse me if this has been already asked, but I did not quite understand what I need to do in order to solve my issue.

    So here it is. I am using Articulate(not sure it really matters in this case) and RichTextEditor to create a post. When I upload an image, the generated html for the image is:

    <img src="/media/1028/myImage.jpg?width=641&amp;height=408&amp;mode=max" alt="" width="641" height="408" data-udi="umb://media/1179d51c45024375a29e856c6c8e4893">
    

    I would like to add some styling and/or classes for the image so that it displays nicely (lightbox, prettyphoto or anything similar).

    In the case of prettyPhoto (which I am using), in order for it to work the code needs to look like this:

    <div class="frame">
        <img src="/media/1028/myImage.jpg" alt="img">
        <a href="/media/1028/myImage.jpg" data-rel="prettyPhoto[gallery1]" rel="prettyPhoto[gallery1]"></a></div>
    

    The template can be anything actually, but I want to be able to template the output of the html when an Image is added in the RichTextEditor.

    Thank you in advance!

  • Paul Seal from codeshare.co.uk 323 posts 1569 karma points MVP c-trib
    Jan 15, 2019 @ 10:59
    Paul Seal from codeshare.co.uk
    100

    Hi

    If I was doing this and needed it to work in the rich text editor I would look into doing it as a macro.

    You can find out how to use macros here. https://our.umbraco.com/Documentation/Reference/Templating/Macros/

    You can pick macros from the rich text editor and you can edit the partial view for the macro so that it outputs what you need it to.

    Kind regards

    Paul

  • cosminu 7 posts 99 karma points
    Jan 15, 2019 @ 11:35
    cosminu
    0

    Hi Paul!

    Thank you for your answer. Actually I forgot to mention in the initial post that I found suggestions in the forum on using Macros and that was somewhat what I thought would be the solution. I wasn't actually sure that this was the right way though and also did see the help page you mentioned.

    I will try that out!

    Thank you!

  • cosminu 7 posts 99 karma points
    Jan 17, 2019 @ 01:38
    cosminu
    0

    Finally got some time to try this and it worked out.

    Here is the macro I ended up with:

    @inherits Umbraco.Web.Macros.PartialViewMacroPage @using Umbraco.Web; @using Umbraco.Web.Models

    @{

    if (@Model.MacroParameters["image"] != null)
    {
        var imgId = Model.MacroParameters["image"];
        var mediaItem = Umbraco.TypedMedia(imgId);
    
        <div class="image-post">
            <div class="gallery"> 
                <div class="frame">
                    <img src="@mediaItem.GetCropUrl(width: 500, imageCropMode: ImageCropMode.Max)" />
                    <a href="@mediaItem.GetPropertyValue("umbracoFile")" rel="prettyPhoto[gallery1]" data-rel="prettyPhoto[gallery1]"><i class="fa fa-search-plus"></i></a>
                </div>
            </div>
        </div>
    }
    

    }

    I added a single parameter to the Macro called "Image" and referenced the partial macro.

    Thanks again, Paul!

Please Sign in or register to post replies

Write your reply to:

Draft