How to Automatically Determine Dimensions of Image in HTML Follow

Created September 15, 2011 14:01

I moved from another IDE to PhpStorm for my PHP/HTML/CSS development. There is a cool feature in that other IDE where you can drag an image from the file explorer into the code and it would generate the `<img>` tag with the appropriate width and height dimensions. Is there a way to do something similar in the PhpStorm IDE?

2 comments

Jeff Behnke

Created September 15, 2011 19:13

phpStorm does have autocomplete if your path are correct.

NOTE: Ctrl + Space and the tab key are your friends!

p{Hit tab}
<p>img{Hit tab}</p>
<p><img src="{cursor is here}" alt=""></p>

For me I have a path of ./images/

<p><img src="images/{Ctrl+Space}" alt=""></p>

Lists my images at that path. Just like code completion.

<p><img src="images/my_test.png" height="{Ctrl+Space}" width="{Ctrl+Space}" alt=""></p>

The control + space fills in the height and width attributes.

So while I know its not what your looking for, I thought I would point it out just incase you didn't know about it.

Once you get use to it, you can type them in faster than grabbing the mouse to drag and drop.

Another thing I did was change the Zen Coding template for img
SETTING > LIVE Templates > Zen HTML > img > Edit
Change it to

<img src="$VAR0$" height="$VAR1$" width="$VAR2$" alt="$VAR3$" />

This will give you the height and width attribes when using img{Tab}

Lex Fridman

Created September 15, 2011 21:46

Brilliant, thanks. I did both the tab for a live template and the ctrl-space but didn't think that ctrl-space would ever work for width and height. Very cool.

Please sign in to leave a comment.