help courier publishing image within a rich text editor maybe simple for someone who knows

Damon 217 posts 288 karma points

Mar 31, 2016 @ 16:51

Help with publishing image within a rich text editor - maybe simple for someone who knows

Hi,

I am using Courier, the very latest 2.52.3.

Pages publish fine. However, when there is an image added to a rich text , Courier does not seem to pick it up as a dependency and hence does not publish the image along with the page.

Can someone please tell me what configuration I need to add to courer.config to achieve this. This must be a very common task I would have thought.

I have tried to research the config file, but do not seem to be able to find what I am looking for,

Thanks a lot for any help!

Copy Link

Si Burgess 15 posts 56 karma points

Apr 25, 2016 @ 15:39

Hi Damon,

Did you find a solution to this? I'm experiencing the issue.

Cheers, Si

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Apr 25, 2016 @ 17:39

Hi Si,

Which version of Courier are you using at the moment?

/Dennis

Copy Link

Si Burgess 15 posts 56 karma points

Apr 25, 2016 @ 17:43

The latest 2.52.4 in Umbraco 7.3.8.

Doesn't look like it's even handling RTE when in a grid.

Copy Link

Dennis Aaen 4500 posts 18255 karma points admin hq c-trib

Apr 26, 2016 @ 12:38

Hi Damon and Si.

I have been talking to one from the Courier development team, and right now we do not transfer images in the rich text editor, unfortunately.

So I would recommend you to kulild or see if someone else in this great community have created a package for something like this.

What you need is a resolver that trigger on RTE editor and the needs to search for tags.

For documentation have a look here. https://github.com/umbraco/Courier/blob/master/Documentation/Developer%20Documentation/Data%20Resolvers.md

Hope this helps,

/Dennis

Copy Link

Si Burgess 15 posts 56 karma points

Apr 26, 2016 @ 13:23

Thanks for the reply and confirming Dennis. I read something contradictory in another forum post that images were transferred when in the RTE but glad to have the clarification. :)

No probs, I will roll my own GridCellResolverProvider and inspect for images. Once I have it working I'll pop a copy of the class up for others who would like it.

Copy Link

Chris Ashton 57 posts 89 karma points

Apr 30, 2016 @ 15:22

Hi Si,

Did you manage to get this working?

Cheers, Chris

Copy Link

Si Burgess 15 posts 56 karma points

May 01, 2016 @ 10:14

Hi Chris,

Yep I got this working. I'll post the class up on Tuesday when I'm back at work.

Cheers, Si

Copy Link

Chris Ashton 57 posts 89 karma points

May 01, 2016 @ 11:55

Fantastic Si, it'd be very much appreciated.

Chris

Copy Link

Si Burgess 15 posts 56 karma points

May 05, 2016 @ 14:39

Sorry for the delay, this is what created and works in 2.52.4 in Umbraco 7.3.8

using HtmlAgilityPack;
using System.Collections.Generic;
using System.Linq;

using Umbraco.Courier.Core;
using Umbraco.Courier.Core.Common.Extensions;
using Umbraco.Courier.Core.Logging;
using Umbraco.Courier.DataResolvers.PropertyDataResolvers;
using Umbraco.Courier.ItemProviders;

namespace ChangeToYourNamespace
{
    public class RteGridEditorGridCellResolverProvider : GridCellResolverProvider
    {
        public override bool ShouldRun(string view, GridValueControlModel cell)
        {
            try
            {
                var alias = cell.Editor.Alias;
                var shouldRun = view.Equals("rte") && alias.Equals("rte");

                CourierLogHelper.Debug<RteGridEditorGridCellResolverProvider>(string.Format("ShouldRun = {0}, view: {1}, cell.Editor.Alias: {2}", shouldRun, view, alias));
                return shouldRun;
            }
            catch
            {
                CourierLogHelper.Warn<RteGridEditorGridCellResolverProvider>(string.Format("ShouldRun could not get alias for cell with view: {0}", view));
                // ignored
            }

            return false;
        }

