From 36a9b3390de6ee7040b237d1565eb934620a1a7f Mon Sep 17 00:00:00 2001
From: mohsin-r <mohsin.reza@mail.utoronto.ca>
Date: Sun, 21 May 2023 15:22:24 -0400
Subject: [PATCH] Dynamic Slideshow

---
 StoryRampSchema.json                          | 256 +++++----
 ...000000-0000-0000-0000-000000000000_en.json | 106 ++--
 ...000000-0000-0000-0000-000000000000_fr.json |  94 ++--
 src/components/editor/dynamic-editor.vue      |  28 +-
 .../editor/helpers/image-preview.vue          |   4 +-
 src/components/editor/image-editor.vue        |   4 +-
 src/components/editor/metadata-editor.vue     |  14 +-
 src/components/editor/slide-editor.vue        |  34 +-
 src/components/editor/slide-toc.vue           |  14 +-
 src/components/editor/slideshow-editor.vue    | 519 ++++++++++++++++++
 src/components/editor/text-editor.vue         |   4 +-
 src/components/panels/image-panel.vue         | 165 +++++-
 src/components/panels/slideshow-panel.vue     | 115 ++--
 src/definitions.ts                            |  26 +-
 src/lang/lang.csv                             |   5 +
 src/style.css                                 |   5 +
 16 files changed, 1084 insertions(+), 309 deletions(-)
 create mode 100644 src/components/editor/slideshow-editor.vue

diff --git a/StoryRampSchema.json b/StoryRampSchema.json
index 9d7b0410..9e262663 100644
--- a/StoryRampSchema.json
+++ b/StoryRampSchema.json
@@ -138,7 +138,7 @@
             "description": "A multimedia slide component.",
             "oneOf": [
                 {
-                    "$ref": "#/$defs/multimediaImage"
+                    "$ref": "#/$defs/imagePanel"
                 },
                 {
                     "$ref": "#/$defs/multimediaVideo"
@@ -147,7 +147,7 @@
                     "$ref": "#/$defs/multimediaAudio"
                 },
                 {
-                    "$ref": "#/$defs/multimediaSlideshow"
+                    "$ref": "#/$defs/slideshowPanel"
                 }
             ],
             "properties": {
@@ -159,6 +159,88 @@
             }
         },
 
+        "imagePanel": {
+            "type": "object",
+            "description": "An image panel.",
+            "properties": {
+                "images": {
+                    "type": "array",
+                    "items": {
+                        "$ref": "#/$defs/multimediaImage"
+                    },
+                    "description": "An array of images to display in the slideshow.",
+                    "minItems": 1
+                },
+                "loop": {
+                    "type": "boolean",
+                    "description": "Determines whether the slideshow loops back around to the beginning when you reach the end.",
+                    "default": false
+                },
+                "caption": {
+                    "type": "text",
+                    "description": "A caption to display below the slideshow."
+                },
+                "type": {
+                    "type": "string",
+                    "enum": ["slideshow"]
+                }
+            }
+        },
+
+        "slideshowPanel": {
+            "type": "object",
+            "description": "A multimedia slideshow component.",
+            "properties": {
+                "items": {
+                    "type": "array",
+                    "items": {
+                        "type": "object",
+                        "properties": {
+                            "type": {
+                                "type": "string",
+                                "description": "Type of this slideshow item.",
+                                "enum": ["text", "map", "image", "chart"]
+                            },
+                            "config": {
+                                "type": "object",
+                                "description": "Config for this slideshow item.",
+                                "oneOf": [
+                                    {
+                                        "$ref": "#/$defs/multimediaImage"
+                                    },
+                                    {
+                                        "$ref": "#/$defs/mapPanel"
+                                    },
+                                    {
+                                        "$ref": "#/$defs/textPanel"
+                                    },
+                                    {
+                                        "$ref": "#/$defs/dqvchartPanel"
+                                    }
+                                ]
+                            }
+                        }
+                    },
+                    "description": "An array of images to display in the slideshow.",
+                    "minItems": 1
+                },
+                "loop": {
+                    "type": "boolean",
+                    "description": "Determines whether the slideshow loops back around to the beginning when you reach the end.",
+                    "default": false
+                },
+                "caption": {
+                    "type": "text",
+                    "description": "A caption to display below the slideshow."
+                },
+                "type": {
+                    "type": "string",
+                    "enum": ["slideshow"]
+                }
+            },
+            "required": ["items", "type"]
+        },
+
         "mapPanel": {
             "type": "object",
             "description": "A map slide component.",
@@ -249,10 +331,6 @@
                 "tooltip": {
                     "type": "string",
                     "description": "Tooltip content for the image."
-                },
-                "type": {
-                    "type": "string",
-                    "enum": ["image"]
                 }
             },
             "required": ["src", "type"]
@@ -306,34 +384,6 @@
             "required": ["src", "type"]
         },
 
-        "multimediaSlideshow": {
-            "type": "object",
-            "description": "A multimedia slideshow component.",
-            "properties": {
-                "images": {
-                    "type": "array",
-                    "items": {
-                        "$ref": "#/$defs/multimediaImage"
-                    },
-                    "description": "An array of images to display in the slideshow.",
-                    "minItems": 1
-                },
-                "loop": {
-                    "type": "boolean",
-                    "description": "Determines whether the slideshow loops back around to the beginning when you reach the end.",
-                    "default": false
-                },
-                "caption": {
-                    "type": "text",
-                    "description": "A caption to display below the slideshow."
-                },
-                "type": {
-                    "type": "string",
-                    "enum": ["slideshow"]
-                }
-            },
-            "required": ["images", "type"]
-        },
         "dqvchartOptions": {
             "type": "object",
             "description": "Configuration for a dqvchart.",
@@ -349,7 +399,20 @@
                 "type": {
                     "type": "string",
                     "description": "The type of chart.",
-                    "enum": ["line", "spline", "area", "areaspline", "column", "bar", "pie", "scatter", "gauge", "arearange", "areasplinerange", "columnrange"]
+                    "enum": [
+                        "line",
+                        "spline",
+                        "area",
+                        "areaspline",
+                        "column",
+                        "bar",
+                        "pie",
+                        "scatter",
+                        "gauge",
+                        "arearange",
+                        "areasplinerange",
+                        "columnrange"
+                    ]
                 },
                 "width": {
                     "type": "number",
@@ -385,79 +448,80 @@
                     "description": "The title of the y-axis."
                 }
             }
