Jump to content
Mark
 Share


IPS 4.0: Editor - Part 2: Uploads

Introduction

In the last blog entry I introduced some of the features in the post editor in IPS Social Suite 4.0. In this blog entry I'd like to show you the uploading features in the editor.


Using the "Image" and "Attachment" dialogs

Along the bottom of the editor there are two buttons that deal with uploading files: image and attachments. Both present a dialog which looks like this:

We decided to keep both an images and an attachments dialog as users wanting to insert an image will naturally look for the "Image" button - if however, you upload an image to the attachments dialog, it will work completely as expected.

The upload panel here is based on HTML5 which supports drag and drop uploading, if your browser doesn't support this, it will use Flash, Silverlight or Google Gears if you have any of those installed, and if not it will fallback to a HTML4 & JavaScript implementation (none of these support drag and drop, but instead you click the "Choose Files" button just as you do now - the label in the box will change to reflect this).

Uploaded files then show below the box (images will get a preview), and you can click on any to add them into the editor, or click the "Insert All" button. When you insert an attachment into the editor, it displays either the image if it's an image, or a link if it's anything else, just as it will actually appear in the post (rather than the current "[attach=XXX]" tag).

You can also of course delete the attachment, which will automatically remove it from the editor if you've already inserted it.

Video Demonstration


Quick drag-and-drop

In addition to interacting with the panels, if you're using a supported browser, you can drag and drop straight into the editor. It will automatically figure out whether the uploaded file(s) are images or other files and add them to the appropriate panel automatically.

Video Demonstration


Image URLs

In the image panel, there is an additional "From URL" tab which allows you to insert an image from a URL, as you type the URL a preview is shown, and you can optionally link to the image.

Video Demonstration


My Files

In IP.Board currently, there is a "My Media" button which allows you to insert content submitted either in other posts or elsewhere in the community (images in IP.Gallery or files in IP.Downloads for example) into the editor. In 4.0, this feature is found in the images and attachments dialogs.

Just with normal attachments, the content is inserted as it will be shown rather than the current "[sharedmedia=XXX]" tag.


Conclusion

Please let us know what you think of the uploading features in the comments. Remember though that we're only half way through our series on the 4.0 editor. In my next blog entry I'll be talking about customising the editor and the place of BBCode.

 Share

Comments

Recommended Comments



Any reason for having big dialogs instead of making them smaller... I see that most of the space is unused per see.. (well if you are uploading a lot of images/files it could expand)

Link to comment
Share on other sites

  • Management

I don't use attachments, will the image insert still exist?

Image URLs
 
In the image panel, there is an additional "From URL" tab which allows you to insert an image from a URL, as you type the URL a preview is shown, and you can optionally link to the image.
 
Video Demonstration

Link to comment
Share on other sites

  • Management

Any reason for having big dialogs instead of making them smaller... I see that most of the space is unused per see.. (well if you are uploading a lot of images/files it could expand)

Styling is not yet finalized in 4.0 :)

Link to comment
Share on other sites

How will you handle large images etc. ? 

 

One of the things that annoys me personally with WYSIWYG is that some posts can be really hard to "manage" because all the styling takes the place. When you have multiple large images, text in between etc. it gets impossible to edit the post in a efficient manner. 

 

That is why I prefer to use the bbcode mode a lot, because it's a lot easier to manage and get an overview of the post when images, code boxes, media items, quote boxes doesn't use so much space. 

 

Could you touch on this concern in a comment or future blog entry please? :smile:

Link to comment
Share on other sites

Image URLs
 
In the image panel, there is an additional "From URL" tab which allows you to insert an image from a URL, as you type the URL a preview is shown, and you can optionally link to the image.
 
Video Demonstration


Convoluted process. Please keep the one-touch "Image button".
Link to comment
Share on other sites

  • Management

Convoluted process. Please keep the one-touch "Image button".

I am confused. It's the same process as now... you click a button, paste in a URL, click submit. How is that convoluted or really any different?

Link to comment
Share on other sites

Convoluted process. Please keep the one-touch "Image button".

 

You haven't used it yet, so I think you're judging a bit prematurely. :)  For instance, if you don't allow attachments it's logical to assume that you click the image button, the modal opens on the "from URL" link, and it works almost identically to how the 3.4 editor works now (clicking the image button opens allowing you to insert a URL).

Link to comment
Share on other sites

Looks good. Especially as it will auto fall back to legacy methods (ie flash etc) if it cannot use HTML5. :smile:

 

Can't wait to test it. Pity I can't grab that IPS4.zip from your video :turned: j/k

 

The editor looks a bit odd seeing its toolbar in mono though (I realise this is the ACP and its probably not been skinned so not a concern really.

Link to comment
Share on other sites

Looks good. Especially as it will auto fall back to legacy methods (ie flash etc) if it cannot use HTML5. :smile:

 

Can't wait to test it. Pity I can't grab that IPS4.zip from your video :turned: j/k

 

The editor looks a bit odd seeing its toolbar in mono though (I realise this is the ACP and its probably not been skinned so not a concern really.

 

 

Yeah, it'll look more appropriate when you see what everything else looks like :)

 

I'm more concerned that I've never heard of Google Gears :tongue:

 

It was Google's attempt to make stuff on the web work well before Google Chrome and has been discontinued, but the library we're using for uploads still supports it, just in case you have it installed, because it still works of course.

Link to comment
Share on other sites

  • Management

Yes I would not get too frantics about the look at this point. For example Mark's videos are not showing the new ACP design plus there are more entries to come that will talk about design features :)

Link to comment
Share on other sites




Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...