Vim Tips Wiki

Insert image size into html tag

Redirected from Insert image size with vim (when coding html)

1,624pages on
this wiki
Add New Page
Talk0 Share
Tip 1664 Printable Monobook Previous Next

created 2010 · complexity basic · author Rvco · version 7.0

When editing HTML documents containing images, you need to find out both the width and the length of each image and then feed every <img> tag. Just use perl by adding what follows into your vimrc file. When you hit F4, vim will get the image name and path mentioned in the "src" field of the <img> tag and will use perl to do this job for you.

Copy and insert image size into html code by pressing a keyEdit

First step is to make sure you have Perl installed and the Perl module Image::Size. Then all you need is to add this to your vimrc.

" Get image size with F4 with perl Image::Size module.
function! PerlImageSize()
  normal $
  normal N
  normal 2w
  perl << EOF
  use Image::Size;
  $jo = VIM::Eval("expand('<cfile>')");
  $size = Image::Size::html_imgsize("$jo");
  VIM::Eval("setreg('a', '$size')");
  normal $
  normal "ap
nnoremap <F4> :call PerlImageSize()<CR>



  • Another mysterious tip. What image? What does it do? What is the $ N 2w stuff?
  • An example is needed because clearly the author has something in mind, and there is no need to perplex each reader of the tip.
  • What is the g/src?
  • The consecutive lines using normal can be combined to one.
  • Check that the standard indenting I applied to the function does not break the Perl code.

JohnBeckett aka JohnBot 08:21, September 20, 2010 (UTC)

I think it's any image included in html with an <img> tag. But the tip obviously assumes some things about what has already been entered into the text and the formatting. These assumptions should be eliminated or documented. --Fritzophrenic 20:34, May 31, 2011 (UTC)

Ad blocker interference detected!

Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.