Sublime Forum

Plugin to hlep with img tags in HTML

#1

I’ve just converted a designer from Dreamweaver to ST2 (my plan is to have everyone in the office on ST2) and after seeing the autocomplete for CSS and HTML on my computer he felt he was prepared to switch over. However, he’s just realised that ST2 doesn’t have the convenient functionality that Dreamweaver did. In case you don’t know, Dreamweaver will autocomplete the ‘src’ attribute from the current file path, and also on confirmation of the autocomplete with fill in the ‘width’ and ‘height’ attributes too.

Presumably, making a plugin to produce an autocomplete dropdown for src=" trigger (maybe there’s even a scope for this, but doubtful) wouldn’t be too difficult for a decent plugin writer, and could even use the fuzzy search built into ST2, but what about getting an image’s width and height and inserting those into the page on confirmation of the autocomplete? Is this difficult or not possible?

Obviously if anyone fancies writing such a plugin we’d be grateful, but really I just care about how likely it is to be possible right now, and I could maybe have a go at writing my own (although my Python and knowledge of the ST2 API is very limited).

0 Likes

#2

My AutoFileName plugin should do the first part. It lets you navigate the file structure to insert a filename. If you give me some time, I try adding the width and height features into the plugin (though I don’t know how easy this would be, especially cross-platform).

0 Likes

#3

Although the main problem with AutoFileName for me is that it is useless when using absolute paths.

0 Likes

#4

