Current best practice for WYSIWYG Image Insert

First use the toolbar button to insert image. Then double click the image. This should give you all options, namely float, alternative text, etc

(edit: fair enough, Dave).

@Nick: Please try to keep this issue queue constructive. We're aware there's WTFs involved when getting the WYSIWYG set up and using it with non-image files.

The original issue here needs to be split up into several different feature requests, some of which may have existing issues in the queue.

@Nick Lewis: Yes, it would of course be very nice to have this out-of-the-box. However, should it then be using inline CSS, CSS classes depending on custom file based CSS or something else? Personally I want to avoid as much as possible to use inline CSS in content and instead have it in separate files in the theme. Others don't really care and so on.

Therefor my standpoint for this kind of feature request is that it should not be part of the core Media module. It is much better handled by add-on modules where user can then opt for the method they prefer.

The core Media module should be as lightweight and lean as possible and not make choices such as the one needed here. We need to focus on the basic functionality that is needed and there is still a lot to do there.

@Dave Reid: Is it possible for add-on modules to modify the bundled WYSIWYG integration, adding functionality such as this?

My best success with images (at least) has been the combination of CKEditor, and media_crop for wysiwyg integration. Here's one problem I do have a temp solution for: Applying image-float-left, image-float-right, image-float-center styles using ckeditor. Turns out clients want to have their images aligned left, or right in the body of articles. Go figure. This didn't work using wysiwyg styles a few weeks ago. Here's how I got around it. Using a custom module, I implemented this hook as so (obviously replace"GLOBOCHEM" with whatever your custom module might be called).

 * Adds custom styles to the weirdo ckeditor object && array config thingy 
 */
function GLOBOCHEM_wysiwyg_editor_settings_alter(&$settings, $context) {
  // most drupal 7 sites use an admin theme, so you gotta include theme styles in a glue module here
  $settings['contentsCss'][] = drupal_get_path('module','GLOBOCHEM').'/css/the-shiznat-style.css';
  if ($context['profile']->editor == 'ckeditor') {
    //seriously, the way CkEdiTor handles cAse AnnoYs me
    $settings['stylesCombo_stylesSet'] = 'my_styles:'.base_path().drupal_get_path('module', 'GLOBOCHEM').'/js/the-shiznat.wysiwyg.js';
  }
} 

Here's my the-shiznat.wysiwyg.js file;

CKEDITOR.addStylesSet('my_styles',[{
  name: 'Image left',
  element: 'span',
  attributes: {'class' : 'media-image-left'} 
},
{
  name: 'Image right',
  element: 'span',
  attributes: {'class' : 'media-image-right'}
},
{
  name: 'Image center',
  element: 'span',
  attributes: {'class' : 'media-image-center'}
},
{ name : 'Pull Quote', element : 'span', attributes : { 'class' : 'pullquote' } }
]);

The CSS is pretty standard. Just have your css file have the right classes, and floats, etc...

Note
*just realized how little sense i may have just made.

Unfortunately, as mentioned in #3 and #4, there are currently a lot of outstanding issues with Media. I've outlined the issues working towards fixing the problems described in the original post.

• Floating images can be accomplished through the WYSIWYG editor directly (see Nick Lewis' comment in #7).
• Alternative text is being worked on in #1307054: Accessibility - Media browser image alt and title fields.
• Changing media options once it has been inserted using WYSIWYG is being worked on in #835516: Add ability to edit file meta data and fields when embedded in WYSIWYG
• Limiting file styles is being worked on in #1413300: Limit file styles available to user. Added a class to an image can be accomplished through the WYSIWYG editor directly.

"Floating images can be accomplished through the WYSIWYG editor directly (see Nick Lewis' comment in #7)."

How about centering an image? WYSIWYG + CKEditor only give you float left and right but no centering. Is there any workaround for this?

I haven't tested this yet, but it might be doable with the following modules:

http://drupal.org/project/shortcode as indicated here #1784708: Compatability with the media module
See the following video for what shortcodes do: http://demo.lumi.sooperthemes.com/content/shortcodes/wysiwyg-integration

http://drupal.org/project/stf_wysiwyg - say's it uses media modules on the project homepage
http://drupal.org/project/sc_basic

I think it also provides clearfixes for wrapping an object with a div and clearfix.

-Hope that helps

For floating with inserted images, try the excellent float filter module. For some approaches on image insertion, have a read of this article.

@kirilius #9:

How about centering an image? WYSIWYG + CKEditor only give you float left and right but no centering. Is there any workaround for this?

You can set centering to default behavior in your css. If the editor uses ckeditor to float right or left, this option will be overridden automatically.

.media-element-container img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

While asking for best practice, the following solution includes ability to align images left, right and center and add caption to the image which is positioned well (below) the image:

I use current dev of wysiwyg (with ckeditor), file_entity and media with the patches #1792738: Allow custom file view modes for WYSIWYG display #185 and #2126697: Wysiwyg -- Alt and Title fields require some special handling. #47. In admin/structure/file-types/manage/image/display I enabled the display of title (used for caption) (and also for a custom field copyright).

Adding images via wysiwyg (media_wysiwyg should enabled) and filling all necessary filds now should result in the display of the image and the fields. Floating is already working, but only for the image and not the caption.

To achieve this, I added the following code to my custom themes template.php (workaround for #2018075: Media inline filter: Delegate "float" to outer element):

/**
 * Implements template_preprocess_file_entity
 */
function custom_bartik_preprocess_file_entity(&$vars) {
  $width = NULL;

  // Get image width from override or file metadata settings.
  if (!empty($vars['override']['attributes']['width'])) {
    $width = $vars['override']['attributes']['width'];
  }
  else if (!empty($vars['metadata']['width'])) {
    $width = $vars['metadata']['width'];
  }

  // Add width to wrapper div, to limit space of caption (title and copyright).
  if ($width) {
    if (empty($vars['attributes_array']['style'])) {
      $vars['attributes_array']['style'] = 'width: ' . $width . 'px;';
    }
    else {
      $vars['attributes_array']['style'] .= ' width: ' . $width . 'px;';
    }
  }

  // Add file style attributes to wrapper div too.
  if (!empty($vars['override']['attributes']['style'])) {
    if (empty($vars['attributes_array']['style'])) {
      $vars['attributes_array']['style'] = $vars['override']['attributes']['style'];
    }
    else {
      $vars['attributes_array']['style'] .= $vars['override']['attributes']['style'];
    }
  }
}

And this to the themes css:

/* Make images responsive */
img {
  max-width: 100%;
  height: auto;
}
/**
 * Media WYSIWYG
 */
.media-element-container .file {
  margin-left: auto;
  margin-right: auto;
}
.media-element-container .field-name-field-file-image-title-text {
  padding: 0 1em;
  text-align: center;
}

Now the wrapper div with the image and the caption gets centered by default or floated left/right if set by wysiwyg ckeditor.

Finally I also cleaned up the file entity template by adding file--image.tpl.php to the theme with the following code (this is optional, but I didn't like the hidden h2-Tag):

<div id="<?php print $id; ?>" class="<?php print $classes ?>"<?php print $attributes; ?>>
  <div class="content"<?php print $content_attributes; ?>>
    <?php
      // We hide the links now so that we can render them later.
      hide($content['links']);
      print render($content);
    ?>
  </div>
  <?php print render($content['links']); ?>
</div>

As this is a support request and #8 only refers to feature request this issue shouldn't be marked as duplicate. But hopefully the question is answered now, so I set it to fixed.