-    },
-
-    "properties": {
-        "title": {
-            "type": "string",
-            "description": "The title of the story map."
         },
 
-        "introSlide": {
-            "type": "object",
-            "description": "The introductory slide",
-            "properties": {
-                "logo": {
-                    "type": "object",
-                    "description": "Information about the StoryRAMP logo",
-                    "properties": {
-                        "src": {
-                            "type": "string",
-                            "description": "An image source that is displayed at the top of the slide"
+        "properties": {
+            "title": {
+                "type": "string",
+                "description": "The title of the story map."
+            },
+
+            "introSlide": {
+                "type": "object",
+                "description": "The introductory slide",
+                "properties": {
+                    "logo": {
+                        "type": "object",
+                        "description": "Information about the StoryRAMP logo",
+                        "properties": {
+                            "src": {
+                                "type": "string",
+                                "description": "An image source that is displayed at the top of the slide"
+                            },
+                            "altText": {
+                                "type": "string",
+                                "description": "Alt text for the logo"
+                            }
                         },
-                        "altText": {
-                            "type": "string",
-                            "description": "Alt text for the logo"
-                        }
+                        "required": ["src"]
                     },
-                    "required": ["src"]
-                },
-                "title": {
-                    "type": "string",
-                    "description": "The title of the project, displayed under the image"
+                    "title": {
+                        "type": "string",
+                        "description": "The title of the project, displayed under the image"
+                    },
+                    "subtitle": {
+                        "type": "string",
+                        "description": "An optional subtitle that is displayed under the title."
+                    },
+                    "blurb": {
+                        "type": "string",
+                        "description": "Any additional information to display on the introductory slide."
+                    }
                 },
-                "subtitle": {
-                    "type": "string",
-                    "description": "An optional subtitle that is displayed under the title."
+                "required": ["logo", "title"]
+            },
+
+            "slides": {
+                "type": "array",
+                "description": "A list of StoryRAMP slides. A minimum of one slide is required.",
+                "items": {
+                    "$ref": "#/$defs/slide"
                 },
-                "blurb": {
-                    "type": "string",
-                    "description": "Any additional information to display on the introductory slide."
-                }
+                "minItems": 1
             },
-            "required": ["logo", "title"]
-        },
 
-        "slides": {
-            "type": "array",
-            "description": "A list of StoryRAMP slides. A minimum of one slide is required.",
-            "items": {
-                "$ref": "#/$defs/slide"
+            "contextLink": {
+                "type": "string",
+                "description": "A link pointing to the source information"
             },
-            "minItems": 1
-        },
 
-        "contextLink": {
-            "type": "string",
-            "description": "A link pointing to the source information"
-        },
+            "contextLabel": {
+                "type": "string",
+                "description": "A description that explains the context link."
+            },
 
-        "contextLabel": {
-            "type": "string",
-            "description": "A description that explains the context link."
-        },
+            "lang": {
+                "type": "string",
+                "description": "The language to display in the app",
+                "enum": ["en", "fr"]
+            },
 
-        "lang": {
-            "type": "string",
-            "description": "The language to display in the app",
-            "enum": ["en", "fr"]
+            "dateModified": {
+                "type": "string",
+                "description": "The last date that this config file was modified."
+            }
         },
 
-        "dateModified": {
-            "type": "string",
-            "description": "The last date that this config file was modified."
-        }
-    },
-
-    "required": ["title", "introSlide", "slides"]
+        "required": ["title", "introSlide", "slides"]
+    }
 }
diff --git a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
index 3400bb20..22cf9068 100644
--- a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
+++ b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
@@ -18,9 +18,13 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/en/NPRIpictogramme-2016data-EN__1553797637582__w1430.jpg",
                     "type": "image",
-                    "caption": "This is a caption for the image."
+                    "images": [
+                        {
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/NPRIpictogramme-2016data-EN__1553797637582__w1430.jpg",
+                            "caption": "This is a caption for the image."
+                        }
+                    ]
                 }
             ]
         },
@@ -43,8 +47,12 @@
                         {
                             "id": "panel-2",
                             "panel": {
-                                "src": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-187242601__1554821467033__w1920.jpg",
-                                "type": "image"
+                                "type": "image",
+                                "images": [
+                                    {
+                                        "src": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-187242601__1554821467033__w1920.jpg"
+                                    }
+                                ]
                             }
                         },
                         {
@@ -105,9 +113,13 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-187242601__1554821467033__w1920.jpg",
                     "type": "image",
-                    "fullscreen": false
+                    "images": [
+                        {
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-187242601__1554821467033__w1920.jpg",
+                            "fullscreen": false
+                        }
+                    ]
                 }
             ]
         },
@@ -120,8 +132,8 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/en/Slide 3 - mine vs insitu.jpg",
-                    "type": "image"
+                    "type": "image",
+                    "images": [{ "src": "00000000-0000-0000-0000-000000000000/assets/en/Slide 3 - mine vs insitu.jpg" }]
                 }
             ]
         },
@@ -151,37 +163,30 @@
                 {
                     "images": [
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/1_AuroraNorth_RelDisp.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/1_AuroraNorth_RelDisp.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/2_FortHills_RelDisp.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/2_FortHills_RelDisp.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/3_Horizon_RelDisp.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/3_Horizon_RelDisp.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/4_Kearl_RelDisp.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/4_Kearl_RelDisp.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/5_MuskegJackpine_R5_RelDisp.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/5_MuskegJackpine_R5_RelDisp.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/6_Suncor_RelDisp.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/6_Suncor_RelDisp.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/7_Syncrude_RelDisp.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/substances/7_Syncrude_RelDisp.PNG"
                         }
                     ],
                     "loop": true,
                     "caption": "NPRI substances reported for oil sands mining facilities",
-                    "type": "slideshow"
+                    "type": "image"
                 }
             ]
         },
@@ -245,8 +250,8 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/en/slide 6 - mining trends.jpg",
-                    "type": "image"
+                    "type": "image",
+                    "images": [{ "src": "00000000-0000-0000-0000-000000000000/assets/en/slide 6 - mining trends.jpg" }]
                 }
             ]
         },
@@ -259,8 +264,12 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/en/Top10SubstancesTailings2019.png",
-                    "type": "image"
+                    "type": "image",
+                    "images": [
+                        {
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/Top10SubstancesTailings2019.png"
+                        }
+                    ]
                 }
             ]
         },
@@ -275,37 +284,30 @@
                 {
                     "images": [
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/AuroraNorth_Tailings.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/AuroraNorth_Tailings.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/FortHills_Tailings.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/FortHills_Tailings.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/Horizon_Tailings.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/Horizon_Tailings.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/Kearl_Tailings.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/Kearl_Tailings.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/Muskeg_Tailings.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/Muskeg_Tailings.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/Suncor_Tailings.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/Suncor_Tailings.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/Syncrude_Tailings.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/tailings/Syncrude_Tailings.PNG"
                         }
                     ],
                     "loop": true,
                     "caption": "Reported mine tailings from oil sands surface mining facilities",
-                    "type": "slideshow"
+                    "type": "image"
                 }
             ]
         },
@@ -346,8 +348,8 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/en/Slide 10 - SAGD vs CSS.jpg",
-                    "type": "image"
+                    "type": "image",
+                    "images": [{ "src": "00000000-0000-0000-0000-000000000000/assets/en/Slide 10 - SAGD vs CSS.jpg" }]
                 }
             ]
         },
@@ -393,8 +395,12 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/en/Slide%2013%20-%20InSitu%20Trends__1554406944277__w594.jpg",
-                    "type": "image"
+                    "type": "image",
+                    "images": [
+                        {
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/Slide%2013%20-%20InSitu%20Trends__1554406944277__w594.jpg"
+                        }
+                    ]
                 }
             ]
         },
@@ -407,8 +413,12 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-516166467__1554821531978__w1920.jpg",
-                    "type": "image"
+                    "type": "image",
+                    "images": [
+                        {
+                            "src": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-516166467__1554821531978__w1920.jpg"
+                        }
+                    ]
                 }
             ]
         },
diff --git a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_fr.json b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_fr.json
index 27853ce9..d7f4ae6e 100644
--- a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_fr.json
+++ b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_fr.json
@@ -18,8 +18,12 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/fr/NPRIpictogramme-2016data-FR__1552505700147__w975.jpg",
-                    "type": "image"
+                    "type": "image",
+                    "images": [
+                        {
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/NPRIpictogramme-2016data-FR__1552505700147__w975.jpg"
+                        }
+                    ]
                 }
             ]
         },
@@ -47,8 +51,12 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/fr/GettyImages-187242601__1554821412825__w1920.jpg",
-                    "type": "image"
+                    "type": "image",
+                    "images": [
+                        {
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/GettyImages-187242601__1554821412825__w1920.jpg"
+                        }
+                    ]
                 }
             ]
         },
@@ -61,8 +69,8 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/fr/Slide 3 - mine vs insitu.jpg",
-                    "type": "image"
+                    "type": "image",
+                    "images": [{ "src": "00000000-0000-0000-0000-000000000000/assets/fr/Slide 3 - mine vs insitu.jpg" }]
                 }
             ]
         },
@@ -91,37 +99,30 @@
                 {
                     "images": [
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/substances/AuroraNorth_RelDisp_FR.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/substances/AuroraNorth_RelDisp_FR.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/substances/FortHills_RelDisp_FR.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/substances/FortHills_RelDisp_FR.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/substances/Horizon_RelDisp_FR.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/substances/Horizon_RelDisp_FR.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/substances/Kearl_RelDisp_FR.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/substances/Kearl_RelDisp_FR.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/substances/MuskegJackpine_RelDisp_FR.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/substances/MuskegJackpine_RelDisp_FR.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/substances/Suncor_RelDisp_FR.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/substances/Suncor_RelDisp_FR.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/substances/Syncrude_RelDisp_FR.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/substances/Syncrude_RelDisp_FR.PNG"
                         }
                     ],
                     "loop": true,
                     "caption": "NPRI substances reported for oil sands mining facilities",
