vim image placement

Question

For the last few days I've been forcing myself to switch from Textmate to Vim. for the most part, my efficiency is pretty much the same after some heavy Vim configuration. one aspect of my workflow I haven't found a replacement for is the drag and drop of files into Textmate, where images would be transformed into img tags and files would be transformed into require calls.

How can I dynamically build an image tag, and an include/require statement?

Answer 1

I've been thinking about that automatic <img> building since switching.

Vim has a built-in solution for one part of the problem: the omni-completion engine allows you to complete the path of a file you want to include.

If you begin to type a "path-like" string — say <img src="images/ — hit <C-x><C-f> for a little list of possible completions. Coupled with an auto-completion plugin like ACP, and snipMate the process is really fast.

But it doesn't help at all for width and height.

A possible solution would be to use snipMate for the <img> snippet, use <C-x><C-f> for the image's path, capture the path and feed it to some command line utility, fill the width and height attributes with its output.

EDIT

It turns out others have already explored a similar road, this script is interesting but it doesn't work properly with file paths containing spaces. Here is a slightly modified version that works reasonably well. This other one seems to be very cool but it's missing a crucial piece.

END EDIT

ANOTHER EDIT

I've added this snippet to ~/.vim/bundle/snipMate/snippets/html.snippets (attention the indent before $ is a <Tab>):

snippet img custom
  ${1:`HTML_insertImg()`}

which works well but prepends the output of HTML_insertImg() with a 0 like this:

0<img src="future_timeline.png" width="612" height="6370" alt="" />

This 0 is a bit of a problem though. The system is obviously not perfect but once I'll get rid of this nagging 0 it's going to fit rather nicely within the rest of my snipMate-based process.

By the way here is a second modified version of the script I use.

END ANOTHER EDIT

EXTENDED 12" RE-EDIT VERSION

With:

• ImageMagick's identify
• HTML_insert.vim in ~/.vim/plugins/
• insert_image.vim in ~/.vim/nerdtree_plugin

you can:

• open NERDTree, select an image and hit b to have an almost complete <img src="imagename.jpg" width="128" height="256" alt="" /> tag pasted at the cursor's position in the previous window
• or, if your Vim flavour allows it, type :IMG<CR> to open a native file selection dialog, chose an image and have an almost complete <img src="imagename.jpg" width="128" height="256" alt="" /> tag pasted at the cursor's position in the current window
• or, if you are in a terminal, type :IMG path/to/file.jpg to have an almost complete <img src="imagename.jpg" width="128" height="256" alt="" /> tag pasted at the cursor's position in the current window

The snipMate solution is not really baked right now.

Thanks to Petr Mach and @Matteo Riva for actually doing most of the work.

And yes, I'm obviously not a Vim expert.

END EXTENDED 12" RE-EDIT VERSION