Moodle
  1. Moodle
  2. MDL-34137

Offer mod_label as an option when drag/dropping media mime-types

    Details

    • Testing Instructions:
      Hide
      1. Visit Settings > Site admin > plugins > activity modules > label
      2. Tick the 'media drag and drop' setting
      3. Visit a course page
      4. Drag one or more images onto the page (note: must be 'web_image' types - jpeg, png, gif or svg)
      5. Select 'Create label' from the dialog
        • Confirm that a label is created for each image
        • Confirm that all of the editing icons work as expected (without a page refresh)
      6. Refresh the page (or load in a separate tab)
        • confirm that the layout of labels is unchanged after the refresh
      7. Revisit Settings > Site admin > plugins > activity modules > label
      8. Go back to the course and attempt to upload another image
        • Confirm that the image uploads immediately as a file resource without the 'label' option being presented
      9. Check that each of the images uploaded is being constrained to the maximum dimensions specified on the global settings page
      10. Check that images smaller than the maximum dimensions are not resized
      11. Check that disabling both width & height restrictions prevents uploaded images from being resized
      12. Check that resized images are linked to the full-sized original

      Note: this will only work on browsers supporting drag and drop (Safari, Chrome, Firefox, IE10). It should be tested on each of those browsers.

      Note: SVG images have their width set to the maximum and their height left to resize automatically in the browser. This is due to there not being any current support for determining the aspect ratio of an SVG image, so I cannot adjust the height without distorting the image.

      Show
      Visit Settings > Site admin > plugins > activity modules > label Tick the 'media drag and drop' setting Visit a course page Drag one or more images onto the page (note: must be 'web_image' types - jpeg, png, gif or svg) Select 'Create label' from the dialog Confirm that a label is created for each image Confirm that all of the editing icons work as expected (without a page refresh) Refresh the page (or load in a separate tab) confirm that the layout of labels is unchanged after the refresh Revisit Settings > Site admin > plugins > activity modules > label Go back to the course and attempt to upload another image Confirm that the image uploads immediately as a file resource without the 'label' option being presented Check that each of the images uploaded is being constrained to the maximum dimensions specified on the global settings page Check that images smaller than the maximum dimensions are not resized Check that disabling both width & height restrictions prevents uploaded images from being resized Check that resized images are linked to the full-sized original Note: this will only work on browsers supporting drag and drop (Safari, Chrome, Firefox, IE10). It should be tested on each of those browsers. Note: SVG images have their width set to the maximum and their height left to resize automatically in the browser. This is due to there not being any current support for determining the aspect ratio of an SVG image, so I cannot adjust the height without distorting the image.
    • Affected Branches:
      MOODLE_23_STABLE, MOODLE_24_STABLE
    • Fixed Branches:
      MOODLE_25_STABLE
    • Pull Master Branch:
      MDL-34137_label_dndupload
    • Rank:
      42468

      Description

      When you drag and drop a image or media file into a Moodle page - it seems as though Moodle treats it as a resource to share and it becomes a link.

      Can it also be embedded in the page so that the image can be seen or the video embedded so it can stream? Easily customizing the appearance of a page (without the need to create a label first) would de great.

        Issue Links

          Activity

          Hide
          Andrew Nicols added a comment -

          Adding Davo as a watcher here as he wrote the file dndupload stuff.

          Davo - is this something that is feasible? Is it something you think we should consider? I guess it should be pretty easy to implement.

          Show
          Andrew Nicols added a comment - Adding Davo as a watcher here as he wrote the file dndupload stuff. Davo - is this something that is feasible? Is it something you think we should consider? I guess it should be pretty easy to implement.
          Hide
          Andrew Nicols added a comment -

          John,

          Thanks for the suggestion. I'll add it to the development backlog and we'll look at how this can be implemented.

          Cheers,

          Andrew

          Show
          Andrew Nicols added a comment - John, Thanks for the suggestion. I'll add it to the development backlog and we'll look at how this can be implemented. Cheers, Andrew
          Hide
          Davo Smith added a comment -

          Looks fairly straightforward to implement - I can take a look at doing it when I have a spare moment.

          Show
          Davo Smith added a comment - Looks fairly straightforward to implement - I can take a look at doing it when I have a spare moment.
          Hide
          Davo Smith added a comment -

          Here is a patch that allows for drag and drop of images to be used to create labels (with an admin setting to disable it).

          This does not support other media types (I'm hoping that someone else would be wanting to jump in at this point and get that working).

          A further extension might be an admin option to resize uploaded images to a certain width, but I think that deserves to be a separate patch ...

          Show
          Davo Smith added a comment - Here is a patch that allows for drag and drop of images to be used to create labels (with an admin setting to disable it). This does not support other media types (I'm hoping that someone else would be wanting to jump in at this point and get that working). A further extension might be an admin option to resize uploaded images to a certain width, but I think that deserves to be a separate patch ...
          Hide
          Andrew Nicols added a comment -

          [Y] Syntax
          [Y] Output
          [Y] Whitespace
          [Y] Language
          [-] Databases
          [N] Testing
          [Y] Security
          [-] Documentation
          [Y] Git
          [Y] Sanity check

          I think everything looks fine to me on the code front.
          If you could provide some test instructions then you're good to go for integration.

          Cheers

          Show
          Andrew Nicols added a comment - [Y] Syntax [Y] Output [Y] Whitespace [Y] Language [-] Databases [N] Testing [Y] Security [-] Documentation [Y] Git [Y] Sanity check I think everything looks fine to me on the code front. If you could provide some test instructions then you're good to go for integration. Cheers
          Hide
          Martin Dougiamas added a comment - - edited

          How useful is this for a teacher really? It's going to slow down file resources with an extra dialog, and possibly confuse those who don't know what a label is ... is adding images in labels actually going to be useful to teachers to make this slowdown worth it?

          Text clippings on the other hand should go straight to labels, that makes more sense.

          Show
          Martin Dougiamas added a comment - - edited How useful is this for a teacher really? It's going to slow down file resources with an extra dialog, and possibly confuse those who don't know what a label is ... is adding images in labels actually going to be useful to teachers to make this slowdown worth it? Text clippings on the other hand should go straight to labels, that makes more sense.
          Hide
          Davo Smith added a comment -

          It is often the case that courses can be made a lot more attractive to students by including images directly within the course, rather than hiding them behind links (which is still what will happen with other file types - PDFs, Office documents, etc.).

          My guess (based on teaching with Moodle for several years before switching to development) is that teachers upload other filetypes far more often than images and so will not be seeing this a lot (and there is an admin option provided to disable this). Note the dialog only appears for web_images, not for any other filetype. Some rewording of the dialog options might help ('display the image on the course page'?), but, ultimately, if a teacher selects the 'label' option it should be fairly obvious what it has done and they should not be confused a second time.

          Is it worth throwing out into forums for more general feedback?

          Maybe an improvement would be to have an option to automatically resize the image (to a size specified in the admin settings) and link through to a full-size version of the image?

          Show
          Davo Smith added a comment - It is often the case that courses can be made a lot more attractive to students by including images directly within the course, rather than hiding them behind links (which is still what will happen with other file types - PDFs, Office documents, etc.). My guess (based on teaching with Moodle for several years before switching to development) is that teachers upload other filetypes far more often than images and so will not be seeing this a lot (and there is an admin option provided to disable this). Note the dialog only appears for web_images, not for any other filetype. Some rewording of the dialog options might help ('display the image on the course page'?), but, ultimately, if a teacher selects the 'label' option it should be fairly obvious what it has done and they should not be confused a second time. Is it worth throwing out into forums for more general feedback? Maybe an improvement would be to have an option to automatically resize the image (to a size specified in the admin settings) and link through to a full-size version of the image?
          Hide
          Sam Hemelryk added a comment -

          Hi guys,

          Sending this back in order to make a decision on whether this lands or not (code looks good btw).

          Davo would you mind posting in the forums so that we can see what people think of this change.

          Many thanks
          Sam

          Show
          Sam Hemelryk added a comment - Hi guys, Sending this back in order to make a decision on whether this lands or not (code looks good btw). Davo would you mind posting in the forums so that we can see what people think of this change. Many thanks Sam
          Hide
          Mary Cooch added a comment - - edited

          I like this change personally and think it could have a beneficial effect on course display (picking up on Davo's comment) With the admin option to disable it would suit all tastes. I do particularly support the improvement of having the option to automatically resize the image and link to full size (bit like WP)One thing from my experience in school is that teachers and students very often upload photos thousands of pixels wide and then wonder why their course appears distorted.. Let's see what others think when Davo posts in the forums

          Show
          Mary Cooch added a comment - - edited I like this change personally and think it could have a beneficial effect on course display (picking up on Davo's comment) With the admin option to disable it would suit all tastes. I do particularly support the improvement of having the option to automatically resize the image and link to full size (bit like WP)One thing from my experience in school is that teachers and students very often upload photos thousands of pixels wide and then wonder why their course appears distorted.. Let's see what others think when Davo posts in the forums
          Hide
          Davo Smith added a comment -
          Show
          Davo Smith added a comment - Added to the forums: https://moodle.org/mod/forum/discuss.php?d=219294
          Hide
          CiBoT added a comment -

          Moving this reopened issue out from current integration. Please, re-submit it for integration once ready.

          Show
          CiBoT added a comment - Moving this reopened issue out from current integration. Please, re-submit it for integration once ready.
          Hide
          Sam Hemelryk added a comment -

          Thanks guys - don't forget to vote!

          Show
          Sam Hemelryk added a comment - Thanks guys - don't forget to vote!
          Hide
          Davo Smith added a comment -

          I've added an extra commit that resizes uploaded images (according to global settings).

          It also links to the full size image, but I can't work out if that is a good idea or not.

          I'll post an update on the forums - it would be good to get a few more opinions on this one.

          Show
          Davo Smith added a comment - I've added an extra commit that resizes uploaded images (according to global settings). It also links to the full size image, but I can't work out if that is a good idea or not. I'll post an update on the forums - it would be good to get a few more opinions on this one.
          Hide
          Robert Puffer added a comment - - edited

          I'd estimate that 70% of our instructors have now adopted images in-line as labels to break up the scroll and engage the student more. From our perspective being able to drag and drop images and have them appear right on the page would be very useful. Do you realize how many steps that takes out adding an image directly to your page? Here they are:

          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)
          Show
          Robert Puffer added a comment - - edited I'd estimate that 70% of our instructors have now adopted images in-line as labels to break up the scroll and engage the student more. From our perspective being able to drag and drop images and have them appear right on the page would be very useful. Do you realize how many steps that takes out adding an image directly to your page? Here they are: Add resource or activity Scroll down to get to Label Double-click on Label (one less step) Wait for TinyMce editor to load (should probably count as three steps) Click picture button Click Find or upload an image Wait for Filepicker to load Click Upload a file (unnecessary if you this was last selected) Click Choose file Click Upload this file (again in the display box – don't quite get why somebody couldn't have designed this without such repetition) Click Insert Click OK on the dialog for no image description or type in an image description nobody will ever see except perhaps a screen reader Click Save and return to course 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)
          Hide
          Jedidiah Rex added a comment - - edited

          We have many faculty who use images in their courses. Not having to go through all the steps listed by Bob, would be great. Including an auto resize option would be so nice also. My concern is that this might circumvent the accessibility. This may be more of a culture/training issue though.

          Show
          Jedidiah Rex added a comment - - edited We have many faculty who use images in their courses. Not having to go through all the steps listed by Bob, would be great. Including an auto resize option would be so nice also. My concern is that this might circumvent the accessibility. This may be more of a culture/training issue though.
          Hide
          Joe Murphy added a comment -

          This would be an excellent way to address the pernicious "Moodle is Ugly" criticism. I think the 14-step process Bob outlined is why we have a rather lower percentage of faculty who add images to their Moodle page. Plenty of people find it appealing, but the work entailed discourages them. If it were easier to add images, I think we'd have more engaging (and in some cases more readable) Moodle pages.

          Show
          Joe Murphy added a comment - This would be an excellent way to address the pernicious "Moodle is Ugly" criticism. I think the 14-step process Bob outlined is why we have a rather lower percentage of faculty who add images to their Moodle page. Plenty of people find it appealing, but the work entailed discourages them. If it were easier to add images, I think we'd have more engaging (and in some cases more readable) Moodle pages.
          Hide
          Carly J Born added a comment -

          I've had people ask me if this is possible over and over again. It's definitely a desired function from the faculty at my institution. Saves so much time and clicking!!

          Show
          Carly J Born added a comment - I've had people ask me if this is possible over and over again. It's definitely a desired function from the faculty at my institution. Saves so much time and clicking!!
          Hide
          Jason Alley added a comment - - edited

          Bob describes the pain point of adding an image to display on a course site perfectly. I'd like to see this drag-and-drop functionality added. I wonder if anyone would like to see this same type of drag-and-drop functionality added for media files since Moodle Media allows us to embed a media player within a label or page.

          Show
          Jason Alley added a comment - - edited Bob describes the pain point of adding an image to display on a course site perfectly. I'd like to see this drag-and-drop functionality added. I wonder if anyone would like to see this same type of drag-and-drop functionality added for media files since Moodle Media allows us to embed a media player within a label or page.
          Hide
          Eric Strom added a comment - - edited

          This is an excellent idea. As part of this development I would suggest (plead) that any accessibility components be populated automagically.

          Specifically, the image filename should be mapped to the alt value <img alt="filename" ... >.

          This could also be a default behavior and a setting to prompt the user in a dialog box to change (user-modifiable is preferred, not at the admin level please).

          Show
          Eric Strom added a comment - - edited This is an excellent idea. As part of this development I would suggest (plead) that any accessibility components be populated automagically. Specifically, the image filename should be mapped to the alt value <img alt="filename" ... >. This could also be a default behavior and a setting to prompt the user in a dialog box to change (user-modifiable is preferred, not at the admin level please).
          Hide
          Davo Smith added a comment -

          The 'alt' tag is already populated with the filename in the patch I've attached.

          Show
          Davo Smith added a comment - The 'alt' tag is already populated with the filename in the patch I've attached.
          Hide
          Davo Smith added a comment -

          Resubmitting for peer review, as I have added the requested 'automatic resize' feature and the issue has now gathered a reasonable number of votes + positive comments.

          Note I have kept the 'resize' code as a separate commit as I feel it is clearer than integrating it back into the original commit (but will rebase -i it if needed).

          Show
          Davo Smith added a comment - Resubmitting for peer review, as I have added the requested 'automatic resize' feature and the issue has now gathered a reasonable number of votes + positive comments. Note I have kept the 'resize' code as a separate commit as I feel it is clearer than integrating it back into the original commit (but will rebase -i it if needed).
          Hide
          Mary Cooch added a comment -

          I made a rough and ready screencast of this so far here http://www.moodleblog.net/2013/02/03/drag-and-drop-pictures-into-labels-in-moodle/ I will do some more exploring later and post back but so far it seems great! I did discover however,that it didn't seem to work on the front page (purely because I was being lazy not wanting to make a new course to demo it) but that's not a problem.

          Show
          Mary Cooch added a comment - I made a rough and ready screencast of this so far here http://www.moodleblog.net/2013/02/03/drag-and-drop-pictures-into-labels-in-moodle/ I will do some more exploring later and post back but so far it seems great! I did discover however,that it didn't seem to work on the front page (purely because I was being lazy not wanting to make a new course to demo it) but that's not a problem.
          Hide
          Robert Puffer added a comment -

          I agree wholeheartedly, front page would not be an issue.

          Show
          Robert Puffer added a comment - I agree wholeheartedly, front page would not be an issue.
          Hide
          Mary Cooch added a comment -

          So just some observations:
          When you drag an image in, it actually saves it twice (if you look in server files)- once with the original file size and once with the reduced file size. I also dragged the image in a second time, out of curiosity, and saw that it is now present a third and fourth time - again in its original size and in a newer, reduced size different from the original one (I edited the admin settings) Does this matter?

          Show
          Mary Cooch added a comment - So just some observations: When you drag an image in, it actually saves it twice (if you look in server files)- once with the original file size and once with the reduced file size. I also dragged the image in a second time, out of curiosity, and saw that it is now present a third and fourth time - again in its original size and in a newer, reduced size different from the original one (I edited the admin settings) Does this matter?
          Hide
          Mary Cooch added a comment -

          Ah - I get it. When you click on the image, it links to its original size. As mentioned with Wordpress. Cool.

          Show
          Mary Cooch added a comment - Ah - I get it. When you click on the image, it links to its original size. As mentioned with Wordpress. Cool.
          Hide
          Robert Puffer added a comment -

          Oh I don't know – it'd be nice to stick with that oft-heralded vision of "no more file duplications" but in my mind the file storage system in Moodle 2.x is soooo convoluted that I guess it just doesn't matter to me anymore (just one person's opinion).

          Show
          Robert Puffer added a comment - Oh I don't know – it'd be nice to stick with that oft-heralded vision of "no more file duplications" but in my mind the file storage system in Moodle 2.x is soooo convoluted that I guess it just doesn't matter to me anymore (just one person's opinion).
          Hide
          Davo Smith added a comment -

          As with all files in Moodle 2.x - dropping the file a second time may add an extra file record, but the file itself is only stored once on the server (so it is not taking up any extra server space). The same should be true of the second copy of the resized image (as an identical original image should produce an identical resized version).

          Show
          Davo Smith added a comment - As with all files in Moodle 2.x - dropping the file a second time may add an extra file record, but the file itself is only stored once on the server (so it is not taking up any extra server space). The same should be true of the second copy of the resized image (as an identical original image should produce an identical resized version).
          Hide
          Martin Dougiamas added a comment -

          Since a lot of people seem to support it then my +2 too.

          Show
          Martin Dougiamas added a comment - Since a lot of people seem to support it then my +2 too.
          Hide
          Paula Clough added a comment -

          I know how popular dragging and dropping files into the course has been. This would be just as popular. I have instructors that would use images more frequently because it would be so much easier to do.

          Show
          Paula Clough added a comment - I know how popular dragging and dropping files into the course has been. This would be just as popular. I have instructors that would use images more frequently because it would be so much easier to do.
          Hide
          Matthew Cannings added a comment -

          I think this would be a good idea too.
          It does not seem to have been mentioned so far but if you drag a zip file into a course you already get a menu pop up asking if you want to create a folder containing the files, a file resource or a scorm activity.
          So the menu appearing for images is consistent with this existing feature.

          Show
          Matthew Cannings added a comment - I think this would be a good idea too. It does not seem to have been mentioned so far but if you drag a zip file into a course you already get a menu pop up asking if you want to create a folder containing the files, a file resource or a scorm activity. So the menu appearing for images is consistent with this existing feature.
          Hide
          Andrew Nicols added a comment -

          Looks good to me.
          My only thought is that it may be worthwhile moving the generation code to lib/filestorage/file_storage.php (or somewhere more appropriate) as a function usable by other areas.

          Show
          Andrew Nicols added a comment - Looks good to me. My only thought is that it may be worthwhile moving the generation code to lib/filestorage/file_storage.php (or somewhere more appropriate) as a function usable by other areas.
          Hide
          Davo Smith added a comment -

          Whilst I can see an argument for moving the resize code, I think that if you look carefully at it, quite a bit of it is fairly specific to the situation in which it is being used (e.g. creating the small image prefixed with 's_' and generating a link to the original).

          I think if you abstracted out the rest of it, there wouldn't be a huge amount left for other functions to use.

          I'm going to put forward for integration review.

          Show
          Davo Smith added a comment - Whilst I can see an argument for moving the resize code, I think that if you look carefully at it, quite a bit of it is fairly specific to the situation in which it is being used (e.g. creating the small image prefixed with 's_' and generating a link to the original). I think if you abstracted out the rest of it, there wouldn't be a huge amount left for other functions to use. I'm going to put forward for integration review.
          Hide
          Andrew Nicols added a comment -

          That's fine - it was just a consideration I thought I should mention.

          Show
          Andrew Nicols added a comment - That's fine - it was just a consideration I thought I should mention.
          Hide
          Damyon Wiese added a comment -

          The main moodle.git repository has just been updated with latest weekly modifications. You may wish to rebase your PULL branches to simplify history and avoid any possible merge conflicts. This would also make integrator's life easier next week.

          Cheers!

          Show
          Damyon Wiese added a comment - The main moodle.git repository has just been updated with latest weekly modifications. You may wish to rebase your PULL branches to simplify history and avoid any possible merge conflicts. This would also make integrator's life easier next week. Cheers!
          Hide
          Dan Poltawski added a comment -

          Integrated to master, thanks Davo!

          Show
          Dan Poltawski added a comment - Integrated to master, thanks Davo!
          Hide
          Dan Poltawski added a comment -

          Oh.. I thought 20 seconds after integrated - has this been tested with the GD extension disabled? (We don't yet have it as a requirement).

          It looks like the code will handle it OK, but could it be added as a step to the testing instructions - thanks

          Show
          Dan Poltawski added a comment - Oh.. I thought 20 seconds after integrated - has this been tested with the GD extension disabled? (We don't yet have it as a requirement). It looks like the code will handle it OK, but could it be added as a step to the testing instructions - thanks
          Hide
          Michael de Raadt added a comment -

          Test result: Success!

          I tested this in FF, IE and Chrome. IE did not like having multiple files dropped on it at the same time, but apart from that it worked. FF and Chrome worked even with multiple images being dropped.

          I was able to resize an SVG in the label by editing the label.

          Tested in Master only.

          Well done Davo.

          Show
          Michael de Raadt added a comment - Test result: Success! I tested this in FF, IE and Chrome. IE did not like having multiple files dropped on it at the same time, but apart from that it worked. FF and Chrome worked even with multiple images being dropped. I was able to resize an SVG in the label by editing the label. Tested in Master only. Well done Davo.
          Hide
          Damyon Wiese added a comment -

          Congratulations this fix has been added to Moodle!

          You may want to dedicate this issue to someone special on this Valentines day.

          Thanks!

          Show
          Damyon Wiese added a comment - Congratulations this fix has been added to Moodle! You may want to dedicate this issue to someone special on this Valentines day. Thanks!
          Hide
          Mary Cooch added a comment -

          Removing qa_test_required label as there is a test for this now MDLQA-5254 ready for next cycle.

          Show
          Mary Cooch added a comment - Removing qa_test_required label as there is a test for this now MDLQA-5254 ready for next cycle.
          Hide
          Mary Cooch added a comment -

          Removing docs_required label as this is documented here http://docs.moodle.org/25/en/Images and referenced here http://docs.moodle.org/25/en/Label

          Show
          Mary Cooch added a comment - Removing docs_required label as this is documented here http://docs.moodle.org/25/en/Images and referenced here http://docs.moodle.org/25/en/Label

            People

            • Votes:
              35 Vote for this issue
              Watchers:
              31 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved: