Drag and drop pictures into labels

Drag and drop pictures into labels

by Davo Smith -
Number of replies: 22
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I just wanted to throw this idea out to the forums to see what people's thoughts were on it.

https://tracker.moodle.org/browse/MDL-34137 has an update to the 'drag and drop course upload' feature that allows users the option of embedding a picture in a label (rather than creating a file resource) when dropping an image file onto a course.

The code is there and works cleanly, but there's still a question as to whether or not it is actually a good idea in the first place.

Pros:

  • Quick way to add images to make course pages look more attractive
  • Can be disabled by site admin if not wanted
  • Users still have the option of creating a file resource (via a dialog that pops up after the file is dropped)
  • Only affects image files (not office documents, etc)

Cons:

  • Adds an extra step when uploading an image if you just wanted to create file resources (the user has to select the option and click OK)
  • Easy to upload a huge file that completely throws-off the course formatting (could be mitigated by auto-resizing images and linking to the full-size originals)
  • Users may be confused about the difference between creating a 'file resource' and a 'label'

If you want to try it out for yourself, there is a link to the code (but not a live demo site) on the issue. Please feel free to leave feedback either here or on the issue itself.

Average of ratings: Useful (4)
In reply to Davo Smith

Re: Drag and drop pictures into labels

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

I am definitely up for this despite the potential "cons". I certainly think it would benefit from auto-resizing images as I know many teachers (and students) don't consider image size when uploading and then wonder why their course is corrupted (I am looking at one now - Year 7 boy  has uploaded photo 3000 pixels wide as a forum attachment and classmates are complaining!) But as with this pupil, the label/image drag and drop  could also be a good opportunity for judicious help text and in-house training. I think the merits outweigh the possible drawbacks.

Average of ratings: Useful (3)
In reply to Davo Smith

Re: Drag and drop pictures into labels

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

I've posted an update to this patch now https://tracker.moodle.org/browse/MDL-34137

When an image is dragged and dropped onto a course, the user can select to 'Add image to course page' (i.e. create a label with the image in it), rather than creating a file resource. 

The main change I've made is that images are automatically scaled to the maximum width / height specified in the global settings for mod_label (default 400px by 400px maximum). Currently the resized image is linked to the full-size original, but that might change, depending on whether anyone else thinks that is a good idea.

If you like this change, please vote on the issue (and comment, if you have something to add to the discussion).

Average of ratings: -
In reply to Davo Smith

Re: Drag and drop pictures into labels

by Mark Pearson -

Davo,

"global settings for mod_label" -- I'm trying to find this setting under Site Administration. It's not under the Plugins menu as far as I can tell and searching for 'label' does not bring up any settings.  Any idea where I can find this parameter?

Plus, what I'd like to see is a means of applying an automatic resize to any uploaded image so that massive and unwieldy images just don't get stored at all. WordPress has a plugin called Imsanity that will proportionately resize every uploaded image greater than a specified longest side in pixels. This would be in addition to your label image max size.

 

Average of ratings: -
In reply to Mark Pearson

Re: Drag and drop pictures into labels

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Mark, have you downloaded the code which is linked to from the tracker issue? If not, you won't find this feature in Moodle - we are discussing a proposed new feature, not something you can do in Moodle as it currently exists.

A general resize of uploaded images is outside the scope of this discussion, but may well be a valid request to open up in Moodle tracker. I could see it as an option after you have chosen a picture via the filepicker (defaulting to resize, with a no-resize option).
Average of ratings: -
In reply to Davo Smith

Re: Drag and drop pictures into labels

by Bob Puffer -

