Sublime Forum

Plugin to hlep with img tags in HTML

#25

apparently not. i tried changing to:

if 'img' in view.substr(view.line(sel)) and path.endswith(('.png"','.jpg"','.jpeg"','.gif"'))

and it still doesn’t write those attributes.

i guess it just looks like the custom post-completion callback isn’t running. i stuck a print command in the run function of Class AfnCommitCompCommand and it never prints to the console.

i’m on mac, ST2 2194

0 Likes

#26

Don’t worry. I see the problem. I’ll push a fix in a bit.

0 Likes

#27

Just pushed a much improved update that dynamically changes the width and height elements if they’re present. Let me know if it works this time. Thanks.

0 Likes

#28

[quote=“skube”]
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.

Using: ST2 2181, OS X Lion[/quote]

Could you describe what happens when you have an empty string and type ‘/’? Does it show the root of your disk or the root of your project? If there are no folders added to Sublime, it should show the root of your disk. Also, the custom root has to be an absolute path. Could you be more specific about what’s happening and what you would expect? Thanks.

0 Likes

#29

still no height and width attributes for me.

0 Likes

#30

Really? Anything in the console?

0 Likes

#31

OH!!! Just reallized why its not working for you. Silly me. You’ll have to add this to your user keybindings: [code] { “keys”: “tab”], “command”: “run_macro_file”, “args”: {“file”: “Packages/AutoFileName/commit-and-trim.sublime-macro”}, “context”:

{ “key”: “setting.auto_complete_commit_on_tab” },
{ “operand”: true, “operator”: “equal”, “match_all”: true, “key”: “afn_commit-n-trim” }
]
},
{ “keys”: “enter”], “command”: “run_macro_file”, “args”: {“file”: “Packages/AutoFileName/commit-and-trim.sublime-macro”}, “context”:

 { "key": "setting.auto_complete_commit_on_tab", "operator": "equal", "operand": false },
 { "operand": true, "operator": "equal", "match_all": true, "key": "afn_commit-n-trim" }

]
}[/code]

0 Likes

#32

aha, so that’s how you made the “callback” magic work.

excellent. working now.

one more request on this: can you put the dimension values inside double-qotes so they match the HTML spec? the tag would look like this:

<img src="/img/banner.png" height="44" width="420" alt="">

instead of this:

<img src="/img/banner.png" height=44 width=420 alt="">

thanks so much for all your work on this – this is one thing that i have really missed in ST2 (from espresso and textmate) when writing html code.

0 Likes

#33

My bad. Just pushed a fix. Been a while since I’ve written any HTML…

0 Likes

#34

If there are no outstanding bugs, I’ll move this to the main branch. @skube: let me know if you’re still having problems.

I’d also like someone using Windows to test it. Usually causes some problems when working with paths.

0 Likes

#35

working perfectly for me now on os x.

thanks again for a really useful plugin.

0 Likes

#36

Wow, good work everyone. Unfortunately I don’t visit the forum enough to have actually kept up to date on this matter, but I’m so glad the community’s taken the idea on!

This looks promising. I’m currently awaiting the code to be merged into master so I can use Package Manager so test the functionality but it looks like it’s going to be about right. It’s a shame there’s no scope specifically for src-attribute-in-img-tag (I’m aware this could almost certainly be added to the tmLanguage definition, but would rather not use anything custom other than a plugin) and that we have to rely on completions that start with a slash in an HTML double quoted string, but hey. In fact because all our images go in a directory called ‘images’ and we use properly relative links (not site-relative) then I can presumably change the AutoFileName completion key to “i” rather than “/”. Is there a nice to way to make it recurse into directories without having to accept the completion and then re-autocomplete? As I said, all our images are in “images/”, so I’d like it to be able to find anything in there and allow Sublime’s fuzzy matching to do its work on that. Is there a setting or anything to allow it to return all files for this case?

My guess is that the plugin is not supposed to be used just for img tag src attributes, hence not being able to satisfy my specific requirements without ruining the other functionality of the plugin. For instance, I’d be happy if it just returned all *.png, *.jpg and *.gif files under the project root (or even a specific directory under project root (images)) but that’d gimp the plugin for other types of file inclusion, presumably? Maybe there could be a specific auto-completion command for being inside an img tag that can use this functionality, paired with some settings for other peoples’ specific needs. I’m certainly no Python developer but I’ll try to have a look into messing around with the plugin to so something like this. Like I said, I’d rather not mess with the tmLanguage file, as clean as that would be for knowing when I’m in an img tag and src attribute, so it’ll probably have to do some searching, or maybe the keybinding can do what’s required.

0 Likes

#37

What OS are you using? If you’re on windows, would you be willing to test the beta branch? I’m not going to merge to the master branch until is tested a little more thoroughly, especially because windows always has trouble with paths.

This is no longer an issue. In the latest version, I made some pretty big changes to how paths are found. Now you can even have an empty string and AutoFileName will activate.

This has also changed in the latest version. Now when you insert a folder, it will not insert the slash. So pressing a slash again will trigger the autocomplete.

With the new path handling, AutoFileName has support for wildcards. So it you type in |.png with | as your cursor, and trigger the autocomplete, it will only display pngs.

Let me know if that suits your needs. I’m playing on changing a few things later, so somethings are subject to change. That’s why I have it in the beta branch, so people aren’t confused as to why I keep changing everything :smile:

0 Likes

#38

Hmm… I must be doing something wrong because I can’t get it to work. I grabbed the latest beta and now when I try to select an image it I get an error: unable to open commit-and-trim.sublime-macro. However I only get this error when I use the keyboard to select an image. When I directly select the image with the mouse pointer I get no image. In both cases I don’t get dimensions (either in the popup or in the output). No other errors in the console.

Weird, since it was working.

edit: Ok, I knew why I got the error. I forgot I installed in AutoFileNameBeta directory and forgot to update the path in user keybindings. However, it still is not giving the dimensions.

0 Likes

#39

@skube, what OS are you on?

0 Likes

#40

OSX Lion

0 Likes

#41

when you say “no dimensions,” do you mean it doesn’t insert ‘width and height’ attributes in the img tag? Do the height and width appear next to images in the autocomplete popup?

0 Likes

#42

Neither. Nothing in the popup, and no attributes.

0 Likes

#43

hmm… not sure what the problem could be. It might help if you gave me more info. Could you send me a basic snippet of code you’re using it with?

Also, could you humor me by re-downloading the beta branch, making the branch is set to ‘beta’ in git (this has caused some problems in the past. When you download a branch from github, it could still be set to master.) You mentioned having AutoFileNameBeta as the folder. Do you still have AutoFileName (master) installed? Make sure that’s not installed too. Also, I don’t think its a problem but it might help, could you disable ZenCoding?

If there are no errors in the console, I’m not really sure what the problem is. Sorry.

0 Likes

#44

Yeah, it’s weird cause it was working (aside from writing out the attributes). This is what I did:

  • re-grabbed beta from Github (461b5dc),
  • removed ZenCoding,
  • updated autofilename.sublime-settings: “afn_proj_root”: “/Users/skube/Desktop”
  • made sure the User keybindings had the code you posted earlier
  • restarted ST2
  • created an HTML file as listed below and saved to the desktop
  • within the IMG tag typed “/” then Ctrl+Spacebar

[code]

<img src="/">
[/code]

The result:

  • the popup takes me to OS root (not the expected Desktop)
  • even after navigating to Desktop, the image file doesn’t show dimensions

In any case, thanks for all the work, perhaps it’s something silly and will be fine after you merge branches.

0 Likes