Inline images with bard - practical options?

[rickmills]

We're using the Bard fieldtype for all our 'WYSIWYG' style content, however we've had a few cases of clients wanting to have an image inline so they can wrap the text around it - a fairly typical thing to do in large content pieces across the web.

From what I can tell though this might end up not being possible as an image set adds between content sets, so you have source code that looks like this:

<p>Some content here</p>
<img src="/some/image.jpg">
<p>Some more content</p>

Initially I assumed we could make use of the custom template files for sets but this wouldn't appear to be a fix as all it would allow is for us to wrap the img tag, and not move it to being inlined.

The other option we've tried is enabling images in the top bar. This inserts them exactly where you click. But they then have no alignment options so get put quite literally right up against the word they were placed next to:

<p>Some content<img src="/some/image.jpg"> here</p>
<p>Some more content</p>

Is there a recommended solution to doing this in Bard, or are we better off moving these content blocks over to one of the other wysiwyg addons such as tinymce assuming that one would make this possible?

The only other option I saw was using the Bard Mutator Addon to modify how the output works but this feels like we're getting into overly complicated workarounds than a solution.

Edit: After some more playing with this I do have one possible option but it feels super hacky. On the image set field I can add more fields. So theoretically you could have an alignment field that you then use in the image set template to position the image. This works for the most part, but obviously doesn't look anything like the live copy when editing it in bard. This will probably do the job but I'll leave this open both incase anyones got a better solution, and incase someone else runs into this.

[byron-roots]

I think your edit is the right solution. Whilst Bard can be a WYSIWYG editor it's far more than that. If you need to check what it looks like before saving you have the live preview you can use to then fiddle with the position and alignment. Otherwise you'd need to look at extending Bard with your own implementation for adding images

[ottz0]

Trying to achieve this also. Looking at tinymce but image plugin is now a paid version on v6. Can't wrap images.

[duncanmcclean]

Could you add a set for images to the Bard field?

You can control what the options are & how they're implemented on the front-end.

[danielfowler]

Maybe I'm being naive but it seems like the simplest solution would be using CSS make the image float:left or float:right to wrap text around it? You can control margins and max width and whatnot too.