Needed: Sublime Text 2,
Zen Coding Emmet plugin
One complaint that’s come up regarding Sublime Text is its lack of image-handling features. Some other programs allow you to drag and drop images into a document, and img tags are created with the src and size attributes set automatically. Sublime Text does not have this feature. Bummer.
Here’s a solution, which, though not as easy and fast as dragging-and-dropping, is much quicker than typing out all the image tags.
This method assumes all the images needed are in the same folder.
- Select all the images in the Finder, take note of the number of images selected, and copy via command+C.
- In Sublime, type img*n (n being the number of images), hit tab. This will create all the img tags necessary.
- Select all the lines either with your mouse or using command+L.
- Hit command+shift+L to place cursors on every line.
- Set the cursor in the src attribute (using arrows and alt+arrows), type the folder path (i.e. img/ or whatever), then paste in the copied images. The image names will be inserted.
- Now hit control+alt+shift+m, and the image size attributes will be inserted. (This won’t work unless the src attribute is accurate.)
Using this method, it takes about 30 seconds to insert any number of img tags with their size attributes.
This is obviously more time consuming than dragging and dropping, but much quicker than typing out every img tag.