apostrophe-cms toolbar with floats

Question

I've been putting together a site with apostrophecms, however I've come to the point with one of the layouts where it just doesn't play nicely.

The content is a simple mixture of p and img tags (floated left or right)

Toolbars for images floated to the left are ok, but the toolbar for any right floated images is positioned on the wrong side of the document.

Is there a good way to resolve this without building the layout in a different manner?

Alternatively I could use the rich text editor, however the image item in the rich-text module only allows the use of an image from a URL, and does not include a way to upload the image directly into the system (that I can see).

Thanks for your help!

Sample screenshot of what's happening.

  &#story-detail {

.wrapper-relative {
    section {
      overflow: visible;
      max-width: none!important;
       text-align: left;
       q {display: block; font-size: 1.3em; margin: 1em auto;}
       q, p, h5 {width:60%; margin:1em auto; z-index:5}
       div {overflow: visible;}
       img {
        position: relative;
        &.left {float:left; margin-left: 5%; padding-right: 20px; padding-bottom: 30px; max-width: 400px }
        &.right {float:right; margin-right: 5%;  padding-left: 20px; padding-bottom: 30px;  max-width: 400px}
        &.full { margin:0; width: 100%;  }
       }
}

}

}

<section class="{{ data.widget.animationType }}">
    {{ apos.area(data.widget, 'areaMain', {
      widgets: {
        'apostrophe-rich-text': {
            toolbar: ['Bold', 'Italic', 'Split',  'Link', 'Unlink']
        },
        'simple-image': {}
      }
    }) }}
</section>

Answer 1

You want to float the entire widget, not just the visual content (img). Give your widget a custom class that leverages a piece of schema to give yourself the different widget modifiers.

In your widget schema add

{
  name: 'float',
  label: 'Float',
  type: 'select',
  choices: [
    { label: 'None', value: 'none' },
    { label: 'Left', value: 'left' },
    { label: 'Right', value: 'right' }
  ]
}

And then in lib/modules/simple-image-widgets/index.js

module.exports = {
  construct: function (self, options) {
    self.getWidgetWrapperClasses = function (widget) {
      return ['simple-image--' + widget.float];
    };
  }
};

Now your entire wrapper will have a class that know to float, the controls should go with the container.