Sublime Forum

Plugin to hlep with img tags in HTML

#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

#21

Are you using the beta branch? If so, those are options in the sublime-settings file.

It should use the root of the current project now. Is that not the case? Or are you looking for something else? Also, changing “afn_proj_root” allows for a custom root.

0 Likes

#22

nice work. i just pulled the beta [6b6ffda] and i can see the image dimensions in the auto-complete popup.

now all we need is for the height/width attributes of the tag to be written/updated and this will truly rock.

EDIT: in other words… that part isn’t working for me.

0 Likes

#23

Ah ok, I didn’t see that. I did enter a custom root, keeping auto_file_name_use_project_root to true, but it still doesn’t seem to work, even when I define a Project.

Also, like pjv, I see the dimensions, they just aren’t written.

Using: ST2 2181, OS X Lion

0 Likes

#24

more info: when i do the completion, nothing happens. and nothing in the console either. my test is a simple .html file and i am just entering a vanilla img tag and auto-completing with a .png image. i see the dimensions in the popup, so the problem is confined to what happens after i do the completion.

looking through your code in the AfnCommitCompCommand Class and typing bits and pieces into the console with the cursor inside the img tag after doing the completion, path = u'"/Volumes/hd/Users/paul/development/projects/belligerent act.org/site/img/ba-banner8.png"' could it be that path is ending in .png" rather than just .png that is making it not fire the append?

0 Likes