        public override void PackagingCell(Item item, ContentProperty propertyData, GridValueControlModel cell)
        {
            //CourierLogHelper.Info<RteGridEditorGridCellResolverProvider>(string.Format("PackagingCell: cell: {0}", cell));
            //CourierLogHelper.Info<RteGridEditorGridCellResolverProvider>(string.Format("PackagingCell: cell.Value: {0}", cell.Value));

            // Get the markup from the RTE
            var rteMarkup = cell.Value.ToString();

            // Search the markup for image tags.
            var htmlDoc = new HtmlDocument();
            htmlDoc.LoadHtml(string.Format("<html><head></head><body>{0}</body></html>", rteMarkup));

            var imageIdAndPath = new Dictionary<int, string>();

            // Find <img>'s with src attributes that are from the /media/ path and get their ID's.
            htmlDoc.DocumentNode.SelectNodes("//img[@src][@data-id]").ForEach(image =>
            {
                var src = image.Attributes["src"].Value;
                var dataId = image.Attributes["data-id"].Value;
                int id;

                if (!src.StartsWith("/media/") || string.IsNullOrWhiteSpace(dataId) || !int.TryParse(dataId, out id))
                    return;

                // Only need to process the image once so don't add again.
                if (!imageIdAndPath.ContainsKey(id))
                    imageIdAndPath.Add(id, src);
            });

            // Return out if no image ID's have been found.
            if (!imageIdAndPath.Any())
                return;

            // Process the discovered images...
            imageIdAndPath.ForEach(imageIdPath =>
            {
                // Add the image path to the item.Resources, this will add the file to the "Files to be deployed" list.
                item.Resources.Add(imageIdPath.Value);

                // Create the image 'Media' dependancy and add it to the item.Dependencies.
                // Courier will add the Media Property Data entry for us.
                var imageUniqueId = PersistenceManager.GetDefault(ExecutionContext).GetUniqueId(imageIdPath.Key, UmbracoNodeObjectTypeIds.Media);
                var imageMediaDependency = new Dependency(imageUniqueId.ToString(), ItemProviderIds.mediaItemProviderGuid);
                item.Dependencies.Add(imageMediaDependency);

                CourierLogHelper.Info<RteGridEditorGridCellResolverProvider>(string.Format("PackagingCell: Added image with ID {0} ({1}) from path: {2}", imageIdPath.Key, imageUniqueId, imageIdPath.Value));
            });
        }
    }
}

Copy Link

Richard Waite 11 posts 79 karma points

Aug 21, 2017 @ 14:53

This is still broken in Umbraco 7.6.0.

Si's solution still works but the 'data-id' attribute is no longer used in 7.6 so use the 'data-udi' attribute instead.

Here's the code that worked for me, I also extended it to include linked files as well as just images:

// Find <img>'s with src attributes that are from the /media/ path and get their ID's.
    htmlDoc.DocumentNode.SelectNodes("//img[@src][contains(@data-udi,'media')] | //a[@href][contains(@data-udi,'media')]").ForEach(node =>
    {
        var dataUdi = node.Attributes["data-udi"].Value;
        GuidUdi udi = GuidUdi.Parse(dataUdi);

    var guid = udi.Guid;
    var src = node.Attributes["src"] != null ? node.Attributes["src"].Value : node.Attributes["href"].Value;

    var ms = ApplicationContext.Current.Services.MediaService;
    var mediaItem = ms.GetById(guid);
    var itemId = mediaItem.Id.ToString();

    int id;

    if (string.IsNullOrWhiteSpace(itemId) || !int.TryParse(itemId, out id))
        return;

    // Only need to process the image once so don't add again.
    if (!imageIdAndPath.ContainsKey(id))
        imageIdAndPath.Add(id, src);
});

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

Help with publishing image within a rich text editor - maybe simple for someone who knows