Vim image placement

Question

Over the past few days, I have been forcing myself to switch from Textmate to Vim. for the most part, my efficiency is almost the same as some heavy Vim configurations. one aspect of my workflow. I did not find a replacement for dragging files into Textmate, where the images will be converted to img tags and the files will be converted to call requests.

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

Answer 1

I’ve been thinking about this automatic <img> building since switching.

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

If you start typing a string like "path", for example, <img src="images/ - press <Cx><Cf> for a short list of possible terminations. In combination with an automatic termination plugin such as ACP and snipMate, the process is very fast.

But this does not help at all for width and height .

A possible solution would be to use snipMate for the <img> fragment, use <Cx><Cf> for the path to the image, grab the path and pass it to some command line utility, fill in the width and height attributes of its output.

EDIT

It turns out that others have already learned a similar path, this script is interesting, but it does not work properly with file paths containing spaces. Here is a slightly modified version that works quite well. This other option seems very cool, but it lacks an important part.

End edit

OTHER IMAGE

I added this snippet to ~/.vim/bundle/snipMate/snippets/html.snippets (note the indentation to $ <Tab> ):

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

which works well, but adds HTML_insertImg() output with 0 as follows:

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

This 0 is a bit of a problem. The system is obviously not perfect, but as soon as I get rid of this grunt 0 , it will fit nicely into the rest of my snipMate based process.

By the way, here is the second modified version of the script used.

END OF OTHER CHANGE

EXTENDED 12 "RE-EDIT VERSION

FROM

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

You can:

• open NERDTree, select an image and press b to have an almost complete <img src="imagename.jpg" width="128" height="256" alt="" /> inserted at the cursor position in the previous window
• or, if your Vim flavor allows this, enter :IMG<CR> to open the custom file selection dialog box, select an image and have an almost complete tag <img src="imagename.jpg" width="128" height="256" alt="" /> inserted at the cursor position in the current window
• or, if you are in the terminal, type :IMG path/to/file.jpg to have an almost complete tag <img src="imagename.jpg" width="128" height="256" alt="" /> , inserted at cursor position in current window

The snipMate solution is not really baked right now.

Thanks to Peter Mach and @Matteo Riva for virtually most of the work.

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

END EXTENDED 12 "RE-EDIT VERSION