Symphony.

I'm interested in how you all manage this kind of scenario where user wants to insert image in the text within markdown editor.

From my current setup, user has to either upload images in a folder via FTP, know the path to that image and than insert it into the content by MD shortcode,

or he has to use multi upload field to upload all images into the article and than somehow extract their URL and paste it into the appropriate place in the MD.

Is it possible to use multi upload field like in Drupal, and just click on the item in the list which automatically inserts MD shortcode for that image?

Or is there some other more elegant solution? Because right now it's even annoying to me, not to mention how annoying it would be for my clients.

1. add new image (markdown style)
2. drag/drop desired image from multiuploadfield.

Interesting, didn't know I can drag and drop in the MD editor. Thanks!

Although, it would be much nicer if there were a button saying "insert" besides each image :D

If I need to do that I generally just give-in and use the Redactor extension, let them treat that section as a WYSIWYG and put up with the garbled code it vomits into my websites. It's at least in a language the client understands, as it were.

The above tip from @cotiunix is good though, I didn't know that was possible myself. And I much prefer using markdown (especially using the new Editor extension).

You know what would be a nice thing? To add option that makes markdown editor drag and drop area for multi upload field. It could possibly have hidden multi upload field connected to editor.

Similar to how Ghost editor works. Just drag and drop image into the editor and it uploads it and inserts link automagically.

That would be amazing.

+1

I'm having to replace some Editor fields with Redactor over the next few days, coincidentally, because a client has decided today that they need to more easily add images to some areas of their site. There are several things I'd prefer about that workflow, not least of all the fact that you can retain relative links (one of my biggest gripes with the WYSIWYG editors is their static image links). I haven't had a chance to play with Ghost yet, but I'm assuming it works the same as GitHub's comments drag and drop -> markdown? If Editor could do that (and I think it would require the multiple upload field to support it) then that'd be grand.

I'd recommend putting that as a suggestion in the multi upload field issues - I think that would be where the logic would need to be added, rather than to the textarea field.

That said I'm not sure who maintains the multi upload field - there are some outstanding bugs that need to be resolved that haven't had a look in for a few months now :(

What about drag and drop of just the image file name into the text area and use the ninja technique to transform the text into a full blow image using xslt. You could specify a predefined folder that stores all images related to textareas on the server and then assign this folder as a param in the xslt call template that is listening for a p tag containing a string that ends with an image file format.

@michael-e mentioned a way before of using something like the HTMLPanel field to create his own Image library view within an entry... this way custom JS and HTML could be coded to implement the kind of Drag and Drop techniques that are desired.

This would be cool, and I think, it is possible just with some javascript on the backend.

But... I still think Drupal has best image workflow I've ever seen. Take a look : http://youtu.be/71fyvmMhDO4?t=3m40s

@Reygogh I'm not really a fan of that tbh (along with the rest of Drupal!) - it looks pretty clunky to me.

The suggestion you make above is infinitely better IMO. Just drag and drop the image into the textarea where you want it - multi upload field recognises the drop and uploads the file, inserts the MD into the textarea. Can't get much more straight forward than that!

@moonoo2

I think that's a good compromise if the above can't be easily achieved - main issue being that it still requires some careful explanation. It's definitely a good idea though and a marked improvement over anything currently available. Unlike @Reygoch I think it's better than that Drupal example as well, but appreciate that subjectivity will come in to play! Certainly no right or wrong way to do it.

@nathanhornby here's couple of use cases :

1. You are writing text first and inserting images second. It's hard to guess where in the editor images would land when you drag and drop images one at a time. User will probably have to cut and paste code to properly position image in the content.
2. If you have lot's of images, switching to folder from which you drag and drop images is really a time waster.
3. What if you remove image code from content and decide to add it back later? Re-upload again?
4. What if you want to have (like on many news portals) gallery at the end of the article which contains all the images from the article body + some additional images which you didn't want to include directly?

Separate multi upload field with "insert" button solves all of those problems. Because you can :

1. Upload all of your images in one go
2. Insert your image at the cursor position without the fear of letting go of your left click in the wrong place
3. Delete image from the article, and insert it again without re-uploading the image
4. You can generate gallery from the multi upload field if needed

Drupal interface is clunky and not designed well, but I think assigning multy upload filed on the right bar would do a pretty good job.

Drag and drop from the multi upload is good, but insert button is better, because you can position your cursor and insert image without any stress of dropping the image in the browser window and going to the img url, dropping it in the wrong place in the article etc...

I think I'll whip up some JS next week. I'll let you guys know.

@Reygoch

Drag and drop directly into the text area is fast becoming the standard though (Most of our services do it, gmail, github and teamworkpm, pretty much our whole workflow), I just think involving an extra set of elements by default is clunky.

Those use cases stretch a little (positioning has the same issue regardless of drag and drop or insert button, you'll need to route through folders however you're uploading the files, remove an image, should it remove it? of course, the last one is interesting, but very specific)

But there's no reason why both can't work anyway. Allow drag and drop of files directly into the textarea (when multi upload is present) and add an insert link to the multi upload field. Let the user/developer decide on the interaction. Then it just becomes a case of adding a tickbox to the multi upload, 'Display multi upload field in entry editor'.

Everyone's happy!