richtexteditor image and formatting

Go to solution

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

cosminu 9 posts 103 karma points

Jan 15, 2019 @ 09:48
0

RichTextEditor image and formatting

Templates, (partial) views and macros

Umbraco 7
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!
Copy Link
Paul Seal 524 posts 2889 karma points MVP 6x c-trib

Jan 15, 2019 @ 10:59

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

Copy Link
cosminu 9 posts 103 karma points

Jan 15, 2019 @ 11:35

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!

Copy Link

cosminu 9 posts 103 karma points

Jan 17, 2019 @ 01:38

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!

Copy Link

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?