Expand static image URLs for item background images.

drag_and_drop_v2/drag_and_drop_v2.py

@@ -152,6 +152,12 @@ class DragAndDropBlock(XBlock, XBlockWithSettingsMixin, ThemableXBlockMixin):
                 del item['feedback']
                 del item['zone']
                 item['inputOptions'] = 'inputOptions' in item
+                # Fall back on "backgroundImage" to be backward-compatible.
+                image_url = item.get('imageURL') or item.get('backgroundImage')
+                if image_url:
+                    item['expandedImageURL'] = self._expand_static_url(image_url)
+                else:
+                    item['expandedImageURL'] = ''
             return items
 
         return {

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -857,7 +857,6 @@ function DragAndDropBlock(runtime, element, configuration) {
                     input.class_name = item_user_state.correct_input ? 'correct' : 'incorrect';
                 }
             }
-            var imageURL = item.imageURL || item.backgroundImage;  // Fall back on "backgroundImage" to be backward-compatible
             var grabbed = false;
             if (item.grabbed !== undefined) {
                 grabbed = item.grabbed;
@@ -870,9 +869,9 @@ function DragAndDropBlock(runtime, element, configuration) {
                 xhr_active: (item_user_state && item_user_state.submitting_location),
                 input: input,
                 displayName: item.displayName,
-                imageURL: imageURL,
+                imageURL: item.expandedImageURL,
                 imageDescription: item.imageDescription,
-                has_image: !!imageURL,
+                has_image: !!item.expandedImageURL,
                 grabbed: grabbed,
                 widthPercent: item.widthPercent, // widthPercent may be undefined (auto width)
                 imgNaturalWidth: item.imgNaturalWidth,

tests/unit/data/html/config_out.json

@@ -35,24 +35,28 @@
         {
           "displayName": "<b>1</b>",
           "imageURL": "",
+          "expandedImageURL": "",
           "id": 0,
           "inputOptions": false
         },
         {
           "displayName": "<i>2</i>",
           "imageURL": "",
+          "expandedImageURL": "",
           "id": 1,
           "inputOptions": true
         },
         {
           "displayName": "X",
           "imageURL": "",
+          "expandedImageURL": "",
           "id": 2,
           "inputOptions": false
         },
         {
           "displayName": "",
           "imageURL": "http://placehold.it/100x300",
+          "expandedImageURL": "http://placehold.it/100x300",
           "id": 3,
           "inputOptions": false
         }

tests/unit/data/old/config_out.json

@@ -35,6 +35,7 @@
         {
           "displayName": "1",
           "imageURL": "",
+          "expandedImageURL": "",
           "id": 0,
           "inputOptions": false,
           "size": {"height": "auto", "width": "190px"}
@@ -42,6 +43,7 @@
         {
           "displayName": "2",
           "imageURL": "",
+          "expandedImageURL": "",
           "id": 1,
           "inputOptions": true,
           "size": {"height": "auto", "width": "190px"}
@@ -49,6 +51,7 @@
         {
           "displayName": "X",
           "imageURL": "",
+          "expandedImageURL": "",
           "id": 2,
           "inputOptions": false,
           "size": {"height": "100px", "width": "100px"}
@@ -56,6 +59,7 @@
         {
           "displayName": "",
           "imageURL": "http://i1.kym-cdn.com/entries/icons/square/000/006/151/tumblr_lltzgnHi5F1qzib3wo1_400.jpg",
+          "expandedImageURL": "http://i1.kym-cdn.com/entries/icons/square/000/006/151/tumblr_lltzgnHi5F1qzib3wo1_400.jpg",
           "id": 3,
           "inputOptions": false,
           "size": {"height": "auto", "width": "190px"}

tests/unit/data/plain/config_out.json

@@ -35,24 +35,28 @@
         {
           "displayName": "1",
           "imageURL": "",
+          "expandedImageURL": "",
           "id": 0,
           "inputOptions": false
         },
         {
           "displayName": "2",
           "imageURL": "",
+          "expandedImageURL": "",
           "id": 1,
           "inputOptions": true
         },
         {
           "displayName": "X",
-          "imageURL": "",
+          "imageURL": "/static/test_url_expansion",
+          "expandedImageURL": "/course/test-course/assets/test_url_expansion",
           "id": 2,
           "inputOptions": false
         },
         {
           "displayName": "",
           "imageURL": "http://placehold.it/200x100",
+          "expandedImageURL": "http://placehold.it/200x100",
           "id": 3,
           "inputOptions": false
         }

tests/unit/data/plain/data.json

@@ -51,7 +51,7 @@
         "correct": ""
       },
       "zone": "none",
-      "imageURL": "",
+      "imageURL": "/static/test_url_expansion",
       "id": 2
     },
     {

tests/unit/test_basics.py

@@ -45,10 +45,10 @@ class BasicTests(TestCaseMixin, unittest.TestCase):
         self.assertEqual(zones, DEFAULT_DATA["zones"])
         # Items should contain no answer data:
         self.assertEqual(items, [
-            {"id": 0, "displayName": "Goes to the top", "imageURL": "", "inputOptions": False},
-            {"id": 1, "displayName": "Goes to the middle", "imageURL": "", "inputOptions": False},
-            {"id": 2, "displayName": "Goes to the bottom", "imageURL": "", "inputOptions": False},
-            {"id": 3, "displayName": "I don't belong anywhere", "imageURL": "", "inputOptions": False},
+            {"id": i, "displayName": display_name, "imageURL": "", "expandedImageURL": "", "inputOptions": False}
+            for i, display_name in enumerate(
+                ["Goes to the top", "Goes to the middle", "Goes to the bottom", "I don't belong anywhere"]
+            )
         ])
 
     def test_ajax_solve_and_reset(self):