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

Damon 217 posts 287 karma points

Mar 31, 2016 @ 16:51

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

Umbraco Courier

Umbraco 7

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 4499 posts 18254 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 4499 posts 18254 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...

Flag this post as spam?

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