better support for float media left and float media right

It would be great if floating left and right could be somehow available out of the box, instead of just a recipe, however that probably isn't something that needs to hold up a 2.0 release.

Edit: Before investigating this approach - skip to #8. It might be better.

Here's a introductory patch to start thinking about this. I don't consider this a finished patch, but am just posting to spur discussion. This patch allows you to have a field on the field type that adds a CSS class to the rendered media.

In order for this to work, you'll need to do a few things:

A. Download and install the field_formatter_css_class module.

B. Add a field to your file type that will be used to control a CSS class. For example, you might add a List (text) field called "Media Alignment" with allowed options of:

media-wysiwyg-right|Right
media-wysiwyg-left|Left

Make sure that this new field is set to be "Overridden in WYSIWYG". If that is not an option, you probably need to check "List (text)" under "Override field types in WYSIWYG" on /admin/config/media/browser.

C. Go to "Manage Display" for the file type and change the Format for the new field to "CSS Class". Then click the settings icon to configure the formatter, and change "Target tag" to "Embedded media", and click "Update" and then "Save".

After this, that new field will control a CSS class on the rendered media. This, by itself, still won't do anything, unless there is CSS to react to this new class. Some example CSS might be:

.media-wysiwyg-right: { float: right; margin-left: 20px; }
.media-wysiwyg-left: { float: left; margin-right: 20px; }

So some things to discuss:

1. Does this work and is this useful?
2. Should we include pre-written CSS that assumes certain classes, like the example code above? If so, should that included CSS be optional?
3. Is there anything we can do to make the configuration easier, or is instructions in a recipe the best we can do?

It actually looks like this integration is going to go into the field_formatter_css_class module: #2844254: Support for Media?

So this will work, but that leaves us with the question of how to make this out-of-the-box, or at least easier for the user. If we want to allow this without any custom code, we'll need to provide a mechanism for adding some pre-written CSS - like a checkbox on an admin page that says "Check this to enable styles for aligning media to the left/right of content. See here for more details: [link to a drupal.org page with the configuration steps]".

How does that sound?

I haven't tried it out yet but it sounds like a good solution to me.

As for the pre-written CSS, is there any precedent for this kind of thing in media_wysiwyg?

Although it is something that would be great I'm not really sure where it belongs and I'm coming around to the idea of just giving instructions since there are a few moving parts.

If the user has to add their own float field with their own CSS classes then really they probably should also do their own CSS.

It occurred to me to take a step back and see if this could be done in a more hard-coded way, rather than relying on field_formatter_css_class. Here's a fairly simple patch that might do it. If we want to go in this direction, we should test this thoroughly, since it adds a new item in the token.

I should mention, this patch includes a new config option on the media browser config page - a checkbox for turning on the alignment functionality.

Note to self for a tweak that should be made to this patch: use hook_page_build() instead of hook_init() to add the css.

I was thinking of using '#attached' to add the CSS, but that's close. I'll try to post a slight tweak when I have time.

I personally lean more towards having it disabled by default, at this point. Most sites using media_wysiwyg probably already have some arrangement set up for handle alignment. For example, the site I work on would not want this on, because we've already got a field controlling alignment. If we have this enabled by default, we'd have to include some release notes telling people they might need to turn it off.

Maybe a compromise would be to have it disabled by default but, but enable it manually in hook_install(), so that new sites would start with it on, but existing sites would not experience any change of behavior.

I haven't tested this but here are some tweaks:
* using #attached to add the CSS
* change the CSS file to a .base.css file, since I think that is more appropriate here
* let the CSS group be the default, since we do want to let themes override this
* prevent this behavior unless enabled, but enable it in hook_install
* remove the variable on uninstall

About getting the alignment to work inside the WYSIWYG: I agree that would be awesome. I don't know for sure but I suspect that would need to be done in 2 places:
1: In this module, to support the WYSIWYG module.
2: In the media_ckeditor module to support the CKEditor widget system.

So I guess this patch isn't complete until we've done #1.

#2 definitely needs a separate issue because it would be done in a separate project. But #1 probably makes sense to do here, so here's a quick attempt, with a few more tweaks.

Did the centering work OK for you? In #30 I tweaked it slightly because it was getting stretched to full width sometimes.

For me it's not a question of compatibility, it's a question of editor experience and content integrity. If I were using this patch and it were enabled by default, then my users would suddenly see 2 separate alignment inputs, which would cause some confusion and complaints - probably some people using the wrong one, and result in a content headache. If I were going to migrate over to this new system, that could be done maybe, but it would involve a very deliberate update script to catch all existing content.

So if this were enabled by default, I would definitely disable it as soon as I knew. And if it caught me by surprise I (and my users) would be annoyed. :)

I guess one option if you want people to be aware of it is to put in an update function that just gives the user a notice with drupal_set_message(). I believe that's a thing some modules do?

Personally I like a shorter less technical message, something like:

If you would like to be able to align your embedded media (left, right, or center), go to /admin/config/media/browser and check "Provide alignment option when embedding media", and save the settings.

This is awesome guys!

2.0 is getting excitingly close.

Hi Guys,
I just followed the new media recipe for Drupal 7. https://www.drupal.org/node/2843391
It's working perfectly.
I'm just missing the image alignment inside the Wysiwyg editor itself, viewing the node works nicely.
The alignement with image2 plugin is working inside Wysiwyg but not the one available via media button I enabled the option "Provide alignment option when embedding media" in /admin/config/media/browser page.