I've posted in the tracker and wanted to post here also in hopes more will vote for this resource.  The steps currently needed to accomplish what this functionality will replace:

  1. Add resource or activity
  2. Scroll down to get to Label
  3. Double-click on Label (one less step)
  4. Wait for TinyMce editor to load (should probably count as three steps)
  5. Click picture button
  6. Click Find or upload an image
  7. Wait for Filepicker to load
  8. Click Upload a file (unnecessary if you this was last selected)
  9. Click Choose file
  10. Click Upload this file (again in the display box – don't quite get why somebody couldn't have designed this without such repetition)
  11. Click Insert
  12. Click OK on the dialog for no image description or type in an image description nobody will ever see except perhaps a screen reader
  13. Click Save and return to course
  14. move the image from the end of the section to where you need it (which is so unlikely NOT to be the end of the section)
Average of ratings: Useful (1)
In reply to Bob Puffer

Re: Drag and drop pictures into labels

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

Quick screencast in this blog post of work in progress. I particularly like the file resizing http://www.moodleblog.net/2013/02/03/drag-and-drop-pictures-into-labels-in-moodle/

Average of ratings: -
In reply to Mary Cooch

Re: Drag and drop pictures into labels

by Séverin Terrier -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

Yes, very nice smile

We could also imagine 2 new things related :

  • if you drag and drop and image on an existing label (with text), you can add it to the existing label (and it then opens the label to place it exactly where you want)
  • in editing mode, if you select the image (in the label), and drag and drop it outside of the browser, you can delete it

Crazy ideas big grin

Average of ratings: -
In reply to Mary Cooch

Re: Drag and drop pictures into labels

by Doug Loomer -

This would be a really great feature addition to Moodle.  Many of our teachers use labels extensively to create an editable space in which to present content.  They, and I, would love it!

Average of ratings: -
In reply to Davo Smith

Re: Drag and drop pictures into labels

by Frankie Kam -
Picture of Plugin developers

Hi Davo

I've implemented the patch as per https://tracker.moodle.org/browse/MDL-34137. It seems to work except that the upload effects (yellow daisywheel) keep going round and round, not giving me an indication that the image has been uploaded. When I do a browser refresh, the image is shown as being uploaded and embedded into the course page. Any ideas for the infinite upload daisywheel graphics effect?

I'm using Moodle 2.4. isometric theme with autohide setup. Weekly course format.

Frankie Kam

Average of ratings: -
In reply to Frankie Kam

Re: Drag and drop pictures into labels

by Frankie Kam -
Picture of Plugin developers

My web browser is Google Chrome Version 24.0.1312.57 m. I've also tested it under Firefox 17.0. Same thing. I've tried using a basic theme that does not use autohide. To no avail. The wheel just keeps spinning.

My display setting in
► Site administration ► Plugins ► Activity modules ► File
is set as automatic.

 

 

Average of ratings: -
In reply to Frankie Kam

Re: Drag and drop pictures into labels

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Frankie - please open up the chrome developer tools and the 'network' tab, then try again.

Copy and paste the results of the call to course/dndupload.php

 

Average of ratings: -
In reply to Davo Smith

Re: Drag and drop pictures into labels

by Frankie Kam -
Picture of Plugin developers

Hi Davo

Thanks for the speedy reply. Cor, I didn't know such a tool existed. Here is the screenshot.

I can see ajaxloader doing its thing. It's just spinnin' its wheels. Hope this helps.

In the Console tab. Something's happenin' but I'm not quite sure what to make of it, Captain.

 

Here's a snapshot of the Call Stack (I see nothing here).

That's all for now.

Frankie Kam

Average of ratings: -
In reply to Frankie Kam

Re: Drag and drop pictures into labels

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Frankie - you've found the right place with the first screenshot. Now could you click on 'dndupload.php' and then click on 'response' and copy + paste what is found there.

