search

brackets-archive / bracketsIssues

Archive of issues in brackets.
0 stars 0 forks source link

[CLOSED] Adding images #6088

Open core-ai-bot opened 3 years ago

core-ai-bot commented 3 years ago

Issue by rgailstacy Friday Jan 31, 2014 at 02:35 GMT Originally opened as https://github.com/adobe/brackets/issues/6707

Adding images is difficult. Could you make it easy to perform this task?

core-ai-bot commented 3 years ago

Comment by redmunds Friday Jan 31, 2014 at 03:13 GMT

@rgailstacy Thanks for sending in feature requests! Please provide more details on how you would like this to work.

core-ai-bot commented 3 years ago

Comment by le717 Friday Jan 31, 2014 at 15:42 GMT

It sounds to me@rgailstacy is wanting an easier way to add images in HTML rather than having to type out <img width="" height="" src="" /> each time.@redmunds This could possibly be classified as an extension request rather than a core Bracket's feature. I could add an img tag into my HTML Skeleton extension in a few minutes if rgailstacy thought that would do (although I'll probably need to refactor the script for more specific code additions and not the entire HTML document).

core-ai-bot commented 3 years ago

Comment by njx Friday Jan 31, 2014 at 17:24 GMT

It would be cool to be able to drag in an image from the sidebar into an HTML file and have it write out the img tag. (And then also make it so you could drag it into a CSS file and have it write out a url()...)

core-ai-bot commented 3 years ago

Comment by redmunds Friday Jan 31, 2014 at 17:32 GMT

The most tedious part about adding an image for me is manually specifying the height and width attributes, so automating that would be nice.

core-ai-bot commented 3 years ago

Comment by pthiess Friday Jan 31, 2014 at 19:22 GMT

Adding a Move to Backlog label but might be a nice extension idea as@le717 mentioned.

core-ai-bot commented 3 years ago

Comment by le717 Friday Jan 31, 2014 at 19:31 GMT

html-skeleton-newui

Right now it is just a pretty face (it does absolutely nothing and needs some work. I may need to get on IRC or the forum for help with Bracket's API. :wink:), but once I finish this (college work is getting in the way, so it may not be soon), this would probably help sooth other requests like this one. Graphic is an SVG created by@rioforce.

core-ai-bot commented 3 years ago

Comment by peterflynn Friday Jan 31, 2014 at 19:42 GMT

Fyi, the idea of dragging a file onto the editor to insert a reference to it is covered by this user story: https://trello.com/c/WhsrabeV/395-dragging-a-file-to-editor-should-insert-a-file-reference. Feel free to upvote and/or watch the story!

Closing since this is already tracked there -- but feel free to continue the conversation about the 'HTML Skeleton' extension too, if that's of interest!

@redmunds I guess another way to pursue this would be to make the src code hinting automatically insert width/height when you choose a completion suggestion. Though that's a bit tricky since there's an async delay to find out the image dimensions, during which the user could keep typing other stuff...

core-ai-bot commented 3 years ago

Comment by le717 Saturday Feb 01, 2014 at 20:48 GMT

Just wanted to say I've been working on the extension some more. After@njx figured out why it broke (and again, thank you for your help), I've slowly been writing the JavaScript to support it.

html-skeleton-2-1-14

While visually it may not look too much different, the star of that image is the image checkbox and number fields. Because this issue is about an easier way to add images, I found it appropriate to start there. Upon extension loading, the values of the fields are both 0. Checking the box and typing your values (in the image, 200 x 200) obviously uses the new values. Upon opening a second time, the box will be unchecked again (there are no default options), but those previous values are restored. This makes adding multiple images of the same or nearly the same size easier, even you only change one value. If you close it without checking the box, the values are rest back to 0. In addition, 0 is never automatically displayed in the fields. If it is 0, the Width and Height placeholder text is displayed.

I am trying to follow the UI guidelines, so if you see any issues (except for the typos in the introduction sentence whistles), please let me know. I am not the best at wording dialog messages, so even they can be tweaked. :wink:

core-ai-bot commented 3 years ago

Comment by le717 Sunday Feb 09, 2014 at 02:26 GMT

@njx@redmunds@rgailstacy Oki-doki! Finished the rewrite.

Already posted on the registry. Let me know if you see anything I can improve or if there are any UI guidelines violations.

core-ai-bot commented 3 years ago

Comment by redmunds Monday Feb 10, 2014 at 16:55 GMT

@le717 I installed your extension. Here are some comments:

Uncaught TypeError: Object #<Object> has no method 'batchOperation' main.js:101

You're calling batchOperation() on the Document module:

                Document.batchOperation(function() {

But it should be called on a document instance

                editor.document.batchOperation(function() {
core-ai-bot commented 3 years ago

Comment by le717 Monday Feb 10, 2014 at 17:14 GMT

@redmunds

  1. Thanks, corrected in https://github.com/le717/brackets-html-skeleton/commit/9c45bf5033914e21c396d50213c391428a483f6b. I remember reading about \u2026 in the UI guidelines, but I don't know how I missed adding it...
  2. I'll see what I can do. I don't suppose Brackets has a public API for getting the dimensions? I know the image preview states them, but I am not sure if extensions can utilize that.
  3. I literally was looking at that (thanks to le717/brackets-html-skeleton#3) when your message landed in my inbox. Thanks! Also fixed in above commit.
core-ai-bot commented 3 years ago

Comment by redmunds Monday Feb 10, 2014 at 20:23 GMT

@le717 For the image width and height, take a look in render() function in src/editor/ImageViewer.js. It looks like the "load" event for images has naturalWidth and naturalHeight properties. You could try loading image in a hidden element, but if you're going to load it, then you might as well display it in your dialog.

core-ai-bot commented 3 years ago

Comment by ApeNootje Wednesday Dec 14, 2016 at 11:46 GMT

you can also use example

btw I use brackets

core-ai-bot commented 3 years ago

Comment by judasgutenberg Friday Jun 07, 2019 at 13:16 GMT

i'm still using an 18 year old copy of Macromedia Homesite+ to edit HTML documents because for some reason nobody since then has been able to implement drag + drop image tags on a responsive text editor (none of the Electron-based text editors are responsive enough for me -- i never want to wait even a millisecond for a typed character to appear on a screen!)