Press Ctrl / CMD + C to copy this to your clipboard.
This post will be reported to the moderators as potential spam to be looked at
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&height=408&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:
<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!
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.
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.
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!
Finally got some time to try this and it worked out.
Here is the macro I ended up with:
if (@Model.MacroParameters["image"] != null)
var imgId = Model.MacroParameters["image"];
var mediaItem = Umbraco.TypedMedia(imgId);
<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>
I added a single parameter to the Macro called "Image" and referenced the partial macro.
Thanks again, Paul!
is working on a reply...
Write your reply to:
Image will be uploaded when post is submitted