Hi all,

I have created a macro for my client that generates the necessary HTML to align an image to the right of some text using the Bootstrap framework used for the site's front end.

The macro is as follows:

@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{

    Object image = null;
    Object columns = null;
    Object text = null;

    IPublishedContent renderedImage = null;

    int imageColumns = new int();
    if (Model.MacroParameters.TryGetValue("columns", out columns)) {
        int.TryParse(columns.ToString(), out imageColumns);
        if (imageColumns >= 12)
        {
            imageColumns = 12;
        }

    }
    if (imageColumns == 0)
    {
        imageColumns = 6;
    }

    if (Model.MacroParameters.TryGetValue("image", out image)) {
        try 
        {
            renderedImage = Umbraco.TypedMedia(image);
        }
        catch (Exception ex)
        {

        }
    }

    int textColumns = 12 - imageColumns;
    if (Model.MacroParameters.TryGetValue("text", out text)) { }
}

<div class="row rightAlignMacro clearfix">
    @if (imageColumns < 12 && text != null)
    {
        if (!text.ToString().IsNullOrWhiteSpace())
        {
            <div class="col-md-@textColumns">
                @text.ToString()
            </div>
        }
    }
    @if (renderedImage != null)
    {
        <div class="col-md-@imageColumns">
            <img src="@renderedImage.GetResponsiveImageUrl(renderedImage.GetPropertyValue<int>("umbracoWidth"), renderedImage.GetPropertyValue<int>("umbracoHeight"))" alt="@renderedImage.GetPropertyValue("imageCaption")" class="img-responsive" />
        </div>
    }
</div>

The user selects an image using a single media picker, defines the number of columns the image should take up and adds some text to sit alongside it using a textarea controller. When I click save to save the changes I am presented with the following error:

Request error: The URL returned a 404 (not found): /umbraco/backoffice/UmbracoApi/Macro/GetMacroResultAsHtmlForEditor

If I navigate to the page on the front end the content is displayed as expected but if I go back to the same page on the back end, the indicator that suggests a macro is being used is not shown in the rich text editor window.

If you view the html for the page, the macro is indeed there however if you try and add something else without using the HTML editor portion of the rich text editor, this content will be removed. My client does not know HTML and this is the reason why I have had to create this simple macro for them. They are extremely picky and will not accept this solution as it currently stands so how can I fix this issue and preserve the functionality of the macro?

As an aside, I know I should probably be using the Umbraco grid for this but in my experience it just isn't ready for use in a production environment just yet and really doesn't offer as much flexibility as a Bootstrap solution.