-                    "type": "slideshow"
+                    "type": "image"
                 }
             ]
         },
@@ -187,8 +188,8 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/fr/slide 6 trends in mining.jpg",
-                    "type": "image"
+                    "type": "image",
+                    "images": [{ "src": "00000000-0000-0000-0000-000000000000/assets/fr/slide 6 trends in mining.jpg" }]
                 }
             ]
         },
@@ -201,8 +202,10 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/fr/Top10SubstancesTailings2019.png",
-                    "type": "image"
+                    "type": "image",
+                    "images": [
+                        { "src": "00000000-0000-0000-0000-000000000000/assets/fr/Top10SubstancesTailings2019.png" }
+                    ]
                 }
             ]
         },
@@ -217,37 +220,30 @@
                 {
                     "images": [
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/tailings/AuroraNorth_Tailings_FR.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/tailings/AuroraNorth_Tailings_FR.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/tailings/FortHills_Tailings_FR.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/tailings/FortHills_Tailings_FR.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/tailings/Horizon_Tailings_FR.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/tailings/Horizon_Tailings_FR.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/tailings/Kearl_Tailings_FR.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/tailings/Kearl_Tailings_FR.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/tailings/Muskeg_Tailings_FR.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/tailings/Muskeg_Tailings_FR.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/tailings/Suncor_Tailings_FR.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/tailings/Suncor_Tailings_FR.PNG"
                         },
                         {
-                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/tailings/Syncrude_Tailings_FR.PNG",
-                            "type": "image"
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/tailings/Syncrude_Tailings_FR.PNG"
                         }
                     ],
                     "loop": true,
                     "caption": "Résidus miniers déclarés à l’INRP par les installations d’exploitation minière à ciel ouvert de sables bitumineux",
-                    "type": "slideshow"
+                    "type": "image"
                 }
             ]
         },
@@ -288,8 +284,8 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/fr/Slide 10 - SAGD vs CSS.jpg",
-                    "type": "image"
+                    "type": "image",
+                    "images": [{ "src": "00000000-0000-0000-0000-000000000000/assets/fr/Slide 10 - SAGD vs CSS.jpg" }]
                 }
             ]
         },
@@ -330,8 +326,12 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/fr/Slide%2013%20Insitu%20trends%20-%20French__1554407015712__w628.jpg",
-                    "type": "image"
+                    "type": "image",
+                    "images": [
+                        {
+                            "src": "00000000-0000-0000-0000-000000000000/assets/fr/Slide%2013%20Insitu%20trends%20-%20French__1554407015712__w628.jpg"
+                        }
+                    ]
                 }
             ]
         },
@@ -344,8 +344,10 @@
                     "type": "text"
                 },
                 {
-                    "src": "00000000-0000-0000-0000-000000000000/assets/fr/slide%2014%20-%20athabasca.jpg",
-                    "type": "image"
+                    "type": "image",
+                    "images": [
+                        { "src": "00000000-0000-0000-0000-000000000000/assets/fr/slide%2014%20-%20athabasca.jpg" }
+                    ]
                 }
             ]
         }
diff --git a/src/components/editor/dynamic-editor.vue b/src/components/editor/dynamic-editor.vue
index 3c194204..6abad91b 100644
--- a/src/components/editor/dynamic-editor.vue
+++ b/src/components/editor/dynamic-editor.vue
@@ -93,6 +93,7 @@ import ImageEditorV from './image-editor.vue';
 import TextEditorV from './text-editor.vue';
 import MapEditorV from './map-editor.vue';
 import { DefaultConfigs, PanelType } from '@/definitions';
