diff --git a/src/components/editor/chart-editor.vue b/src/components/editor/chart-editor.vue
index 56944770..0dd1da46 100644
--- a/src/components/editor/chart-editor.vue
+++ b/src/components/editor/chart-editor.vue
@@ -12,6 +12,7 @@
                 class="chart-btn bg-gray-100 cursor-pointer hover:bg-gray-200"
                 id="modal-btn"
                 @click="clearEditor()"
+                :disabled="!allowMany && chartConfigs.length > 0"
             >
                 <div class="flex items-center">
                     <svg height="18px" width="18px" viewBox="0 0 23 21" xmlns="http://www.w3.org/2000/svg">
@@ -44,6 +45,8 @@
                         :key="`${element.name}-${index}`"
                         :chart="element"
                         :configFileStructure="configFileStructure"
+                        :sourceCounts="sourceCounts"
+                        :lang="lang"
                         @edit="editChart"
                         @delete="$vfm.open(`${element.name}-${index}`)"
                     ></ChartPreview>
@@ -62,11 +65,18 @@
 
 <script lang="ts">
 import { Options, Prop, Vue } from 'vue-property-decorator';
-import { ChartConfig, ChartPanel, ConfigFileStructure, Highchart, SourceCounts } from '@/definitions';
+import {
+    ChartConfig,
+    ChartPanel,
+    ConfigFileStructure,
+    Highchart,
+    PanelType,
+    SlideshowPanel,
+    SourceCounts
+} from '@/definitions';
 import ChartPreviewV from '@/components/editor/helpers/chart-preview.vue';
 import ConfirmationModalV from '@/components/editor/helpers/confirmation-modal.vue';
 import draggable from 'vuedraggable';
-import { chart } from 'highcharts';
 
 @Options({
     components: {
@@ -78,10 +88,11 @@ import { chart } from 'highcharts';
     }
 })
 export default class ChartEditorV extends Vue {
-    @Prop() panel!: ChartPanel;
+    @Prop() panel!: ChartPanel | SlideshowPanel;
     @Prop() configFileStructure!: ConfigFileStructure;
     @Prop() lang!: string;
     @Prop() sourceCounts!: SourceCounts;
+    @Prop({ default: true }) allowMany!: boolean;
 
     edited = false;
 
@@ -106,9 +117,17 @@ export default class ChartEditorV extends Vue {
             );
         });
 
+        // This allows us to access the chart(s) using one consistent variable instead of needing to check panel type.
+        const charts =
+            this.panel.type === PanelType.Slideshow
+                ? (this.panel.items as Array<ChartPanel>)
+                : this.panel.src
+                ? [this.panel]
+                : [];
+
         // load charts from existing storylines product
