Wikia

Vim Tips Wiki

Insert image size into html tag

Talk0
1,613pages on
this wiki

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

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()
  g/src
  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')");
EOF
  normal $
  normal "ap
endfunction
nnoremap <F4> :call PerlImageSize()<CR>

CommentsEdit

 TO DO 

  • 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)

Around Wikia's network

Random Wiki