Insert media into page popup modal incl. add by URL

[Paul Clarke]

This is just a heads up that we are planning on some UI changes to the insert media modal, we've already made a start on the thumbnail view but some of you might be interested in seeing the wireframes which have been created. Unfortunately they are not complete designs so you will have to use your imagination in some aspects. Folders are presented before the thumbnails, although newly added files will proceed everything until they are sorted. You can checkout a quick little interactive wireframe for "Insert media from URL" here https://invis.io/RC4LD4J9B

We have gone through a few variations to get to this stage but think this will be a good start for the modal. Your welcome to comment on the screens if you have any feedback in the case we need to make further adjustments.

Cheers

[Paul Clarke]

FYI clicking on the page anywhere shows hotspots which are clickable - the "insert from URL" link is clickable.

[Shea Dawson]

One change that I would like to see with the insert media modal and the upload field's choose existing file modal is an increase in it's size. I've got 1920x1080px to play with on screen but I find myself scanning through hundreds or thousands of files in a little popup window that can only fit a very limited number of files in view. Or maybe it could be resizable so users can give themselves more browsing space if that's what they need.  

Other things I would hope for would be a solid search existing files component and the ability for the user to drag and drop a file from their computer directly onto a folder. 

New interface design looks great. Would love to see this applied to the assets admin area as well :D

[Paul Clarke]

Yup good idea making the modal larger/resizable, making it larger is something we've been considering as well. At some stage it would be good to allow users to change the size of the thumbnails so that the user can decide on the most appropriate size. I didn't include the search in these but it will go to the left of the view toggle (top right corner). And finally yes this style is being applied to the asset admin area as well, its finally getting a bit of UI attention.

[Dan Rye]

Is this for 4.0?

—
Sent from Mailbox

On Mon, Oct 19, 2015 at 5:03 PM, Paul Clarke <pa...@silverstripe.com> wrote:

Yup good idea making the modal larger/resizable, making it larger is something we've been considering as well. At some stage it would be good to allow users to change the size of the thumbnails so that the user can decide on the most appropriate size. I didn't include the search in these but it will go to the left of the view toggle (top right corner). And finally yes this style is being applied to the asset admin area as well, its finally getting a bit of UI attention.

--
You received this message because you are subscribed to the Google Groups "SilverStripe Core Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to silverstripe-d...@googlegroups.com.
To post to this group, send email to silverst...@googlegroups.com.
Visit this group at http://groups.google.com/group/silverstripe-dev.
For more options, visit https://groups.google.com/d/optout.

[Paul Clarke]

Yup sure is

[Jonathon Menz]

Looks awesome so far! Very exciting.

1. If there are lots of files in a folder, how will this be handled? Show everything / Pagination / Load More button? My preference would be to show everything, but ensure the thumbnails are lazy loaded so only visible (and soon to be visible) thumbnails are downloaded. A live search/filter to compliment this would be really great - i.e. just filtering the current list on title and filename client-side. Could maybe sit down in the bottom left corner? Ideally the number of files in a folder wouldn't get out of hand but some users do love to stick everything in that 'Uploads' folder.

2. I wonder if it would be worth including the filename as well in small/light text beneath the title of the file. I'd say most of the time the title and filename would be very similar but for some users and use-cases it might be important to see both.

3. Also I think it's worth considering splitting up the one-button-for-all media button (for which the icon sugests it deals with images only) in to an Insert drop-down menu. The interface pictured above could then deal only with inserting local images, and there could be separate 'Image from URL' and 'Video from URL' options in the Insert menu. Would be more intuitive, more streamlined and more extensible in my opinion. Related: #4337

4. Will a similar interface be available on UploadField instances as well for selecting assets? I'm assuming in the above design that only images and folders will be shown - would be cool if a similar filter is applied on UploadFields so that only folders and files which match 'allowed_file_types' for that field are displayed.

On Monday, 19 October 2015 16:22:12 UTC-7, Paul Clarke wrote:

Yup sure is

[Paul Clarke]

1. For technical reasons we have gone with a load more button, from a users point of view I think lazy loading would be good though. Pagination would remain for gridfield items for now but I would think that later down the line the experiences should start to align more. Sorry I left the search (with filters) icon off the designs but it would be in the top right next to the view toggle.

2. Yeah we have considered this and we didn't really have strong opinions either way. Because the majority of names would be the same we went with just the Title. We thought that if we introduced a way to sort by filename it would be more useful.

3. Not too sure if I follow - you mean the "link" icon represents images only? I agree a dropdown would be more extensible but while testing we got comments that having another click to get to the "upload" link seemed too many (click insert in  tinymce, click add, and then click what type of add, then insert). I'm not too sure if separating the insert media by URL would make sense as where to you draw the line with the type? (audio, pdf, xls... ). I guess we ruled it out as we only had two actions - I'll bring it up with the others and see what they think.

4. This hasn't really been brought into the discussion up to now but would think we can do a fair bit of work in that area to provide a closer experience – at the moment I don't know if we will get the time to get that far. Good you brought it up though, I'll see if it can be brought in even if it is just  the UX side so that it has been considered. I know you've done quite a bit of work in that area, so will keep you in the loop if we do go that far.

Cheers

[Shea Dawson]