It is clear from the last javascript error message that there is some extra junk appearing in the response from the server, which is preventing the response from being understood (not that I needed the javascript error for that, as I'd guessed that was the problem from the start).

Average of ratings: -
In reply to Davo Smith

Re: Drag and drop pictures into labels

by Frankie Kam -
Picture of Plugin developers
<br />
<b>Fatal error</b>: Call to undefined function course_get_cm_edit_actions() in <b>/home/frankie/public_html/m24/course/dnduploadlib.php</b> on line <b>688</b><br />

 I've solved it now. Apparantly I had trouble patching the file dnduploadlib.php because after replacing the line of cde " $resp->link = $mod->get_url()->out();" with the code lines:

681 + if ($mod->has_view()) {
682 + $resp->link = $mod->get_url()->out();
683 + } else {
684 + $resp->link = null;
685 + }
686 + $resp->content = $mod->get_content();

my original dnduploadlib.php file didn't have line 681! So I tried to guess the which code to patch and ended up patching the wrong part of the file. 
I repatched dnduploadlib.php by keeping it simple - I remove just that one line and replacing it with the other 4 lines. Nothing else. Save the file.  Here's proof that it works properly now (yippee!!):

Average of ratings: -
In reply to Frankie Kam

Re: Drag and drop pictures into labels

by Frankie Kam -
Picture of Plugin developers

Thanks a million for nudging me along to success in ironing my own patch bug. NOW the drag-and-drop image to label is working PERFECTLY.

BTW, I noticed that if I drag and drop a PNG file, it ends up being a link instead of an embedded image. See "badge1" in the post above. It's a link when it should be an image in all its glory. Next question: How do I allow a PNG file to be automatically embedded as an image and not as a link?

Frankie Kam

Average of ratings: -
In reply to Frankie Kam

Re: Drag and drop pictures into labels

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

Frankie - png, gif, jpeg, svg files all work perfectly for me.

Please open a bug report if you have a problem with this feature and include the file that is not working.

Average of ratings: -
In reply to Davo Smith

Re: Drag and drop pictures into labels

by Frankie Kam -
Picture of Plugin developers

Hi Davo

I have found that if I drag and drop an image file that ends with the extension, e.g.,  image.PNG (that's the file extension in uppercase), the image is saved as a link.

If the same filename were named as image.png (that's lowercase for the file extension), the "What do you want to do with the file...?" mini-menu pops up as expected. Upon selecting "Add image to course page", the image embeds as normal.

So the problem is the drag and drop image mechanism does not recognise files with uppercase file extension PNG. And Ditto for file extensions that end with uppercase JPG. My image file wall.JPG gets saved as a link instead of displaying on the course page. I've just tested it.

Anyone else experiencing the same behaviour?

Frankie Kam

Average of ratings: -
In reply to Frankie Kam

Re: Drag and drop pictures into labels

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers
Please let me know the tracker issue you have opened for this, or even better, just assign it to me directly.
Average of ratings: -
In reply to Davo Smith

Re: Drag and drop pictures into labels

by Frankie Kam -
Picture of Plugin developers

Hi Davo

Okay, I took the challenge to start the tracker at
https://tracker.moodle.org/browse/CONTRIB-4161

It's only my second tracker since 2011 so hope I got it right. I wasn't sure which "component affected" to choose from the extensive list of the dropdown list, so I chose "Course Format: Weekly" as the closest choice.

Frankie Kam

Average of ratings: -
In reply to Frankie Kam

Re: Drag and drop pictures into labels

by Davo Smith -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Peer reviewers Picture of Plugin developers

The reason you weren't able to find a suitable component, is that you selected 'addons' code, rather than 'moodle' for the project. This is a core Moodle bug, not a bug in a 3rd-party add-on.

Would it be possible for you to close that bug you opened and create a new one in Moodle core (as far as I know you can't move bugs between different projects in tracker)? Set the component to 'Ajax and javascript' and then assign it to me (if you can, otherwise I'll assign it).

Without looking at the code, I think I know what is wrong and can probably fix it in a couple of lines of code.

Average of ratings: -
In reply to Davo Smith

Re: Drag and drop pictures into labels

by Frankie Kam -
Picture of Plugin developers

Hi Davo
Thanks for correcting me. Unfortunately, Moodledocs Tracker says that "Moodle core developers and testers are permitted to change the status" and I can't see a way to close the bug report. Using your instructions, I've opened this Moodle Tracker in its place: https://tracker.moodle.org/browse/MDL-38033.
Frankie

Average of ratings: -