If you’re having a problem with the plugin, could you please file a bug report? There’s no way for me to know if people are having issues if no one reports any problems. AutoFileName should work for absolute paths just fine. If it’s not working for you could you please give me some more info? Platform? Errors in Console (Control + `)? Sample file you’re trying to use it with?

Thanks.

0 Likes

#5

I’m not sure how to file a bug report, but in any case, it probably isn’t a bug. There are no errors in the console.

For my setup, I run a local webserver in which the absolute root of my webserver is not necessarily the root of my computer. AutoFileName seems to pickup the root of my computer and there appears to be no way to override that.

I’m using:

  • ST2 2181
  • Windows 7
0 Likes

#6

Oh okay. Now I understand. Someone else already requested this and its on my todo list. I’ll get started on it as soon as I get a change. Thanks for the explanation though.

0 Likes

#7

[quote=“skube”]I’m not sure how to file a bug report, but in any case, it probably isn’t a bug. There are no errors in the console.

For my setup, I run a local webserver in which the absolute root of my webserver is not necessarily the root of my computer. AutoFileName seems to pickup the root of my computer and there appears to be no way to override that.

I’m using:

  • ST2 2181
  • Windows 7[/quote]

hi, “someone else” here.

while C0D312 is working on the proper solution to this “absolute path” issue, i hacked his plugin to give me behavior that works for me and i think will work for you. i found that all i needed to do was to add a couple lines to the code in the plugin.

NOTE: the first two lines below are C0D312’s code and the second two lines are what i added directly afterwards.

        if cur_path.startswith(("'","\"","(")):
            cur_path = cur_path[1:-1]
        if cur_path.startswith("/"):
            cur_path = "." + cur_path

you can see my conversation with C0D312 about this issue here.

0 Likes

#8

BBEdit does this too, it’s very helpful. Would be awesome to have this in ST2.

0 Likes

#9

[quote=“handycam”]

BBEdit does this too, it’s very helpful. Would be awesome to have this in ST2.[/quote]

i’m playing with writing a plugin for this. if i have success will report back. i could do it for os x only using a command line call to get the image dimensions, but i would like to see first if i can make a cross-platform plugin that everyone can use. in order to do this, as far as i can tell, the package will need to embed the python Image module and i’m not sure how (yet) to go about packaging up a module like that such that it will work for everyone. i’m exploring.

0 Likes

#10

i just made a nice discovery. the zen coding plugin already has the ability to update the height and width attributes of img tags for .png, .gif, and .jpg images (and he does it without embedding the python image module). all you have to do is have the cursor inside the img tag and trigger an action. the key sequence is platform dependent and i don’t know the others, but on the mac it’s ctrl-alt-shift-m.

err… looking at the zen coding code, it is deep. and really nicely written. i think it would be too difficult to try to extract the image size functionality and put it into C0D312’s plugin because bits and pieces of the functionality are scattered through many functions and modules in zen coding. it might be nice for C0D312 to see if zen coding is available and if so, to auto-trigger the update size action from it if such inter-plugin communication is possible.

0 Likes

#11

[quote=“pjv”]i just made a nice discovery. the zen coding plugin already has the ability to update the height and width attributes of img tags for .png, .gif, and .jpg images (and he does it without embedding the python image module). all you have to do is have the cursor inside the img tag and trigger an action. the key sequence is platform dependent and i don’t know the others, but on the mac it’s ctrl-alt-shift-m.

err… looking at the zen coding code, it is deep. and really nicely written. i think it would be too difficult to try to extract the image size functionality and put it into C0D312’s plugin because bits and pieces of the functionality are scattered through many functions and modules in zen coding. it might be nice for C0D312 to see if zen coding is available and if so, to auto-trigger the update size action from it if such inter-plugin communication is possible.[/quote]

Nice find, didn’t know that.
Actually the code is a very simple parser located in:

\Sublime Text 2\Packages\ZenCoding\zencoding\utils.py: def get_image_size(stream)
You could probably cut and paste it wherever you want, or directly use it from zencoding:

from zencoding.utils import get_image_size
0 Likes

#12

yeah, but what’s a “stream”? then you go further down the rabbit hole when you go looking for zen_file.read() and then you start looking at all the excellent code in zen that has to do with identifying when you are in the img tag and how to create / update the height and width attributes, …and then… at least if you’re me (yes, lazy), you conclude that it might be easier to try to just call the zen coding update_image_size action than try to extract all the relevant code or call the bits and pieces of it from within AutoFileName.

but when i started going down that path, i found that there seems to be no call-back or event listener that lets you know when a completion has been inserted into the document, so that path is probably moot, and we’re back to trying to extract all the bits and pieces from zen coding. which, you’re right i guess, might not be so bad… zen_file.read is just a simple python file.read()

0 Likes

#13

I just updated AutoFileName. I didn’t add support for image dimensions (hopefully @castles_made_of_sand will update zencoding soon). However, I didn’t make a lot of big changes. I put the changes into a beta branch because there are a few things that could cause issues and I don’t want to be help responsible. Please, test the beta branch and tell me what you think.

0 Likes

#14

working great for me as far as the absolute paths issue goes. thanks for this fix. i noticed a problem with support for .less files as i mentioned in an issue in your repo, but i think it is likely that problem is actually in the sublime-LESS package.

in a fork of AutoFileName, i tottered a few steps down the path toward support for image size. i have working code for determining whether the ZenCoding package is installed or not and a conceptual outline for how to leverage ZenCoding’s functions to get the height and width of .png, .gif, and .jpg files. but i stalled when i realized the complexity of how it would have to work.

since there is [currently] no way to get a callback or event notification for when a completion occurs, you would have to compile the whole tag up front when you are creating the list of completions. that means parsing the tag and all its present attributes and constructing a new version of it for each potential completion (for completions that are image files). i found some code in the ST2 html package in html_completions.py that gives some hints on how this might be done, but i don’t have time right now to press further on this.

0 Likes

#15

If you look at the source of my plugin, I built my own custom callback for competions. SAY WHAT!?! The plugin uses a combination of macros, keybindings, and on_query_context to intercept completions and call my own custom textCommand on completion (MAGIC!). From there I can just hook a call to the get_image_size form zen. The problem isn’t the integration with the plugin. I can do that just fine. The problem: I can’t get get_image_size to work. Feeding it a path just causes a bunch of errors. So if you can get that to do anything, let me know. If not, I’ll just yell at @castles until he fixes it :smile:

0 Likes

#16

[quote=“C0D312”]

If you look at the source of my plugin, I built my own custom callback for competions. SAY WHAT!?! The plugin uses a combination of macros, keybindings, and on_query_context to intercept completions and call my own custom textCommand on completion (MAGIC!). From there I can just hook a call to the get_image_size form zen. The problem isn’t the integration with the plugin. I can do that just fine. The problem: I can’t get get_image_size to work. Feeding it a path just causes a bunch of errors. So if you can get that to do anything, let me know. If not, I’ll just yell at @castles until he fixes it :smile:[/quote]

i didn’t look but i think i might know what the problem is – get_image_size doesn’t want a path – it wants the byte stream of the file. so instead of sending it the path, do a python file.read() and send get_image_size the output. tell me if you don’t get what i’m saying or if it doesn’t work and i’ll play with it.

0 Likes

#17

Silly me. I got it working :smiley:

Now I just need to add everything together.

0 Likes

#18

[quote=“C0D312”]Silly me. I got it working :smiley:

Now I just need to add everything together.[/quote]

BTW. This got me thinking. Perhaps Will Bond should consider adding a way to list dependencies in Package Control. While I’ll probably just taking the get_image_size out of zen and putting it in a separate folder, if more developers start wanting to build off one another, it would be awesome to have something a way to do so. It could work kind of like Cydia for jailbroken iPhones; when downloading a plugin, it would say: this plugin requires x and y, install those too?

0 Likes

#19

Just added image dimensions to the beta branch of AutoFileName. I’d like some feedback before I add it to the main branch though. Thanks.

0 Likes

#20

It’s nice to be able to see the image dimensions in the popup. I still don’t see the absolute path working as I require. Ideally, one should be able to define any directory as root.

0 Likes