+import SlideshowEditorV from './slideshow-editor.vue';
 
 @Component({
     components: {
@@ -100,7 +101,8 @@ import { DefaultConfigs, PanelType } from '@/definitions';
         'image-editor': ImageEditorV,
         'text-editor': TextEditorV,
         'dynamic-editor': DynamicEditorV,
-        'map-editor': MapEditorV
+        'map-editor': MapEditorV,
+        'slideshow-editor': SlideshowEditorV
     }
 })
 export default class DynamicEditorV extends Vue {
@@ -109,10 +111,10 @@ export default class DynamicEditorV extends Vue {
     @Prop() lang!: string;
     @Prop() sourceCounts!: any;
 
-    editors = {
+    editors: { [key: string]: string } = {
         text: 'text-editor',
         image: 'image-editor',
-        slideshow: 'image-editor',
+        slideshow: 'slideshow-editor',
         chart: 'chart-editor',
         map: 'map-editor'
     };
@@ -130,9 +132,13 @@ export default class DynamicEditorV extends Vue {
             content: '',
             children: []
         },
+        image: {
+            type: PanelType.Image,
+            images: []
+        },
         slideshow: {
             type: PanelType.Slideshow,
-            images: []
+            items: []
         },
         chart: {
             type: PanelType.Chart,
@@ -196,7 +202,7 @@ export default class DynamicEditorV extends Vue {
                 });
                 break;
 
-            case 'slideshow':
+            case 'image':
                 panel.images.forEach((image: any) => {
                     this.sourceCounts[image.src] -= 1;
                     if (this.sourceCounts[image.src] === 0) {
@@ -204,6 +210,18 @@ export default class DynamicEditorV extends Vue {
                     }
                 });
                 break;
+
+            case 'slideshow':
+                panel.items.forEach((item: any) => {
+                    if (item.type !== 'text') {
+                        const itemSrc = item.type === 'map' ? item.config.config : item.config.src;
+                        this.sourceCounts[itemSrc] -= 1;
+                        if (this.sourceCounts[itemSrc] === 0) {
+                            this.configFileStructure.zip.remove(`${itemSrc.substring(itemSrc.indexOf('/') + 1)}`);
+                        }
+                    }
+                });
+                break;
         }
 
         // Remove the panel itself.
diff --git a/src/components/editor/helpers/image-preview.vue b/src/components/editor/helpers/image-preview.vue
index 2df7d412..b3d3e6a8 100644
--- a/src/components/editor/helpers/image-preview.vue
+++ b/src/components/editor/helpers/image-preview.vue
@@ -2,7 +2,7 @@
     <li class="image-item items-center my-8 mx-4 overflow-hidden">
         <div class="relative items-center justify-center text-center w-full grabbable">
             <button
-                class="bg-white absolute h-6 w-6 leading-5 rounded-full top-0 right-0 p-0 cursor-pointer"
+                class="delete-button bg-white absolute h-6 w-6 leading-5 rounded-full top-0 right-0 cursor-pointer"
                 @click="() => $emit('delete', imageFile)"
                 :content="$t('editor.image.delete')"
                 v-tippy="{ placement: 'top', hideOnClick: false }"
@@ -57,7 +57,7 @@ export default class ImagePreviewV extends Vue {
         height: 300px;
     }
 
-    button {
+    .delete-button {
         padding: 0 !important;
     }
 }
diff --git a/src/components/editor/image-editor.vue b/src/components/editor/image-editor.vue
index 4ae0f4fc..de751ce6 100644
--- a/src/components/editor/image-editor.vue
+++ b/src/components/editor/image-editor.vue
@@ -69,7 +69,7 @@
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator';
 import draggable from 'vuedraggable';
-import { ImagePanel, ImageFile } from '@/definitions';
+import { ImageConfig, ImageFile } from '@/definitions';
 import ImagePreviewV from '@/components/editor/helpers/image-preview.vue';
 
 @Component({
@@ -102,7 +102,7 @@ export default class ImageEditorV extends Vue {
             this.imagePreviewsLoading = true;
 
             // Process each existing image.
-            this.panel.images.map((image: ImagePanel) => {
+            this.panel.images.map((image: ImageConfig) => {
                 // Check if the config file exists in the ZIP folder first.
                 const assetSrc = `${image.src.substring(image.src.indexOf('/') + 1)}`;
                 const filename = image.src.replace(/^.*[\\/]/, '');
diff --git a/src/components/editor/metadata-editor.vue b/src/components/editor/metadata-editor.vue
index 0573b4bd..49996331 100644
--- a/src/components/editor/metadata-editor.vue
+++ b/src/components/editor/metadata-editor.vue
@@ -169,6 +169,7 @@ import {
     ChartPanel,
     DynamicChildItem,
     DynamicPanel,
+    ImageConfig,
     ImagePanel,
     MapPanel,
     Slide,
@@ -422,8 +423,8 @@ export default class MetadataEditorV extends Vue {
                     this.panelSourceHelper(subPanel.panel);
                 });
                 break;
-            case 'slideshow':
-                (panel as SlideshowPanel).images.forEach((image: ImagePanel) => {
+            case 'image':
+                (panel as ImagePanel).images.forEach((image: ImageConfig) => {
                     this.incrementSourceCount(image.src);
                 });
                 break;
@@ -432,7 +433,14 @@ export default class MetadataEditorV extends Vue {
                     this.incrementSourceCount(chart.src);
                 });
                 break;
-            case 'image':
+            case 'slideshow':
+                (panel as SlideshowPanel).items.forEach((item: any) => {
+                    if (item.type !== 'text') {
+                        const itemSrc = item.type === 'map' ? item.config.config : item.config.src;
+                        this.incrementSourceCount(itemSrc);
+                    }
+                });
+                break;
             case 'video':
             case 'audio':
                 this.incrementSourceCount((panel as AudioPanel).src);
diff --git a/src/components/editor/slide-editor.vue b/src/components/editor/slide-editor.vue
index aa83511a..99aab18a 100644
--- a/src/components/editor/slide-editor.vue
+++ b/src/components/editor/slide-editor.vue
@@ -192,11 +192,9 @@
                             :value="currentSlide.panel[panelIndex].type"
                         >
                             <option
-                                v-for="thing in Object.keys(editors).filter(
-                                    (editor) => editor !== 'slideshow' && editor !== 'loading'
-                                )"
+                                v-for="thing in Object.keys(editors).filter((editor) => editor !== 'loading')"
                                 :key="thing"
-                                :value="thing === 'image' ? 'slideshow' : thing"
+                                :value="thing"
                             >
                                 {{ thing }}
                             </option>
@@ -235,7 +233,7 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
-import { StoryRampConfig, DefaultConfigs, PanelType } from '@/definitions';
+import { StoryRampConfig, DefaultConfigs, PanelType, SlideshowItem } from '@/definitions';
 
 import Circle2 from 'vue-loading-spinner/src/components/Circle2.vue';
 import ChartEditorV from './chart-editor.vue';
@@ -245,6 +243,7 @@ import MapEditorV from './map-editor.vue';
 import LoadingPageV from './helpers/loading-page.vue';
 import DynamicEditorV from './dynamic-editor.vue';
 import ConfirmationModalV from './helpers/confirmation-modal.vue';
+import SlideshowEditorV from './slideshow-editor.vue';
 
 @Component({
     components: {
@@ -255,6 +254,7 @@ import ConfirmationModalV from './helpers/confirmation-modal.vue';
         'map-editor': MapEditorV,
         'loading-page': LoadingPageV,
         'dynamic-editor': DynamicEditorV,
+        'slideshow-editor': SlideshowEditorV,
         'confirmation-modal': ConfirmationModalV
     }
 })
@@ -274,10 +274,10 @@ export default class SlideEditorV extends Vue {
     newType = '';
     rightOnly = false;
 
-    editors = {
+    editors: { [key: string]: string } = {
         text: 'text-editor',
         image: 'image-editor',
-        slideshow: 'image-editor',
+        slideshow: 'slideshow-editor',
         chart: 'chart-editor',
         map: 'map-editor',
         loading: 'loading-page',
@@ -303,9 +303,13 @@ export default class SlideEditorV extends Vue {
                 content: this.currentSlide.panel[0] && prevType === 'text' ? this.currentSlide.panel[0].content : '',
                 children: []
             },
+            image: {
+                type: PanelType.Image,
+                images: []
+            },
             slideshow: {
                 type: PanelType.Slideshow,
-                images: []
+                items: []
             },
             chart: {
                 type: PanelType.Chart,
@@ -351,7 +355,7 @@ export default class SlideEditorV extends Vue {
                 });
                 break;
 
-            case 'slideshow':
+            case 'image':
                 panel.images.forEach((image: any) => {
                     this.sourceCounts[image.src] -= 1;
                     if (this.sourceCounts[image.src] === 0) {
@@ -360,6 +364,18 @@ export default class SlideEditorV extends Vue {
                 });
                 break;
 
+            case 'slideshow':
+                panel.items.forEach((item: any) => {
+                    if (item.type !== 'text') {
+                        const itemSrc = item.type === 'map' ? item.config.config : item.config.src;
+                        this.sourceCounts[itemSrc] -= 1;
+                        if (this.sourceCounts[itemSrc] === 0) {
+                            this.configFileStructure.zip.remove(`${itemSrc.substring(itemSrc.indexOf('/') + 1)}`);
+                        }
+                    }
+                });
+                break;
+
             case 'dynamic':
                 panel.children.forEach((subPanel: any) => {
                     this.removeSourceCounts(subPanel.panel);
diff --git a/src/components/editor/slide-toc.vue b/src/components/editor/slide-toc.vue
index e9b5d654..a58c52fa 100644
--- a/src/components/editor/slide-toc.vue
+++ b/src/components/editor/slide-toc.vue
@@ -222,7 +222,7 @@ export default class SlideTocV extends Vue {
                 });
                 break;
 
-            case 'slideshow':
+            case 'image':
                 panel.images.forEach((image: any) => {
                     this.sourceCounts[image.src] -= 1;
                     if (this.sourceCounts[image.src] === 0) {
@@ -231,6 +231,18 @@ export default class SlideTocV extends Vue {
                 });
                 break;
 
+            case 'slideshow':
+                panel.items.forEach((item: any) => {
+                    if (item.type !== 'text') {
+                        const itemSrc = item.type === 'map' ? item.config.config : item.config.src;
+                        this.sourceCounts[itemSrc] -= 1;
+                        if (this.sourceCounts[itemSrc] === 0) {
+                            this.configFileStructure.zip.remove(`${itemSrc.substring(itemSrc.indexOf('/') + 1)}`);
+                        }
+                    }
+                });
+                break;
+
             case 'dynamic':
                 panel.children.forEach((subPanel: any) => {
                     this.removeSourceCounts(subPanel.panel);
diff --git a/src/components/editor/slideshow-editor.vue b/src/components/editor/slideshow-editor.vue
new file mode 100644
index 00000000..d447e2a9
--- /dev/null
+++ b/src/components/editor/slideshow-editor.vue
@@ -0,0 +1,519 @@
+<template>
+    <div class="block">
+        <div class="flex items-center w-full text-left">
+            <label class="text-label">Slideshow Caption:</label>
+            <input class="w-1/3" type="text" v-model="panel.caption" @change="onItemsEdited" />
+        </div>
+        <!-- Menu with option to add a new item -->
+        <div class="flex items-center mt-5">
+            <span class="font-bold">{{
+                $t('editor.slideshow.label.info', {
+                    num: panel.items.length
+                })
+            }}</span>
+            <!-- add item button -->
+            <button class="bg-gray-100 cursor-pointer hover:bg-gray-200" id="modal-btn" @click="openAddModal()">
+                <div class="flex items-center">
+                    <svg height="18px" width="18px" viewBox="0 0 23 21" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
+                    </svg>
+                    <span class="px-2">
+                        {{ $t('editor.slideshow.label.create') }}
+                    </span>
+                </div>
+            </button>
+        </div>
+        <hr class="border-solid border-t-2 border-gray-300 my-2" />
+
+        <table class="w-2/3 mt-5">
+            <thead>
+                <tr class="table-header">
+                    <th></th>
+                    <th>Item Type</th>
+                    <th>Item Actions</th>
+                </tr>
+            </thead>
+            <draggable v-model="panel.items" @update="onItemsEdited" :element="'tbody'">
+                <tr class="table-contents" v-for="(item, idx) in panel.items" :key="idx">
+                    <td>{{ idx + 1 }}.</td>
+                    <td>{{ item.type }}</td>
+                    <td>
+                        <span @click="editItem(idx)" class="underline">Edit</span>
+                        |
+                        <span @click="deleteItem(idx)" class="underline">Remove</span>
+                    </td>
+                </tr>
+            </draggable>
+        </table>
+
+        <div v-if="editingIdx !== -1 && !filesLoading" :key="editingIdx">
+            <br />
+            <hr />
+            <br />
+            <span class="font-bold text-xl">Item Editor:</span><br />
+            <component
+                v-if="panel.items[editingIdx].type === 'map' || panel.items[editingIdx].type === 'text'"
+                ref="slide"
+                :is="editors[panel.items[editingIdx].type]"
+                :key="editingIdx + panel.items[editingIdx].type"
+                :panel="panel.items[editingIdx].config"
+                :configFileStructure="configFileStructure"
+                :lang="lang"
+                :sourceCounts="sourceCounts"
+            ></component>
+            <div v-else-if="panel.items[editingIdx].type === 'chart'">
+                <div class="chart-editor my-5" id="edit-chart"></div>
+            </div>
+            <div v-else>
+                <!-- only display an image preview if one is provided.-->
+                <div class="my-4" v-if="!!imageSrcs[editingIdx]">
+                    <label>{{ $t('editor.slideshow.label.imagePreview') }}:</label>
+                    <img class="image-preview" :src="imageSrcs[editingIdx]" />
+                </div>
+                <label>{{ $t('editor.slideshow.label.image') }}:</label>
+                <input type="text" disabled :value="getImageFileName()" class="w-1/4" />
+                <button @click.stop="openFileSelector" class="bg-black text-white hover:bg-gray-800">
+                    {{ $t('editor.browse') }}
+                </button>
+                <!-- hide the actual file input -->
+                <input type="file" id="imageUpload" @change="onImageChange" class="w-1/4" style="display: none" />
+                <div class="flex mt-4 items-center w-full text-left">
+                    <label class="text-label">Alt tag:</label>
+                    <input
+                        class="w-1/4"
+                        type="text"
+                        v-model="
+                            //@ts-expect-error
+                            panel.items[editingIdx].config.altText
+                        "
+                        @change="onItemsEdited"
+                    />
+                </div>
+
+                <div class="flex mt-4 items-center w-full text-left">
+                    <label class="text-label">Caption:</label>
+                    <input
+                        class="w-1/4"
+                        type="text"
+                        v-model="
+                            //@ts-expect-error
+                            panel.items[editingIdx].config.caption
+                        "
+                        @change="onItemsEdited"
+                    />
+                </div>
+            </div>
+        </div>
+
+        <vue-modal name="add-slideshow-item" :outer-close="false" size="xlg">
+            <h2 slot="header" class="text-xl font-bold">{{ $t('editor.slideshow.label.create') }}</h2>
+            <div>
+                <label class="mb-5">{{ $t('editor.slideshow.label.type') }}:</label>
+                <select @input="onTypeInput" :value="newType">
+                    <option v-for="thing in Object.keys(editors)" :key="thing" :value="thing">
+                        {{ thing }}
+                    </option>
+                </select>
+                <br />
+                <div v-if="newType === 'chart'">
+                    <div class="flex flex-row items-center">
+                        <label class="text-left mt-2">Chart config file name*:</label>
+                        <input type="text" v-model="newFileName" />.json
+                    </div>
+                    <label class="text-left my-2">Chart config editor:</label>
+                    <div class="chart-editor" id="add-chart"></div>
+                </div>
+                <component
+                    v-else
+                    ref="addEditor"
+                    :is="editors[newType]"
+                    :key="newType"
+                    :panel="JSON.parse(JSON.stringify(startingConfig[newType]))"
+                    :configFileStructure="configFileStructure"
+                    :lang="lang"
+                    :sourceCounts="sourceCounts"
+                ></component>
+            </div>
+            <div class="mt-3 w-full flex justify-end">
+                <button class="bg-black text-white hover:bg-gray-800" @click="addItem()">Add</button>
+            </div>
+        </vue-modal>
+    </div>
+</template>
+
+<script lang="ts">
+import {
+    ChartConfig,
+    DQVChartConfig,
+    ImageConfig,
+    LineSeriesData,
+    MapConfig,
+    PieDataRow,
+    PieSeriesData,
+    SlideshowPanel
+} from '@/definitions';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import ChartEditorV from './chart-editor.vue';
+import ImageEditorV from './image-editor.vue';
+import MapEditorV from './map-editor.vue';
+import TextEditorV from './text-editor.vue';
+import ConfirmationModalV from './helpers/confirmation-modal.vue';
+import draggable from 'vuedraggable';
+import ImagePreviewV from './helpers/image-preview.vue';
+import ChartPreviewV from './helpers/chart-preview.vue';
+
+@Component({
+    components: {
+        'chart-editor': ChartEditorV,
+        'image-editor': ImageEditorV,
+        'text-editor': TextEditorV,
+        'map-editor': MapEditorV,
+        'confirmation-modal': ConfirmationModalV,
+        draggable,
+        'chart-preview': ChartPreviewV,
+        'image-preview': ImagePreviewV
+    }
+})
+export default class SlideshowEditorV extends Vue {
+    @Prop() panel!: SlideshowPanel;
+    @Prop() configFileStructure!: any;
+    @Prop() lang!: string;
+    @Prop() sourceCounts!: any;
+
+    dragging = false;
+    edited = false;
+
+    $modals: any;
+
+    editingIdx = -1;
+    newType: 'text' | 'image' | 'chart' | 'map' = 'text';
+    newFileName = '';
+
+    imageSrcs: { [index: number]: string } = {};
+    slideshowCaption = '';
+
+    startingConfig = {
+        text: {
+            type: 'text',
+            title: '',
+            content: ''
+        },
+        image: {
+            type: 'image',
+            images: []
+        },
+        map: {
+            type: 'map',
+            config: '',
+            title: '',
+            scrollguard: false
+        }
+    };
+
+    editors: { [key: string]: string } = {
+        text: 'text-editor',
+        image: 'image-editor',
+        map: 'map-editor',
+        chart: ''
+    };
+
+    filesLoading = false;
+    filePromises: Array<Promise<void>> = [];
+
+    chartConfigs: { [index: number]: DQVChartConfig } = {};
+    chartEditor: any = {};
+
+    get isDragging(): boolean {
+        return this.dragging;
+    }
+
+    mounted() {
+        this.filesLoading = true;
+        this.panel.items.forEach((item, idx) => {
+            if (item.type === 'image') {
+                const assetSrc = `${(item.config as ImageConfig).src.substring(
+                    (item.config as ImageConfig).src.indexOf('/') + 1
+                )}`;
+
+                this.filePromises.push(
+                    this.configFileStructure.zip
+                        .file(assetSrc)
+                        .async('blob')
+                        .then((res: any) => {
+                            this.imageSrcs[idx] = URL.createObjectURL(res);
+                        })
+                );
+            } else if (item.type === 'chart') {
+                const assetSrc = `${(item.config as ChartConfig).src.substring(
+                    (item.config as ChartConfig).src.indexOf('/') + 1
+                )}`;
+                this.filePromises.push(
+                    this.configFileStructure.zip
+                        .file(assetSrc)
+                        .async('string')
+                        .then((res: any) => {
+                            this.chartConfigs[idx] = JSON.parse(res);
+                        })
+                );
+            }
+        });
+
+        Promise.all(this.filePromises).then(() => {
+            this.filesLoading = false;
+        });
+    }
+
+    openAddModal() {
+        this.editingIdx = -1;
+        this.newFileName = '';
+        this.$modals.show('add-slideshow-item');
+        if (this.newType === 'chart') {
+            this.initChartEditor('add-chart');
+        }
+    }
+
+    onTypeInput(e: any) {
+        this.newType = e.target.value;
+        if (this.newType === 'chart') {
+            this.initChartEditor('add-chart');
+        }
+    }
+
+    initChartEditor(el: string, config?: DQVChartConfig) {
+        const watcher = setInterval(() => {
+            clearInterval(watcher);
+            this.chartEditor = highed.Editor(el, {
+                allowDone: true,
+                features: 'import templates customize done',
+                importer: {
+                    options: 'plugins csv json'
+                },
+                defaultChartOptions: config ?? {
+                    title: {
+                        text: `New Chart`
+                    },
+                    subtitle: {
+                        text: ''
+                    },
+                    credits: {
+                        enabled: false
+                    }
+                }
+            });
+            this.chartEditor.chart.options.setAll(config);
+
+            // resets and clears datatable section
+            if (!config) {
+                const defaultTableData = `"Column 1";"Column 2"\n" "";" "`;
+                this.chartEditor.dataTable.loadCSV({ csv: defaultTableData });
+            } else if (config.data?.csv !== undefined) {
+                const csvData = config.data.csv;
+                this.chartEditor.dataTable.loadCSV({ csv: csvData });
+            } else {
+                if (config.chart?.type === 'pie') {
+                    const seriesData = (config?.series as PieSeriesData).data;
+                    if (seriesData) {
+                        // pie charts only have one set of series data with the name;y format
+                        const csvData = [
+                            // first row is attempt to extract data labels if exists
+                            `${(config?.series as PieSeriesData).name};${config?.yAxis?.title.text}`,
+                            ...seriesData.map((row: PieDataRow) => `${row.name};${row.y}`)
+                        ];
+
+                        // load formatted CSV string into datatable
+                        this.chartEditor.dataTable.loadCSV({ csv: csvData.join('\n') });
+                    }
+                } else {
+                    if (config?.series && (config?.series as LineSeriesData[]).length) {
+                        // other chart types may have multiple sets of series data along with x-axis categories
+                        // append series data name to its data set
+                        let seriesData = (config?.series as LineSeriesData[]).map((series: LineSeriesData) => [
+                            series.name,
+                            ...series.data
+                        ]);
+                        if (config.xAxis !== undefined) {
+                            // add xAxis categories to series data if it exists
+                            const catoData = [config.xAxis?.title?.text].concat(config.xAxis?.categories);
+                            seriesData.unshift(catoData);
+                        }
+
+                        // join series data together
+                        let csvData = seriesData[0].map((_, idx) => seriesData.map((data) => data[idx]).join(';'));
+
+                        // load formatted CSV string into datatable
+                        this.chartEditor.dataTable.loadCSV({ csv: csvData.join('\n') });
+                    }
+                }
+            }
+
+            this.chartEditor.resize();
+        }, 1000);
+    }
+
+    addItem() {
+        let itemConf;
+        switch (this.newType) {
+            case 'text': {
+                itemConf = (this.$refs.addEditor as any).panel;
+                delete itemConf.type;
+                this.panel.items.push({
+                    type: 'text',
+                    config: itemConf
+                });
+                break;
+            }
+            case 'map': {
+                itemConf = (this.$refs.addEditor as any).panel;
+                delete itemConf.type;
+                this.panel.items.push({
+                    type: 'map',
+                    config: itemConf
+                });
+                break;
+            }
+            case 'image': {
+                itemConf = (this.$refs.addEditor as any).imagePreviews;
+                let idx: number = this.panel.items.length;
+                this.panel.items = this.panel.items.concat(
+                    itemConf.map((imgConf: any) => {
+                        this.imageSrcs[idx] = imgConf.src;
+                        idx += 1;
+                        imgConf.src = `${this.configFileStructure.uuid}/assets/${this.lang}/${imgConf.id}`;
+                        delete imgConf.id;
+                        return { type: 'image', config: imgConf };
+                    })
+                );
+                console.log(this.imageSrcs);
+                break;
+            }
+            case 'chart': {
+                itemConf = this.chartEditor.getEmbeddableJSON();
+                const chartSrc = `${this.configFileStructure.uuid}/charts/${this.lang}/${this.newFileName}.json`;
+                if (this.sourceCounts[chartSrc]) {
+                    this.sourceCounts[chartSrc] += 1;
+                } else {
+                    this.sourceCounts[chartSrc] = 1;
+                }
+
+                // Add chart config to ZIP file.
+                this.configFileStructure.charts[this.lang].file(
+                    `${this.newFileName}.json`,
+                    JSON.stringify(itemConf, null, 4)
+                );
+                this.panel.items.push({
+                    type: 'chart',
+                    config: { src: chartSrc }
+                });
+                this.chartConfigs[this.panel.items.length - 1] = itemConf;
+                break;
+            }
+        }
+        this.$modals.hide('add-slideshow-item');
+        this.onItemsEdited();
+    }
+
+    deleteItem(idx: number) {
+        const itemToDelete = this.panel.items[idx];
+        if (itemToDelete.type !== 'text') {
+            let fileSrc =
+                itemToDelete.type === 'map'
+                    ? (itemToDelete.config as MapConfig).config
+                    : (itemToDelete.config as ImageConfig).src;
+
+            // Remove the image from the product ZIP file.
+            this.sourceCounts[fileSrc] -= 1;
+            if (this.sourceCounts[fileSrc] === 0) {
+                this.configFileStructure.zip.remove(`${fileSrc.substring(fileSrc.indexOf('/') + 1)}`);
+            }
+        }
+        if (idx < this.editingIdx) {
+            this.editingIdx -= 1;
+        } else if (idx === this.editingIdx) {
+            this.editingIdx = -1;
+        }
+        this.panel.items.splice(idx, 1);
+    }
+
+    editItem(idx: number) {
+        this.saveChanges();
+        this.editingIdx = idx;
+        if (this.panel.items[this.editingIdx].type === 'chart') {
+            this.initChartEditor('edit-chart', this.chartConfigs[this.editingIdx]);
+        }
+    }
+
+    saveChanges() {
+        // save the current chart file if one is being edited, so that changes to the chart are not lost
+        if (this.editingIdx !== -1 && this.panel.items[this.editingIdx].type === 'chart') {
+            const chartConf = this.chartEditor.getEmbeddableJSON();
+            const fileSrc = (this.panel.items[this.editingIdx].config as ChartConfig).src;
+            const fileName = fileSrc.slice(fileSrc.lastIndexOf('/') + 1);
+            // Add chart config to ZIP file.
+            this.configFileStructure.charts[this.lang].file(fileName, JSON.stringify(chartConf, null, 4));
+            this.chartConfigs[this.editingIdx] = chartConf;
+        }
+    }
+
+    onImageChange(e: Event): void {
+        // Retrieve the uploaded file.
+        const uploadedFile = ((e.target as HTMLInputElement).files as ArrayLike<File>)[0];
+
+        // Add the uploaded images to the product ZIP file.
+        const uploadSource = `${this.configFileStructure.uuid}/assets/${this.lang}/${uploadedFile.name}`;
+        this.configFileStructure.assets[this.lang].file(uploadedFile.name, uploadedFile);
+
+        if (this.sourceCounts[uploadSource]) {
+            this.sourceCounts[uploadSource] += 1;
+        } else {
+            this.sourceCounts[uploadSource] = 1;
+        }
+
+        // Remove previous file if necessary
+        const currentSource = (this.panel.items[this.editingIdx].config as ImageConfig).src;
+        this.sourceCounts[currentSource] -= 1;
+        if (this.sourceCounts[currentSource] === 0) {
+            this.configFileStructure.assets[this.lang].remove(this.getImageFileName());
+            URL.revokeObjectURL(this.imageSrcs[this.editingIdx]);
+        }
+
+        // Set new image as current image
+        this.imageSrcs[this.editingIdx] = URL.createObjectURL(uploadedFile);
+        (this.panel.items[this.editingIdx].config as ImageConfig).src = uploadSource;
+    }
+
+    getImageFileName(): string {
+        const fileSrc = (this.panel.items[this.editingIdx].config as ImageConfig).src;
+        return fileSrc.slice(fileSrc.lastIndexOf('/') + 1);
+    }
+
+    openFileSelector(): void {
+        (this.$el.querySelector('#imageUpload') as HTMLElement).click();
+    }
+
+    onItemsEdited(): void {
+        this.edited = true;
+        this.$parent.$emit('slide-edit');
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+label {
+    text-align: left !important;
+    width: fit-content !important;
+}
+
+select {
+    border: 1px black solid;
+    background: white;
+    padding: 0.25rem 0.5rem;
+}
+
+.chart-editor {
+    height: 59vh;
+}
+
+.save-chart-button {
+    margin: 0 !important;
+}
+</style>
diff --git a/src/components/editor/text-editor.vue b/src/components/editor/text-editor.vue
index 937e5ebe..64bb9e81 100644
--- a/src/components/editor/text-editor.vue
+++ b/src/components/editor/text-editor.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="flex flex-col mt-4">
-        <label class="text-left">Panel title:</label>
+        <label class="text-left">Title:</label>
         <input type="text" v-model="panel.title" />
-        <label class="text-left mt-2">Panel body:</label>
+        <label class="text-left mt-2">Body:</label>
         <v-md-editor
             v-model="panel.content"
             height="400px"
diff --git a/src/components/panels/image-panel.vue b/src/components/panels/image-panel.vue
index dbcbeca4..347e76f6 100644
--- a/src/components/panels/image-panel.vue
+++ b/src/components/panels/image-panel.vue
@@ -1,40 +1,83 @@
 <template>
-    <div class="graphic self-start justify-center flex flex-col h-full align-middle py-5 w-full">
-        <full-screen :expandable="config.fullscreen" :type="config.type">
-            <img
-                ref="img"
-                :src="slideIdx > 2 ? '' : config.src"
-                :class="config.class"
-                :alt="config.altText || ''"
-                :style="{ width: `${config.width}px`, height: `${config.height}px` }"
-                class="graphic-image px-10 mx-auto my-6 flex object-contain sm:max-w-screen sm:max-h-screen"
-            />
-        </full-screen>
+    <div v-if="config.images.length === 1">
+        <div class="graphic self-start justify-center flex flex-col h-full align-middle py-5 w-full">
+            <full-screen :expandable="config.images[0].fullscreen" :type="config.type">
+                <img
+                    ref="img"
+                    :src="slideIdx > 2 ? '' : config.images[0].src"
+                    :class="config.images[0].class"
+                    :alt="config.images[0].altText || ''"
+                    :style="{ width: `${config.images[0].width}px`, height: `${config.images[0].height}px` }"
+                    class="graphic-image px-10 mx-auto my-6 flex object-contain sm:max-w-screen sm:max-h-screen"
+                />
+            </full-screen>
 
+            <div
+                v-if="config.images[0].caption"
+                class="text-center text-sm max-w-full graphic-caption"
+                v-html="md.render(config.images[0].caption)"
+            ></div>
+        </div>
+    </div>
+    <div class="flex" v-else>
         <div
-            v-if="config.caption"
-            class="text-center text-sm max-w-full graphic-caption"
-            v-html="md.render(config.caption)"
-        ></div>
+            ref="images"
+            class="carousel self-center px-10 my-8 mx-auto bg-gray-200_ h-28_"
+            :style="{ width: `${width}px` }"
+        >
+            <full-screen :expandable="config.fullscreen" :type="config.type">
+                <hooper ref="carousel" v-if="width !== -1" class="h-full bg-white" :infiniteScroll="config.loop">
+                    <slide v-for="(image, index) in config.images" :key="index" :index="index" class="self-center">
+                        <img
+                            :data-src="image.src"
+                            :src="slideIdx > 2 ? '' : image.src"
+                            :alt="image.altText || ''"
+                            :style="{ width: `${image.width}px`, height: `${image.height}px` }"
+                            class="m-auto story-graphic carousel-image"
+                        />
+                        <div
+                            v-if="image.caption"
+                            class="text-center my-8 text-sm"
+                            v-html="md.render(image.caption)"
+                        ></div>
+                    </slide>
+
+                    <hooper-navigation slot="hooper-addons"></hooper-navigation>
+                    <hooper-pagination slot="hooper-addons"></hooper-pagination>
+                </hooper>
+            </full-screen>
+
+            <div v-if="config.caption" class="text-center mt-5 text-sm" v-html="md.render(config.caption)"></div>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
-import { ImagePanel } from '@/definitions';
 import { Component, Vue, Prop } from 'vue-property-decorator';
+import { Hooper, Slide, Navigation as HooperNavigation, Pagination as HooperPagination } from 'hooper';
+import 'hooper/dist/hooper.css';
 
 import MarkdownIt from 'markdown-it';
+
+import { ImagePanel } from '@/definitions';
 import FullscreenV from '@/components/panels/helpers/fullscreen.vue';
 
 @Component({
     components: {
-        'full-screen': FullscreenV
+        Hooper,
+        Slide,
+        'full-screen': FullscreenV,
+        HooperNavigation,
+        HooperPagination
     }
 })
-export default class ImagePanelV extends Vue {
+export default class SlideshowPanelV extends Vue {
     @Prop() config!: ImagePanel;
+    @Prop() configFileStructure!: any;
     @Prop() slideIdx!: number;
 
+    width = -1;
+
     md = new MarkdownIt({ html: true });
 
     observer =
@@ -42,7 +85,13 @@ export default class ImagePanelV extends Vue {
             ? new IntersectionObserver(([image]) => {
                   // lazy load images
                   if (image.isIntersecting) {
-                      (this.$refs.img as Element).setAttribute('src', this.config.src);
+                      if (this.config.images.length === 1) {
+                          (this.$refs.img as Element).setAttribute('src', this.config.images[0].src);
+                      } else {
+                          (this.$refs.images as Element).querySelectorAll('.carousel-image').forEach((img) => {
+                              img.setAttribute('src', img.getAttribute('data-src')!);
+                          });
+                      }
                       this.$forceUpdate();
                       this.observer!.disconnect();
                   }
@@ -50,13 +99,87 @@ export default class ImagePanelV extends Vue {
             : undefined;
 
     mounted(): void {
-        this.observer?.observe(this.$refs.img as Element);
+        setTimeout(() => {
+            this.width = this.$el.clientWidth;
+        }, 100);
+
+        // obtain image files from ZIP folder in editor preview mode
+        if (this.configFileStructure) {
+            this.config.images.forEach((image) => {
+                const assetSrc = `${image.src.substring(image.src.indexOf('/') + 1)}`;
+                if (this.configFileStructure.zip.file(assetSrc)) {
+                    this.configFileStructure.zip
+                        .file(assetSrc)
+                        .async('blob')
+                        .then((res: any) => {
+                            image.src = URL.createObjectURL(res);
+                            this.$forceUpdate();
+                        });
+                }
+            });
+        }
+
+        if (this.config.images.length > 1) {
+            this.observer?.observe(this.$refs.images as Element);
+        } else if (this.config.images.length === 1) {
+            this.observer?.observe(this.$refs.img as Element);
+        }
     }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
+.hooper {
+    height: auto;
+
+    ::v-deep .hooper-navigation svg {
+        overflow: visible;
+        padding-left: initial !important;
+        border-radius: 100%;
+        background: radial-gradient(white, transparent 75%);
+    }
+
+    ::v-deep .hooper-next {
+        right: calc(-32px - 2em);
+    }
+
+    ::v-deep .hooper-prev {
+        left: calc(-32px - 2em);
+    }
+
+    ::v-deep .hooper-pagination {
+        transform: translate(50%, 200%);
+    }
+
+    ::v-deep .hooper-indicator {
+        border: 1px solid #878787;
+
+        width: 24px;
+        height: 6px;
+        border-radius: 0px;
+
+        &.is-active {
+            border: none;
+            background-color: var(--sr-accent-colour);
+        }
+
+        &:hover {
+            background-color: white;
+            // background-color: lighten(#00d2d3, 20%);
+            border-color: var(--sr-accent-colour);
+        }
+    }
+}
+
 @media screen and (max-width: 640px) {
+    .carousel {
+        max-width: 100vw;
+        background-color: white;
+    }
+    .carousel-image {
+        max-height: 48vh;
+    }
+
     .graphic {
         max-width: 100vw;
         background-color: white;
diff --git a/src/components/panels/slideshow-panel.vue b/src/components/panels/slideshow-panel.vue
index 325e28d3..d73883a4 100644
--- a/src/components/panels/slideshow-panel.vue
+++ b/src/components/panels/slideshow-panel.vue
@@ -1,38 +1,28 @@
 <template>
-    <div v-if="config.images.length === 1">
-        <image-panel
-            :config="config.images[0]"
-            :configFileStructure="configFileStructure"
-            :key="config.images[0].src"
-        ></image-panel>
-    </div>
-    <div class="flex" v-else>
-        <div
-            ref="images"
-            class="carousel self-center px-10 my-8 mx-auto bg-gray-200_ h-28_"
-            :style="{ width: `${width}px` }"
-        >
-            <full-screen :expandable="config.fullscreen" :type="config.type">
-                <hooper ref="carousel" v-if="width !== -1" class="h-full bg-white" :infiniteScroll="config.loop">
-                    <slide v-for="(image, index) in config.images" :key="index" :index="index" class="self-center">
-                        <img
-                            :data-src="image.src"
-                            :src="slideIdx > 2 ? '' : image.src"
-                            :alt="image.altText || ''"
-                            :style="{ width: `${image.width}px`, height: `${image.height}px` }"
-                            class="m-auto story-graphic carousel-image"
-                        />
-                        <div
-                            v-if="image.caption"
-                            class="text-center my-8 text-sm"
-                            v-html="md.render(image.caption)"
-                        ></div>
-                    </slide>
-
-                    <hooper-navigation slot="hooper-addons"></hooper-navigation>
-                    <hooper-pagination slot="hooper-addons"></hooper-pagination>
-                </hooper>
-            </full-screen>
+    <div class="flex">
+        <div class="carousel self-center px-10 my-8 mx-auto bg-gray-200_" :style="{ width: `${width}px` }">
+            <hooper
+                ref="carousel"
+                v-if="width !== -1 && config.items.length > 1"
+                class="h-full"
+                :infiniteScroll="config.loop"
+            >
+                <slide
+                    v-for="(panelConfig, index) in panelConfigs"
+                    :key="`item-${index}`"
+                    :index="index"
+                    class="self-center"
+                >
+                    <panel :config="panelConfig" :configFileStructure="configFileStructure" :slideIdx="slideIdx" />
+                </slide>
+
+                <hooper-navigation slot="hooper-addons"></hooper-navigation>
+                <hooper-pagination slot="hooper-addons"></hooper-pagination>
+            </hooper>
+
+            <div v-else-if="width !== -1">
+                <panel :config="panelConfigs[0]" :configFileStructure="configFileStructure" :slideIdx="slideIdx" />
+            </div>
 
             <div v-if="config.caption" class="text-center mt-5 text-sm" v-html="md.render(config.caption)"></div>
         </div>
@@ -48,7 +38,6 @@ import MarkdownIt from 'markdown-it';
 
 import { SlideshowPanel } from '@/definitions';
 import FullscreenV from '@/components/panels/helpers/fullscreen.vue';
-import ImagePanelV from '@/components/panels/image-panel.vue';
 
 @Component({
     components: {
@@ -57,7 +46,7 @@ import ImagePanelV from '@/components/panels/image-panel.vue';
         'full-screen': FullscreenV,
         HooperNavigation,
         HooperPagination,
-        'image-panel': ImagePanelV
+        panel: () => import('./panel.vue')
     }
 })
 export default class SlideshowPanelV extends Vue {
@@ -65,48 +54,24 @@ export default class SlideshowPanelV extends Vue {
     @Prop() configFileStructure!: any;
     @Prop() slideIdx!: number;
 
-    width = -1;
-
     md = new MarkdownIt({ html: true });
+    panelConfigs: Array<any> = [];
 
-    observer =
-        this.slideIdx > 2
-            ? new IntersectionObserver(([image]) => {
-                  // lazy load images
-                  if (image.isIntersecting) {
-                      (this.$refs.images as Element).querySelectorAll('.carousel-image').forEach((img) => {
-                          img.setAttribute('src', img.getAttribute('data-src')!);
-                      });
-                      this.$forceUpdate();
-                      this.observer!.disconnect();
-                  }
-              })
-            : undefined;
+    width = -1;
 
     mounted(): void {
+        this.panelConfigs = this.config.items.map((item) => {
+            let panelConfig: any = { ...item.config, type: item.type };
+            if (item.type === 'chart') {
+                panelConfig.charts = [item.config];
+            } else if (item.type === 'image') {
+                panelConfig.images = [item.config];
+            }
+            return panelConfig;
+        });
         setTimeout(() => {
             this.width = this.$el.clientWidth;
         }, 100);
-
-        // obtain image files from ZIP folder in editor preview mode
-        if (this.configFileStructure) {
-            this.config.images.forEach((image) => {
-                const assetSrc = `${image.src.substring(image.src.indexOf('/') + 1)}`;
-                if (this.configFileStructure.zip.file(assetSrc)) {
-                    this.configFileStructure.zip
-                        .file(assetSrc)
-                        .async('blob')
-                        .then((res: any) => {
-                            image.src = URL.createObjectURL(res);
-                            this.$forceUpdate();
-                        });
-                }
-            });
-        }
-
-        if (this.config.images.length > 1) {
-            this.observer?.observe(this.$refs.images as Element);
-        }
     }
 }
 </script>
@@ -162,5 +127,13 @@ export default class SlideshowPanelV extends Vue {
     .carousel-image {
         max-height: 48vh;
     }
+
+    .graphic {
+        max-width: 100vw;
+        background-color: white;
+    }
+    .graphic-image {
+        max-height: 38vh;
+    }
 }
 </style>
diff --git a/src/definitions.ts b/src/definitions.ts
index a7c9741a..c495fada 100644
--- a/src/definitions.ts
+++ b/src/definitions.ts
@@ -112,21 +112,28 @@ export interface BasePanel {
     width?: number;
 }
 
-export interface TextPanel extends BasePanel {
+export interface TextPanel extends BasePanel, TextConfig {
     type: PanelType.Text;
+}
+
+export interface TextConfig {
     title: string;
     titleTag?: string;
     content: string; // in md format
 }
 
-export interface MapPanel extends BasePanel {
+export interface MapPanel extends BasePanel, MapConfig {
     type: PanelType.Map;
+}
+
+export interface MapConfig {
     config: string;
     fullscreen?: boolean;
     timeSlider?: TimeSliderConfig;
     title: string;
     scrollguard: boolean;
 }
+
 export interface TimeSliderConfig {
     range: number[];
     start: number[];
@@ -149,6 +156,13 @@ export interface DynamicChildItem {
 
 export interface ImagePanel extends BasePanel {
     type: PanelType.Image;
+    images: Array<ImageConfig>;
+    fullscreen?: boolean;
+    loop?: boolean;
+    caption?: string;
+}
+
+export interface ImageConfig {
     src: string;
     width?: number;
     height?: number;
@@ -176,12 +190,17 @@ export interface AudioPanel extends BasePanel {
 
 export interface SlideshowPanel extends BasePanel {
     type: PanelType.Slideshow;
-    images: ImagePanel[];
+    items: Array<SlideshowItem>;
     fullscreen?: boolean;
     loop?: boolean;
     caption?: string;
 }
 
+export interface SlideshowItem {
+    type: string;
+    config: ImageConfig | ChartConfig | MapConfig | TextConfig;
+}
+
 export interface ChartPanel extends BasePanel {
     type: PanelType.Chart;
     charts: ChartConfig[];
@@ -207,6 +226,7 @@ export interface ImageFile {
 
 export interface DefaultConfigs {
     text: TextPanel;
+    image: ImagePanel;
     slideshow: SlideshowPanel;
     chart: ChartPanel;
     dynamic: DynamicPanel;
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index 6414c0cb..7e81e797 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -51,6 +51,11 @@ editor.chart.label.empty,Empty,1,Vide,1
 editor.chart.label.create,Add new chart,1,Add new chart,0
 editor.chart.label.info,Interactive charts ({num}),1,Interactive charts ({num}),0
 editor.chart.delete.confirm,Are you sure you want to delete the chart {name}?,1,Are you sure you want to delete the chart {name}?,0
+editor.slideshow.label.info,Slideshow items ({num}),1,Slideshow items ({num}),0
+editor.slideshow.label.create,Add new item,1,Add new item,0
+editor.slideshow.label.type,Type,1,Type,0
+editor.slideshow.label.imagePreview,Image Preview,1,Image Preview,0
+editor.slideshow.label.image,Image,1,Image,0
 editor.map.label.create,Create New Configuration File,1,Create New Configuration File,0
 editor.map.label.edit,Edit Map Configuration,1,Edit Map Configuration,0
 editor.map.timeslider.enable,Enable Time Slider:,1,Enable Time Slider:,0
diff --git a/src/style.css b/src/style.css
index 6196d804..6abdbd26 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2,3 +2,8 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+#wb-cont {
+    position: relative;
+    z-index: 10;
+}