diff --git a/addons/web_editor/static/src/components/media_dialog/image_selector.xml b/addons/web_editor/static/src/components/media_dialog/image_selector.xml
index 368515117de..727fc211695 100644
--- a/addons/web_editor/static/src/components/media_dialog/image_selector.xml
+++ b/addons/web_editor/static/src/components/media_dialog/image_selector.xml
@@ -11,6 +11,20 @@
     </div>
 </t>
 
+<t t-name="web_editor.ExternalImage" owl="1">
+    <t t-if="record.mediaType == 'libraryMedia'">
+        <AutoResizeImage author="record.author"
+            src="record.thumbnail_url"
+            authorLink="record.author_link"
+            title="record.tooltip"
+            altDescription="record.tooltip"
+            minRowHeight="MIN_ROW_HEIGHT"
+            selected="this.selectedMediaIds.includes(record.id)"
+            onImageClick="() => this.onClickMedia(record)"
+            onLoaded="(imgEl) => this.onImageLoaded(imgEl, record)"/>
+    </t>
+</t>
+
 <t t-name="web_editor.ImagesListTemplate" owl="1">
     <div class="o_we_existing_attachments o_we_images d-flex flex-wrap my-0">
         <t t-if="!hasContent and !isFetching">
@@ -42,16 +56,8 @@
                 </t>
             </t>
             <t id="o_we_media_library_images" t-if="['all', 'media-library'].includes(state.searchService)">
-                <t t-foreach="state.libraryMedia" t-as="media" t-key="media.id">
-                    <AutoResizeImage author="media.author"
-                        src="media.thumbnail_url"
-                        authorLink="media.author_link"
-                        title="media.tooltip"
-                        altDescription="media.tooltip"
-                        minRowHeight="MIN_ROW_HEIGHT"
-                        selected="this.selectedMediaIds.includes(media.id)"
-                        onImageClick="() => this.onClickMedia(media)"
-                        onLoaded="(imgEl) => this.onImageLoaded(imgEl, media)"/>
+                <t t-foreach="state.libraryMedia" t-as="record" t-key="record.id">
+                    <t t-call="web_editor.ExternalImage"/>
                 </t>
             </t>
             <!-- 20 placeholders is just enough for a 5K screen, change this if ImageWidget.MIN_ROW_HEIGHT changes -->
diff --git a/addons/web_unsplash/static/src/components/media_dialog/image_selector.js b/addons/web_unsplash/static/src/components/media_dialog/image_selector.js
index dd72342ddea..8b75650785c 100644
--- a/addons/web_unsplash/static/src/components/media_dialog/image_selector.js
+++ b/addons/web_unsplash/static/src/components/media_dialog/image_selector.js
@@ -107,6 +107,24 @@ patch(ImageSelector.prototype, 'image_selector_unsplash', {
         return this._super() || this.state.isFetchingUnsplash;
     },
 
+    get combinedRecords() {
+        /**
+         * Creates an array with alternating elements from two arrays.
+         *
+         * @param {Array} a
+         * @param {Array} b
+         * @returns {Array} alternating elements from a and b, starting with
+         *     an element of a
+         */
+        function alternate(a, b) {
+            return [
+                a.map((v, i) => i < b.length ? [v, b[i]] : v),
+                b.slice(a.length),
+            ].flat(2);
+        }
+        return alternate(this.state.unsplashRecords, this.state.libraryMedia);
+    },
+
     // It seems that setters are mandatory when patching a component that
     // extends another component.
     set canLoadMore(_) {},
diff --git a/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml b/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
index f2d7f558943..16aeef2e94f 100644
--- a/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
+++ b/addons/web_unsplash/static/src/components/media_dialog/image_selector.xml
@@ -34,20 +34,28 @@
     </div>
 </t>
 
+<t t-inherit="web_editor.ExternalImage" t-inherit-mode="extension">
+    <xpath expr="//t[@t-if]" position="after">
+        <t t-elif="record.mediaType == 'unsplashRecord'">
+            <AutoResizeImage src="record.url"
+                author="record.user.name"
+                authorLink="record.user.links.html"
+                name="record.user.name"
+                title="record.user.name"
+                altDescription="record.alt_description"
+                selected="this.selectedRecordIds.includes(record.id)"
+                onImageClick="() => this.onClickRecord(record)"
+                minRowHeight="MIN_ROW_HEIGHT"
+                onLoaded="(imgEl) => this.onImageLoaded(imgEl, record)"/>
+        </t>
+    </xpath>
+</t>
+
 <t t-name="web_unsplash.ImagesListTemplate" t-inherit="web_editor.ImagesListTemplate" t-inherit-mode="extension">
-    <xpath expr="//t[@id='o_we_media_library_images']" position="after">
-        <t t-if="['all', 'unsplash'].includes(state.searchService)">
-            <t t-foreach="state.unsplashRecords" t-as="record" t-key="record.id">
-                <AutoResizeImage src="record.url"
-                    author="record.user.name"
-                    authorLink="record.user.links.html"
-                    name="record.user.name"
-                    title="record.user.name"
-                    altDescription="record.alt_description"
-                    selected="this.selectedRecordIds.includes(record.id)"
-                    onImageClick="() => this.onClickRecord(record)"
-                    minRowHeight="MIN_ROW_HEIGHT"
-                    onLoaded="(imgEl) => this.onImageLoaded(imgEl, record)"/>
+    <xpath expr="//t[@id='o_we_media_library_images']" position="replace">
+        <t id='o_we_media_library_images' t-if="['all', 'unsplash', 'media-library'].includes(state.searchService)">
+            <t t-foreach="combinedRecords" t-as="record" t-key="record.id">
+                <t t-call="web_editor.ExternalImage"/>
             </t>
         </t>
     </xpath>