1. If pagination is going to be done with a load more button, it would be great if developers could override the default page length. That way developers effectively get a show everything option by setting a high limit, which would be my preference for most if not all projects I work on. Lazy loading would still need to be implemented for this to work well.

4. It would be great if this work could be done in a way that made parts of it reusable for the asset admin and the uploadfield select-existing-file ui. 

Also I like the way google drive displays folders smaller than files, are large folder icons a waste of space?

--
You received this message because you are subscribed to a topic in the Google Groups "SilverStripe Core Development" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/silverstripe-dev/9sfkXXgJS8c/unsubscribe.
To unsubscribe from this group and all its topics, send an email to silverstripe-d...@googlegroups.com.

To post to this group, send email to silverst...@googlegroups.com.
Visit this group at http://groups.google.com/group/silverstripe-dev.
For more options, visit https://groups.google.com/d/optout.

--

Shea Dawson
Web Developer
LiveSource

mobile +64 20 4028 5647
skype squatchnz
email sh...@livesource.co.nz
web www.livesource.co.nz

[Sam Minnée]

1. For technical reasons we have gone with a load more button, from a users point of view I think lazy loading would be good though.

Can someone elaborate on why a load more button is necessary? Seems like a crutch.

[Jonathon Menz]

1. Is the search/filter a live (client-side) one? I think this wouldn't work properly with the 'load more' approach as you would only be searching through a subset of the results?

3. Sorry I was talking about the editor button that launches the modal window: 

I think this button is too subtle and the icon doesn't convey the amount of functionality hidden behind it. I wouldn't intuitively know I could embed a video by clicking that button for instance. Rather than one interface that handles insertion of all media I would prefer to have several separate actions with their own interfaces, grouped together in a menu like this (straight from TinyMCE 4.2 demo):

Then if developers can easily add more items to this menu (like with Shea Dawson's shortcodable module) and provide placeholders etc. it would be awesome (but I'm getting off track, sorry). Your interface design could still be used in full with this approach - only difference would be separating the video functionality in to a separate interface, so the 'Insert from URL' in your design would only handle images.

4. I would love if the file selection part of the interface could be re-used in full here as you're really doing the exact same action so would be a shame not to. I choose images in UploadFields a lot more often than I add them within TinyMCE, so if I could only have one interface updated I would actually choose this one ahead of TinyMCE :) but if it can't be done now it's something we can look at in the future.

Thanks for sharing the designs!

[Paul Clarke]

It was a first step towards lazy loading. The problem came up that if the amount of items which initially loaded didn't fill the screen (if the user has a huge screen) then the user wouldn't have the ability to scroll and therefor we wouldn't know to load more. Obviously there are ways around this but required extra effort to get it over the line – I've talked about this with the guys here and they don't think its too difficult, Sam we can talk about about if this can go into the workstream.

[Jonathon Menz]

Ah okay. I was imagining something else, which is to only lazy load the thumbnails. So all the items for a directory would be listed from the start, but only the visible items would have their thumbnails loaded, using something like Unveil.js. Any off canvas items would just have a placeholder until scrolled to. Then you could have an instant filter for searching within a directory because all the data is already available without additional http requests.

Do we need to limit the number of results listed for server-side performance reasons, or is it just about client-side image downloads?

[Paul Clarke]

@jonom all the search/filtering is serverside at the moment.

3. Yeah I agree - We've got the editor upgrade planned but seems like its the order we are implementing these changes aren't in a good order. In that case the "insert by URL" link would go from UI as pictured above, I think the TinyMCE work will be a big one.

4. I've added it to the list of things planned for the team at SS for 4.0 but I can't guarantee that it will stay in there and make the cut.

[Shea Dawson]

Paul, what do you think about the folder icon size in regards to the google drive example?

--
You received this message because you are subscribed to a topic in the Google Groups "SilverStripe Core Development" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/silverstripe-dev/9sfkXXgJS8c/unsubscribe.
To unsubscribe from this group and all its topics, send an email to silverstripe-d...@googlegroups.com.

To post to this group, send email to silverst...@googlegroups.com.
Visit this group at http://groups.google.com/group/silverstripe-dev.
For more options, visit https://groups.google.com/d/optout.

[Paul Clarke]

Ah yes I meant to reply to you, I totally overlooked how they handle folders. I really like it, I'll see how/where we can work that in as it solves a lot of issues with smaller screen sizes. Cheers

[David Craig]

There are performance implications loading everything up front. Instantiating 1000 file objects on the server would use a lot of memory and be really slow. Batching requests is possible, loading 20, then another 20, and so on, until you have all 1000 files. But there's a lot of wasted resource there. You normally wouldn't need all of that data. I think the best approach is to load 20, then on scroll request the next 20, and so on. The current client-side filtering option can be sent with the request for the next 20, so that what's returned is relevant to your current sort setting. For example you're sorting by 'Last updated'. On load you get the 20 most recently updated files. When you scroll you'll get the next 20 last updated files. Change the client-side sort to 'Alphabetical' and those files are sorted alphabetically. Scroll again and the next 20 files (by alphabetical order)are loaded

[Jonathon Menz]

Sounds good David, thanks for the explanation. Can't wait to try this stuff out!