-        if (this.panel.charts !== undefined && this.panel.charts.length) {
-            this.chartConfigs = this.panel.charts.map((chart: ChartConfig) => {
+        if (charts !== undefined && charts.length) {
+            this.chartConfigs = charts.map((chart: ChartPanel) => {
                 let chartName = '';
                 // extract chart name
                 if (chart.options && chart.options.title) {
@@ -150,11 +169,19 @@ export default class ChartEditorV extends Vue {
 
     createNewChart(chartInfo: string): void {
         const chart = JSON.parse(chartInfo);
-        // prevent duplicate chart names (alternative is to assign a unique ID for each chart)
-        if (this.chartConfigs.some((chartConfig) => chartConfig.name === chart.title.text)) {
-            alert('Existing chart already has the same chart name.');
+        const chartSrc = `${this.configFileStructure.uuid}/charts/${this.lang}/${chart.title.text}.json`;
+
+        // Check to see if a chart already exists with the provided name. If so, alert the user and re-prompt.
+        if (this.sourceCounts[chartSrc] > 0) {
+            alert(
+                this.$t('editor.chart.label.nameExists', {
+                    name: chart.title.text
+                })
+            );
+
+            // Re-open the editor the the issue can be fixed.
+            setTimeout(() => this.modalEditor.show(), 100);
         } else {
-            const chartSrc = `${this.configFileStructure.uuid}/charts/${this.lang}/${chart.title.text}.json`;
             const chartConfig = {
                 name: chart.title.text,
                 src: chartSrc
@@ -218,8 +245,42 @@ export default class ChartEditorV extends Vue {
 
     saveChanges(): void {
         if (this.edited) {
-            this.panel.charts = this.chartConfigs; // option to delete config property as is redundant
+            // Delete the existing properties so we can rebuild the object.
+            Object.keys(this.panel).forEach((key) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                delete this.panel[key];
+            });
+
+            // Handle case where every image is deleted.
+            if (this.chartConfigs.length === 0) {
+                this.panel.type = PanelType.Chart;
+                (this.panel as ChartPanel).src = '';
+            } else if (this.chartConfigs.length === 1) {
+                this.panel.type = PanelType.Chart;
+
+                // Grab the one chart config from the array.
+                const newChart = this.chartConfigs[0];
+
+                // Sort of gross, but required to update the panel config as we're not allowed to directly manipulate props.
+                Object.keys(newChart).forEach((key) => {
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    (this.panel as ChartPanel)[key] = newChart[key];
+                });
+            } else {
+                this.panel.type = PanelType.Slideshow;
+
+                // Turn each of the chart configs into a chart panel and add them to the slideshow.
+                (this.panel as SlideshowPanel).items = this.chartConfigs.map((chart: ChartConfig) => {
+                    return {
+                        ...chart,
+                        type: PanelType.Chart
+                    } as ChartPanel;
+                });
+            }
         }
+
         this.edited = false;
     }
 
diff --git a/src/components/editor/dynamic-editor.vue b/src/components/editor/dynamic-editor.vue
index c51f8623..d7ab7dee 100644
--- a/src/components/editor/dynamic-editor.vue
+++ b/src/components/editor/dynamic-editor.vue
@@ -36,10 +36,10 @@
                 </tr>
                 <tr class="table-contents" v-for="(item, idx) in panel.children" :key="idx">
                     <td>{{ item.id }}</td>
-                    <td>{{ item.panel.type }}</td>
+                    <td>{{ determineEditorType(item.panel) }}</td>
                     <td>
                         <span @click="() => switchSlide(idx)">{{ $t('editor.chart.label.edit') }}</span> |
-                        <span @click="() => removeSlide(idx)">{{ $t('editor.remove') }}</span>
+                        <span @click="() => removeSlide(item, idx)">{{ $t('editor.remove') }}</span>
                     </td>
                 </tr>
                 <tr class="table-add-row">
@@ -49,10 +49,7 @@
                     </th>
                     <th>
                         <select v-model="newSlideType">
-                            <option
-                                v-for="thing in Object.keys(editors).filter((editor) => editor !== 'image')"
-                                :key="thing"
-                            >
+                            <option v-for="thing in Object.keys(editors)" :key="thing">
                                 {{ thing }}
                             </option>
                         </select>
@@ -69,14 +66,8 @@
                 ><br />
                 <component
                     ref="slide"
-                    :is="
-                        editors[
-                            panel.children[editingSlide].panel.type === 'image'
-                                ? 'slideshow'
-                                : panel.children[editingSlide].panel.type
-                        ]
-                    "
-                    :key="editingSlide + panel.children[editingSlide].panel.type"
+                    :is="editors[determineEditorType(panel.children[editingSlide].panel)]"
+                    :key="editingSlide + determineEditorType(panel.children[editingSlide].panel)"
                     :panel="panel.children[editingSlide].panel"
                     :configFileStructure="configFileStructure"
                     :lang="lang"
@@ -91,7 +82,7 @@
 <script lang="ts">
 import { Options, Prop, Vue } from 'vue-property-decorator';
 import {
-    ChartConfig,
+    BasePanel,
     ChartPanel,
     ConfigFileStructure,
     DefaultConfigs,
@@ -102,6 +93,7 @@ import {
     PanelType,
     SlideshowPanel,
     SourceCounts,
+    TextPanel,
     VideoPanel
 } from '@/definitions';
 
@@ -110,12 +102,14 @@ import ImageEditorV from './image-editor.vue';
 import TextEditorV from './text-editor.vue';
 import MapEditorV from './map-editor.vue';
 import VideoEditorV from './video-editor.vue';
+import SlideshowEditorV from './slideshow-editor.vue';
 
 @Options({
     components: {
         'chart-editor': ChartEditorV,
         'image-editor': ImageEditorV,
         'text-editor': TextEditorV,
+        'slideshow-editor': SlideshowEditorV,
         'dynamic-editor': DynamicEditorV,
         'map-editor': MapEditorV,
         'video-editor': VideoEditorV
@@ -130,7 +124,7 @@ export default class DynamicEditorV extends Vue {
     editors: Record<string, string> = {
         text: 'text-editor',
         image: 'image-editor',
-        slideshow: 'image-editor',
+        slideshow: 'slideshow-editor',
         chart: 'chart-editor',
         map: 'map-editor',
         video: 'video-editor'
@@ -151,11 +145,16 @@ export default class DynamicEditorV extends Vue {
         },
         slideshow: {
             type: PanelType.Slideshow,
-            images: []
+            items: [],
+            userCreated: true
+        },
+        image: {
+            type: PanelType.Image,
+            src: ''
         },
         chart: {
             type: PanelType.Chart,
-            charts: []
+            src: ''
         },
         map: {
             type: PanelType.Map,
@@ -192,19 +191,9 @@ export default class DynamicEditorV extends Vue {
         // Save slide changes if neccessary and switch to the newly selected slide.
         this.saveChanges();
         this.editingSlide = idx;
-
-        // Image Panel to Slideshow Panel Conversion
-        if (this.panel.children[this.editingSlide].panel.type === 'image') {
-            (this.panel.children[this.editingSlide].panel as SlideshowPanel) = {
-                type: PanelType.Slideshow,
-                images: [this.panel.children[this.editingSlide].panel as ImagePanel]
-            };
-        }
     }
 
-    removeSlide(item: number): void {
-        const panel = this.panel.children.find((panel: DynamicChildItem, idx: number) => idx === item)?.panel;
-
+    removeSlide(panel: BasePanel, index?: number): void {
         // Update source counts based on which panel is removed.
         switch (panel?.type) {
             case 'map': {
@@ -220,22 +209,27 @@ export default class DynamicEditorV extends Vue {
 
             case 'chart': {
                 const chartPanel = panel as ChartPanel;
-                chartPanel.charts.forEach((chart: ChartConfig) => {
-                    this.sourceCounts[chart.src] -= 1;
-                    if (this.sourceCounts[chart.src] === 0) {
-                        this.configFileStructure.zip.remove(`${chart.src.substring(chart.src.indexOf('/') + 1)}`);
-                    }
-                });
+                this.sourceCounts[chartPanel.src] -= 1;
+                if (this.sourceCounts[chartPanel.src] === 0) {
+                    this.configFileStructure.zip.remove(`${chartPanel.src.substring(chartPanel.src.indexOf('/') + 1)}`);
+                }
+                break;
+            }
+
+            case 'image': {
+                const imagePanel = panel as ImagePanel;
+
+                this.sourceCounts[imagePanel.src] -= 1;
+                if (this.sourceCounts[imagePanel.src] === 0) {
+                    this.configFileStructure.zip.remove(`${imagePanel.src.substring(imagePanel.src.indexOf('/') + 1)}`);
+                }
                 break;
             }
 
             case 'slideshow': {
                 const slideshowPanel = panel as SlideshowPanel;
-                slideshowPanel.images.forEach((image: ImagePanel) => {
-                    this.sourceCounts[image.src] -= 1;
-                    if (this.sourceCounts[image.src] === 0) {
-                        this.configFileStructure.zip.remove(`${image.src.substring(image.src.indexOf('/') + 1)}`);
-                    }
+                slideshowPanel.items.forEach((item: TextPanel | ImagePanel | MapPanel | ChartPanel) => {
+                    this.removeSlide(item);
                 });
                 break;
             }
@@ -254,12 +248,14 @@ export default class DynamicEditorV extends Vue {
             }
         }
 
-        // Remove the panel itself.
-        this.panel.children = this.panel.children.filter((panel: DynamicChildItem, idx: number) => idx !== item);
+        if (index) {
+            // Remove the panel itself.
+            this.panel.children = this.panel.children.filter((panel: DynamicChildItem, idx: number) => idx !== index);
 
-        // If the slide being removed is the currently selected slide, unselect it.
-        if (this.editingSlide === item) {
-            this.editingSlide = -1;
+            // If the slide being removed is the currently selected slide, unselect it.
+            if (this.editingSlide === index) {
+                this.editingSlide = -1;
+            }
         }
     }
 
@@ -275,6 +271,23 @@ export default class DynamicEditorV extends Vue {
         this.panel.children.push(newConfig);
     }
 
+    determineEditorType(panel: BasePanel): string {
+        if (panel.type !== PanelType.Slideshow) return panel.type;
+        if ((panel as SlideshowPanel).items.length === 0 || (panel as SlideshowPanel).userCreated)
+            return PanelType.Slideshow;
+
+        // Determine whether the slideshow consists of only charts. If so, display the chart editor.
+        const allCharts = (panel as SlideshowPanel).items.every((item: BasePanel) => item.type === PanelType.Chart);
+        if (allCharts) return PanelType.Chart;
+
+        // Determine whether the slideshow consists of only images. If so, display the image editor.
+        const allImages = (panel as SlideshowPanel).items.every((item: BasePanel) => item.type === PanelType.Image);
+        if (allImages) return PanelType.Image;
+
+        // Otherwise display the slideshow editor.
+        return PanelType.Slideshow;
+    }
+
     saveChanges(): void {
         if (
             this.$refs.slide !== undefined &&
diff --git a/src/components/editor/helpers/chart-preview.vue b/src/components/editor/helpers/chart-preview.vue
index 89447125..b4903d72 100644
--- a/src/components/editor/helpers/chart-preview.vue
+++ b/src/components/editor/helpers/chart-preview.vue
@@ -67,12 +67,15 @@ import {
     DQVChartConfig,
     LineSeriesData,
     PieDataRow,
-    PieSeriesData
+    PieSeriesData,
+    SourceCounts
 } from '@/definitions';
 
 export default class ChartPreviewV extends Vue {
     @Prop() chart!: ChartConfig;
     @Prop() configFileStructure!: ConfigFileStructure;
+    @Prop() sourceCounts!: SourceCounts;
+    @Prop() lang!: string;
 
     loading = true;
     chartIdx = 0;
@@ -107,15 +110,30 @@ export default class ChartPreviewV extends Vue {
             },
             (newChart: string) => {
                 const chart = JSON.parse(newChart);
-                const chartConfig = {
-                    name: chart.title.text,
-                    config: chart,
-                    src: ''
-                };
-                this.$emit('edit', { oldChart: this.chart, newChart: chartConfig });
-                this.chartConfig = chartConfig;
-                this.chartName = chartConfig.name;
-                this.chartIdx += 1;
+                const newName = `${this.configFileStructure.uuid}/charts/${this.lang}/${chart.title.text}.json`;
+
+                // Check to see if a chart already exists with the provided name. If so, alert the user and re-prompt.
+                if (this.sourceCounts[newName] > 0 && chart.title.text != this.chart.name) {
+                    alert(
+                        this.$t('editor.chart.label.nameExists', {
+                            name: chart.title.text
+                        })
+                    );
+
+                    // Re-open the editor the the issue can be fixed.
+                    setTimeout(() => this.modalEditor.show(), 100);
+                } else {
+                    const chartConfig = {
+                        name: chart.title.text,
+                        config: chart,
+                        src: ''
+                    };
+
+                    this.$emit('edit', { oldChart: this.chart, newChart: chartConfig });
+                    this.chartConfig = chartConfig;
+                    this.chartName = chartConfig.name;
+                    this.chartIdx += 1;
+                }
             }
         );
 
diff --git a/src/components/editor/image-editor.vue b/src/components/editor/image-editor.vue
index 33235764..84ba2f4f 100644
--- a/src/components/editor/image-editor.vue
+++ b/src/components/editor/image-editor.vue
@@ -7,6 +7,7 @@
             @dragover.prevent="() => (dragging = true)"
             @dragleave.prevent="() => (dragging = false)"
             @drop.prevent="dropImages($event)"
+            v-if="allowMany || (!allowMany && imagePreviews.length === 0)"
         >
             <label class="flex drag-label cursor-pointer">
                 <span class="align-middle inline-block pr-4">
@@ -25,12 +26,16 @@
                             {{ $t('editor.label.upload') }}
                         </div>
                     </span>
-                    <input type="file" class="cursor-pointer" @change="onFileChange" multiple />
+                    <input type="file" class="cursor-pointer" @change="onFileChange" :multiple="!!allowMany" />
                 </span>
             </label>
         </div>
 
-        <span v-show="!imagePreviewsLoading && imagePreviews.length" class="flex justify-center">
+        <span
+            v-if="allowMany || (!allowMany && imagePreviews.length === 0)"
+            v-show="!imagePreviewsLoading && imagePreviews.length"
+            class="flex justify-center"
+        >
             <i> {{ $t('editor.image.reorder') }}</i>
         </span>
 
@@ -77,10 +82,11 @@ import ImagePreviewV from '@/components/editor/helpers/image-preview.vue';
     }
 })
 export default class ImageEditorV extends Vue {
-    @Prop() panel!: SlideshowPanel;
+    @Prop() panel!: ImagePanel | SlideshowPanel;
     @Prop() configFileStructure!: ConfigFileStructure;
     @Prop() lang!: string;
     @Prop() sourceCounts!: SourceCounts;
+    @Prop({ default: true }) allowMany!: boolean;
 
     dragging = false;
     edited = false;
@@ -95,12 +101,20 @@ export default class ImageEditorV extends Vue {
     }
 
     mounted(): void {
-        if (this.panel.images !== undefined && this.panel.images.length) {
+        // This basically allows us to access the image(s) using one consistent variable instead of needing to check panel type.
+        const images =
+            this.panel.type === PanelType.Slideshow
+                ? (this.panel.items as Array<ImagePanel>)
+                : this.panel.src
+                ? [this.panel]
+                : [];
+
+        if (images !== undefined && images.length) {
             // Set images as loading until they are all loaded and resolve.
             this.imagePreviewsLoading = true;
 
             // Process each existing image.
-            this.panel.images.map((image: ImagePanel) => {
+            images.map((image: ImagePanel) => {
                 // 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(/^.*[\\/]/, '');
@@ -158,7 +172,13 @@ export default class ImageEditorV extends Vue {
 
     dropImages(e: DragEvent): void {
         if (e.dataTransfer !== null) {
-            const files = [...e.dataTransfer.files];
+            let files = [...e.dataTransfer.files];
+
+            // If allowMany is false, take the first one.
+            if (!this.allowMany) {
+                files = [files[0]];
+            }
+
             this.imagePreviews.push(
                 ...files.map((file: File) => {
                     // Add the uploaded images to the product ZIP file.
@@ -203,14 +223,48 @@ export default class ImageEditorV extends Vue {
 
     saveChanges(): void {
         if (this.edited) {
-            this.panel.images = this.imagePreviews.map((imageFile: ImageFile) => {
-                return {
-                    ...imageFile,
-                    src: `${this.configFileStructure.uuid}/assets/${this.lang}/${imageFile.id}`,
-                    type: PanelType.Image
-                };
+            // Delete the existing properties so we can rebuild the object.
+            Object.keys(this.panel).forEach((key) => {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                delete this.panel[key];
             });
-            this.panel.caption = this.slideshowCaption ?? undefined;
+
+            // Handle case where everything is deleted.
+            if (this.imagePreviews.length === 0) {
+                this.panel.type = PanelType.Image;
+                (this.panel as ImagePanel).src = '';
+            } else if (this.imagePreviews.length === 1) {
+                // If there's only one image uploaded, convert this to an image panel.
+                this.panel.type = PanelType.Image;
+
+                // Grab the one image from the array.
+                const imageFile = this.imagePreviews[0];
+
+                // Sort of gross, but required to update the panel config as we're not allowed to directly manipulate props.
+                Object.keys(imageFile).forEach((key) => {
+                    if (key === 'id') return; // we don't need this one.
+
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    (this.panel as ImagePanel)[key] = imageFile[key];
+                });
+
+                (this.panel as ImagePanel).src = `${this.configFileStructure.uuid}/assets/${this.lang}/${imageFile.id}`;
+            } else {
+                // Otherwise, convert this to a slideshow panel.
+                this.panel.type = PanelType.Slideshow;
+                this.panel.caption = this.slideshowCaption ?? undefined;
+
+                // Turn each of the image configs into an image panel and add them to the slidesow.
+                (this.panel as SlideshowPanel).items = this.imagePreviews.map((imageFile: ImageFile) => {
+                    return {
+                        ...imageFile,
+                        src: `${this.configFileStructure.uuid}/assets/${this.lang}/${imageFile.id}`,
+                        type: PanelType.Image
+                    } as ImagePanel;
+                });
+            }
         }
         this.edited = false;
     }
diff --git a/src/components/editor/metadata-editor.vue b/src/components/editor/metadata-editor.vue
index 44ef172b..528f9993 100644
--- a/src/components/editor/metadata-editor.vue
+++ b/src/components/editor/metadata-editor.vue
@@ -160,7 +160,6 @@ import { AxiosResponse } from 'axios';
 import {
     AudioPanel,
     BasePanel,
-    ChartConfig,
     ChartPanel,
     ConfigFileStructure,
     DynamicChildItem,
@@ -172,6 +171,7 @@ import {
     SlideshowPanel,
     SourceCounts,
     StoryRampConfig,
+    TextPanel,
     VideoPanel
 } from '@/definitions';
 import { VueSpinnerOval } from 'vue3-spinners';
@@ -440,16 +440,16 @@ export default class MetadataEditorV extends Vue {
                 });
                 break;
             case 'slideshow':
-                (panel as SlideshowPanel).images.forEach((image: ImagePanel) => {
-                    this.incrementSourceCount(image.src);
+                (panel as SlideshowPanel).items.forEach((item: ChartPanel | TextPanel | ImagePanel | MapPanel) => {
+                    this.panelSourceHelper(item);
                 });
                 break;
             case 'chart':
-                (panel as ChartPanel).charts.forEach((chart: ChartConfig) => {
-                    this.incrementSourceCount(chart.src);
-                });
+                this.incrementSourceCount((panel as ChartPanel).src);
                 break;
             case 'image':
+                this.incrementSourceCount((panel as ImagePanel).src);
+                break;
             case 'video':
                 if ((panel as VideoPanel).videoType === 'local') {
                     this.incrementSourceCount((panel as VideoPanel).src);
@@ -461,6 +461,8 @@ export default class MetadataEditorV extends Vue {
             case 'map':
                 this.incrementSourceCount((panel as MapPanel).config);
                 break;
+            case 'text':
+                break;
             default:
                 break;
         }
@@ -567,17 +569,7 @@ export default class MetadataEditorV extends Vue {
         this.metadata.tocOrientation = config.tocOrientation;
         this.metadata.dateModified = config.dateModified;
 
-        // Conversion for individual image panels to slideshow for gallery display
         this.slides = config.slides;
-        this.slides.forEach((slide: Slide) => {
-            if (slide.panel.length === 2 && slide.panel[1].type === 'image') {
-                const newSlide = {
-                    type: 'slideshow',
-                    images: [slide.panel[1]]
-                };
-                slide.panel[1] = newSlide;
-            }
-        });
 
         const logo = config.introSlide.logo?.src;
         if (logo) {
diff --git a/src/components/editor/slide-editor.vue b/src/components/editor/slide-editor.vue
index b194e458..f647411d 100644
--- a/src/components/editor/slide-editor.vue
+++ b/src/components/editor/slide-editor.vue
@@ -28,7 +28,7 @@
                             type="checkbox"
                             class="rounded-none cursor-pointer w-4 h-4"
                             v-model="rightOnly"
-                            :disabled="rightOnly && currentSlide.panel[panelIndex].type === 'dynamic'"
+                            :disabled="rightOnly && determineEditorType(currentSlide.panel[panelIndex]) === 'dynamic'"
                             @change.stop="$vfm.open(`right-only-${slideIndex}`)"
                         />
                     </div>
@@ -189,14 +189,12 @@
                                 $vfm.open(`change-slide-${slideIndex}`);
                                 newType = ($event.target as HTMLInputElement).value;
                             "
-                            :value="currentSlide.panel[panelIndex].type"
+                            :value="determineEditorType(currentSlide.panel[panelIndex])"
                         >
                             <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>
@@ -205,8 +203,8 @@
                 </div>
                 <component
                     ref="editor"
-                    :is="editors[currentSlide.panel[panelIndex].type]"
-                    :key="panelIndex + currentSlide.panel[panelIndex].type"
+                    :is="editors[determineEditorType(currentSlide.panel[panelIndex])]"
+                    :key="panelIndex + determineEditorType(currentSlide.panel[panelIndex])"
                     :panel="currentSlide.panel[panelIndex]"
                     :configFileStructure="configFileStructure"
                     :lang="lang"
@@ -222,7 +220,7 @@
         <confirmation-modal
             :name="`change-slide-${slideIndex}`"
             :message="$t('editor.slides.changeSlide.confirm', { title: currentSlide.title })"
-            @ok="changePanelType(currentSlide.panel[panelIndex].type, newType)"
+            @ok="changePanelType(determineEditorType(currentSlide.panel[panelIndex]), newType)"
             @Cancel="cancelTypeChange"
         />
         <confirmation-modal
@@ -260,6 +258,7 @@ import ImageEditorV from './image-editor.vue';
 import TextEditorV from './text-editor.vue';
 import MapEditorV from './map-editor.vue';
 import VideoEditorV from './video-editor.vue';
+import SlideshowEditorV from './slideshow-editor.vue';
 import LoadingPageV from './helpers/loading-page.vue';
 import DynamicEditorV from './dynamic-editor.vue';
 import ConfirmationModalV from './helpers/confirmation-modal.vue';
@@ -271,6 +270,7 @@ import ConfirmationModalV from './helpers/confirmation-modal.vue';
         'text-editor': TextEditorV,
         'map-editor': MapEditorV,
         'video-editor': VideoEditorV,
+        'slideshow-editor': SlideshowEditorV,
         'loading-page': LoadingPageV,
         'dynamic-editor': DynamicEditorV,
         'confirmation-modal': ConfirmationModalV
@@ -293,7 +293,7 @@ export default class SlideEditorV extends Vue {
     editors: Record<string, string> = {
         text: 'text-editor',
         image: 'image-editor',
-        slideshow: 'image-editor',
+        slideshow: 'slideshow-editor',
         chart: 'chart-editor',
         map: 'map-editor',
         video: 'video-editor',
@@ -328,11 +328,16 @@ export default class SlideEditorV extends Vue {
             },
             slideshow: {
                 type: PanelType.Slideshow,
-                images: []
+                items: [],
+                userCreated: true
+            },
+            image: {
+                type: PanelType.Image,
+                src: ''
             },
             chart: {
                 type: PanelType.Chart,
-                charts: []
+                src: ''
             },
             map: {
                 type: PanelType.Map,
@@ -375,24 +380,30 @@ export default class SlideEditorV extends Vue {
                 break;
             }
 
+            case 'image': {
+                const imagePanel = panel as ImagePanel;
+                this.sourceCounts[imagePanel.src] -= 1;
+                if (this.sourceCounts[imagePanel.src] === 0) {
+                    this.configFileStructure.zip.remove(`${imagePanel.src.substring(imagePanel.src.indexOf('/') + 1)}`);
+                }
+
+                break;
+            }
+
             case 'chart': {
                 const chartPanel = panel as ChartPanel;
-                chartPanel.charts.forEach((chart: ChartConfig) => {
-                    this.sourceCounts[chart.src] -= 1;
-                    if (this.sourceCounts[chart.src] === 0) {
-                        this.configFileStructure.zip.remove(`${chart.src.substring(chart.src.indexOf('/') + 1)}`);
-                    }
-                });
+                this.sourceCounts[chartPanel.src] -= 1;
+                if (this.sourceCounts[chartPanel.src] === 0) {
+                    this.configFileStructure.zip.remove(`${chartPanel.src.substring(chartPanel.src.indexOf('/') + 1)}`);
+                }
+
                 break;
             }
 
             case 'slideshow': {
                 const slideshowPanel = panel as SlideshowPanel;
-                slideshowPanel.images.forEach((image: ImagePanel) => {
-                    this.sourceCounts[image.src] -= 1;
-                    if (this.sourceCounts[image.src] === 0) {
-                        this.configFileStructure.zip.remove(`${image.src.substring(image.src.indexOf('/') + 1)}`);
-                    }
+                slideshowPanel.items.forEach((item: TextPanel | ImagePanel | MapPanel | ChartPanel) => {
+                    this.removeSourceCounts(item);
                 });
                 break;
             }
@@ -417,6 +428,10 @@ export default class SlideEditorV extends Vue {
                 });
                 break;
             }
+
+            case 'text': {
+                break;
+            }
         }
     }
 
@@ -434,7 +449,26 @@ export default class SlideEditorV extends Vue {
     }
 
     cancelTypeChange(): void {
-        (this.$refs.typeSelector as HTMLSelectElement).value = this.currentSlide.panel[this.panelIndex].type;
+        (this.$refs.typeSelector as HTMLSelectElement).value = this.determineEditorType(
+            this.currentSlide.panel[this.panelIndex]
+        );
+    }
+
+    determineEditorType(panel: BasePanel): string {
+        if (panel.type !== PanelType.Slideshow) return panel.type;
+        if ((panel as SlideshowPanel).items.length === 0 || (panel as SlideshowPanel).userCreated)
+            return PanelType.Slideshow;
+
+        // Determine whether the slideshow consists of only charts. If so, display the chart editor.
+        const allCharts = (panel as SlideshowPanel).items.every((item: BasePanel) => item.type === PanelType.Chart);
+        if (allCharts) return PanelType.Chart;
+
+        // Determine whether the slideshow consists of only images. If so, display the image editor.
+        const allImages = (panel as SlideshowPanel).items.every((item: BasePanel) => item.type === PanelType.Image);
+        if (allImages) return PanelType.Image;
+
+        // Otherwise display the slideshow editor.
+        return PanelType.Slideshow;
     }
 
     toggleRightOnly(): void {
diff --git a/src/components/editor/slide-toc.vue b/src/components/editor/slide-toc.vue
index ff82b019..c4a316bc 100644
--- a/src/components/editor/slide-toc.vue
+++ b/src/components/editor/slide-toc.vue
@@ -252,24 +252,30 @@ export default class SlideTocV extends Vue {
                 break;
             }
 
+            case 'image': {
+                const imagePanel = panel as ImagePanel;
+                this.sourceCounts[imagePanel.src] -= 1;
+                if (this.sourceCounts[imagePanel.src] === 0) {
+                    this.configFileStructure.zip.remove(`${imagePanel.src.substring(imagePanel.src.indexOf('/') + 1)}`);
+                }
+
+                break;
+            }
+
             case 'chart': {
                 const chartPanel = panel as ChartPanel;
-                chartPanel.charts.forEach((chart: ChartConfig) => {
-                    this.sourceCounts[chart.src] -= 1;
-                    if (this.sourceCounts[chart.src] === 0) {
-                        this.configFileStructure.zip.remove(`${chart.src.substring(chart.src.indexOf('/') + 1)}`);
-                    }
-                });
+                this.sourceCounts[chartPanel.src] -= 1;
+                if (this.sourceCounts[chartPanel.src] === 0) {
+                    this.configFileStructure.zip.remove(`${chartPanel.src.substring(chartPanel.src.indexOf('/') + 1)}`);
+                }
+
                 break;
             }
 
             case 'slideshow': {
                 const slideshowPanel = panel as SlideshowPanel;
-                slideshowPanel.images.forEach((image: ImagePanel) => {
-                    this.sourceCounts[image.src] -= 1;
-                    if (this.sourceCounts[image.src] === 0) {
-                        this.configFileStructure.zip.remove(`${image.src.substring(image.src.indexOf('/') + 1)}`);
-                    }
+                slideshowPanel.items.forEach((item: TextPanel | MapPanel | ChartPanel | ImagePanel) => {
+                    this.removeSourceHelper(item);
                 });
                 break;
             }
@@ -294,6 +300,10 @@ export default class SlideTocV extends Vue {
                 });
                 break;
             }
+
+            case 'text': {
+                break;
+            }
         }
     }
 
diff --git a/src/components/editor/slideshow-editor.vue b/src/components/editor/slideshow-editor.vue
new file mode 100644
index 00000000..e043bb5f
--- /dev/null
+++ b/src/components/editor/slideshow-editor.vue
@@ -0,0 +1,319 @@
+<template>
+    <div class="block">
+        <!-- Menu with option to add a new chart -->
+        <div class="flex items-center">
+            <span class="font-bold px-4">{{
+                $t('editor.slideshow.label.info', {
+                    num: panel.items.length
+                })
+            }}</span>
+
+            <!-- add item button -->
+            <button class="bg-gray-100 cursor-pointer hover:bg-gray-200" @click="editingStatus = 'create'">
+                <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" />
+        <!-- Metadata Editor -->
+        <div class="flex items-center w-full text-left">
+            <label class="text-label">{{ $t('editor.image.slideshowCaption') }}:</label>
+            <input class="w-1/3" type="text" v-model="panel.caption" /><br />
+        </div>
+        <table class="w-2/3 mt-5">
+            <thead>
+                <tr class="table-header">
+                    <th></th>
+                    <th>{{ $t('editor.slideshow.label.type') }}</th>
+                    <th>{{ $t('dynamic.panel.actions') }}</th>
+                </tr>
+            </thead>
+            <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>
+            </tbody>
+        </table>
+        <br /><br />
+        <div v-if="editingStatus !== 'none'">
+            <h2 class="text-xl font-bold">{{ $t(`editor.slideshow.label.${editingStatus}`) }}</h2>
+            <hr class="border-solid border-t-2 border-gray-300 my-2" />
+            <div>
+                <div v-if="editingStatus === 'create'">
+                    <!-- Creating new slide -->
+                    <label class="mb-5 text-left">{{ $t('editor.slideshow.label.type') }}:</label>
+                    <select @input="onTypeInput" :value="newSlideType">
+                        <option v-for="thing in Object.keys(editors)" :key="thing" :value="thing">
+                            {{ thing }}
+                        </option>
+                    </select>
+                    <component
+                        v-if="editingStatus === 'create'"
+                        ref="slideEditor"
+                        :is="editors[newSlideType]"
+                        :panel="JSON.parse(JSON.stringify(startingConfig[newSlideType]))"
+                        :configFileStructure="configFileStructure"
+                        :lang="lang"
+                        :sourceCounts="sourceCounts"
+                        :allowMany="false"
+                    ></component>
+                    <div class="mt-3 w-full flex justify-end">
+                        <button class="bg-black text-white hover:bg-gray-800" @click="saveItem(true)">
+                            {{ $t('editor.slideshow.label.add') }}
+                        </button>
+                    </div>
+                </div>
+                <div v-else>
+                    <!-- Editing existing slide-->
+                    <component
+                        ref="slideEditor"
+                        :is="editors[panel.items[editingIdx].type]"
+                        :panel="panel.items[editingIdx]"
+                        :configFileStructure="configFileStructure"
+                        :lang="lang"
+                        :sourceCounts="sourceCounts"
+                        :key="editingIdx + panel.items[editingIdx].type"
+                        :allowMany="false"
+                    ></component>
+                    <div class="mt-3 w-full flex justify-end">
+                        <button class="bg-black text-white hover:bg-gray-800" @click="saveItem()">
+                            {{ $t('editor.saveChanges') }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { Options, Prop, Vue } from 'vue-property-decorator';
+import {
+    BasePanel,
+    ChartPanel,
+    ConfigFileStructure,
+    DefaultConfigs,
+    ImagePanel,
+    MapPanel,
+    PanelType,
+    SlideshowPanel,
+    SourceCounts
+} from '@/definitions';
+
+import ChartEditorV from './chart-editor.vue';
+import ImageEditorV from './image-editor.vue';
+import TextEditorV from './text-editor.vue';
+import MapEditorV from './map-editor.vue';
+import VideoEditorV from './video-editor.vue';
+
+@Options({
+    components: {
+        'chart-editor': ChartEditorV,
+        'image-editor': ImageEditorV,
+        'text-editor': TextEditorV,
+        'map-editor': MapEditorV,
+        'video-editor': VideoEditorV
+    }
+})
+export default class SlideshowEditorV extends Vue {
+    @Prop() panel!: SlideshowPanel;
+    @Prop() configFileStructure!: ConfigFileStructure;
+    @Prop() lang!: string;
+    @Prop() sourceCounts!: SourceCounts;
+
+    editors: Record<string, string> = {
+        text: 'text-editor',
+        image: 'image-editor',
+        chart: 'chart-editor',
+        map: 'map-editor',
+        video: 'video-editor'
+    };
+
+    // TODO: we use this and a few other functions (updating source counts, etc.) in multiple places. We should probably look in to putting this somewhere else.
+    startingConfig: DefaultConfigs = {
+        text: {
+            type: PanelType.Text,
+            title: '',
+            content: ''
+        },
+        dynamic: {
+            type: PanelType.Dynamic,
+            title: '',
+            titleTag: '',
+            content: '',
+            children: []
+        },
+        slideshow: {
+            type: PanelType.Slideshow,
+            items: []
+        },
+        chart: {
+            type: PanelType.Chart,
+            src: ''
+        },
+        image: {
+            type: PanelType.Image,
+            src: ''
+        },
+        map: {
+            type: PanelType.Map,
+            config: '',
+            title: '',
+            scrollguard: true // default to ON for slideshows. Allows users to use the cursor to switch slides.
+        },
+        video: {
+            type: PanelType.Video,
+            title: '',
+            videoType: '',
+            src: ''
+        }
+    };
+
+    editingIdx = -1;
+    newSlideName = '';
+    newSlideType: 'text' | 'image' | 'chart' | 'map' = 'text';
+    editingStatus: 'none' | 'edit' | 'create' = 'none';
+
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+    onTypeInput(e: any): void {
+        this.newSlideType = e.target.value;
+    }
+
+    editItem(idx: number): void {
+        // Save slide changes if neccessary and switch to the newly selected slide.
+        this.saveChanges();
+        this.editingIdx = idx;
+        this.editingStatus = 'edit';
+    }
+
+    deleteItem(item: number): void {
+        const panel = this.panel.items.find((panel: BasePanel, idx: number) => idx === item);
+
+        // Update source counts based on which panel is removed.
+        switch (panel?.type) {
+            case 'map': {
+                const mapPanel = panel as MapPanel;
+                this.sourceCounts[mapPanel.config] -= 1;
+                if (this.sourceCounts[mapPanel.config] === 0) {
+                    this.configFileStructure.zip.remove(
+                        `${mapPanel.config.substring(mapPanel.config.indexOf('/') + 1)}`
+                    );
+                }
+                break;
+            }
+
+            case 'chart': {
+                const chartPanel = panel as ChartPanel;
+                this.sourceCounts[chartPanel.src] -= 1;
+                if (this.sourceCounts[chartPanel.src] === 0) {
+                    this.configFileStructure.zip.remove(`${chartPanel.src.substring(chartPanel.src.indexOf('/') + 1)}`);
+                }
+                break;
+            }
+
+            case 'image': {
+                const imagePanel = panel as ImagePanel;
+                this.sourceCounts[imagePanel.src] -= 1;
+                if (this.sourceCounts[imagePanel.src] === 0) {
+                    this.configFileStructure.zip.remove(`${imagePanel.src.substring(imagePanel.src.indexOf('/') + 1)}`);
+                }
+                break;
+            }
+
+            case 'text': {
+                break;
+            }
+        }
+
+        // Remove the panel itself.
+        this.panel.items = this.panel.items.filter((panel: BasePanel, idx: number) => idx !== item);
+
+        // If the slide being removed is the currently selected slide, unselect it.
+        if (this.editingIdx === item) {
+            this.editingIdx = -1;
+            this.editingStatus = 'none';
+        }
+    }
+
+    saveItem(add = false): void {
+        let itemConfig;
+
+        if (add) {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            itemConfig = (this.$refs.slideEditor as any).panel;
+            this.panel.items.push(itemConfig);
+        } else {
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            itemConfig = (this.$refs.slideEditor as any).panel;
+        }
+
+        if (itemConfig.type !== PanelType.Text && itemConfig.type !== PanelType.Map) {
+            if (
+                this.$refs.slideEditor !== undefined &&
+                typeof (this.$refs.slideEditor as ImageEditorV | ChartEditorV).saveChanges === 'function'
+            ) {
+                (this.$refs.slideEditor as ImageEditorV | ChartEditorV).saveChanges();
+            }
+        }
+
+        this.editingStatus = 'none';
+    }
+
+    saveChanges(): void {
+        return;
+    }
+}
+</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;
+}
+.table-header th {
+    text-align: center;
+    background-color: #ddd;
+    padding: 5px;
+}
+.table-contents td {
+    text-align: center;
+    padding: 5px;
+}
+.table-contents:hover {
+    background-color: #eee;
+    cursor: pointer;
+}
+.table-add-row th {
+    vertical-align: top;
+    text-align: center;
+    border-top: 1px solid #ddd;
+    padding: 5px;
+}
+.table-add-row input[type='text'],
+.table-add-row select,
+.table-add-row button {
+    width: 150px !important;
+    text-align: center;
+    font-weight: normal;
+    border: 1px solid black;
+    padding: 2px !important;
+    margin-top: 0 !important;
+}
+</style>
diff --git a/src/definitions.ts b/src/definitions.ts
index d15ea233..4beba828 100644
--- a/src/definitions.ts
+++ b/src/definitions.ts
@@ -192,12 +192,9 @@ export interface ImagePanel extends BasePanel {
     src: string;
     width?: number;
     height?: number;
-    temp?: string;
-    class?: string;
     fullscreen?: boolean;
     altText?: string;
     caption?: string;
-    tooltip?: string;
 }
 
 export interface VideoPanel extends BasePanel {
@@ -219,16 +216,19 @@ export interface AudioPanel extends BasePanel {
 
 export interface SlideshowPanel extends BasePanel {
     type: PanelType.Slideshow;
-    images: ImagePanel[];
-    fullscreen?: boolean;
+    items: Array<ChartPanel | TextPanel | ImagePanel | MapPanel>;
     loop?: boolean;
     caption?: string;
+    userCreated?: boolean; // used to determine whether this was automatically converted to slideshow or not
 }
 
 export interface ChartPanel extends BasePanel {
     type: PanelType.Chart;
-    charts: ChartConfig[];
-    fullscreen?: boolean;
+    src: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    config?: any;
+    name?: string;
+    options?: DQVOptions;
 }
 
 export interface ChartConfig {
@@ -266,4 +266,5 @@ export interface DefaultConfigs {
     dynamic: DynamicPanel;
     map: MapPanel;
     video: VideoPanel;
+    image: ImagePanel;
 }
diff --git a/src/lang/lang.csv b/src/lang/lang.csv
index bf910478..25eead84 100644
--- a/src/lang/lang.csv
+++ b/src/lang/lang.csv
@@ -78,6 +78,8 @@ editor.chart.label.name,Name,1,Nom,1
 editor.chart.label.edit,Edit,1,Éditer,1
 editor.chart.label.empty,Empty,1,Vide,1
 editor.chart.label.create,Add new chart,1,Ajouter un nouveau graphique,1
+editor.chart.label.info,Interactive chart,1,[FR] Interactive chart,0
+editor.chart.label.nameExists,There is already an existing chart with the name {name}.,1,There is already an existing chart with the name {name}.,0
 editor.chart.label.info,Interactive charts ({num}),1,Graphiques interactifs ({num}),1
 editor.chart.delete.confirm,Are you sure you want to delete the chart {name}?,1,Voulez-vous vraiment supprimer le graphique {nom}?,1
 editor.map.title,Map title,1,Titre de la carte,1
@@ -98,6 +100,11 @@ editor.map.timeslider.warning,⚠️Warning! Please ensure that:,1,⚠️Avertis
 editor.map.timeslider.warning.bullet1,All range and start values are positive integers.,1,Toutes les valeurs de la tranche et du début sont des nombres entiers positifs.,1
 editor.map.timeslider.warning.bullet2,The "to" value is greater than or equal to the "from" value.,1,La valeur « À » est supérieure ou égale à la valeur « De ».,1
 editor.map.timeslider.warning.end,"Otherwise, your time slider config cannot be saved.",1,Autrement, la configuration du curseur temporel ne pourra pas être enregistrée.,1
+editor.slideshow.label.info,Slideshow items ({num}),1,[FR] Slideshow items ({num}),0
+editor.slideshow.label.create,Add new item,1,[FR] Add new item,0
+editor.slideshow.label.edit,Edit existing item,1,[FR] Edit existing item,0
+editor.slideshow.label.type,Type,1,[FR] Type,0
+editor.slideshow.label.add,Add,1,[FR] Add,0
 editor.slides.title,SLIDES,1,DIAPOSITIVES,1
 editor.slides.addSlide,"New Slide",1,Nouvelle diapositive,1
 editor.slides.copyFromLang,"Copy slides from the other language",1,"Copier les diapositives de l’autre langue",1