diff --git a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info.element.ts b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info.element.ts
index 7d1251a4cb..26f78f33c5 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/media/media/workspace/views/info/media-workspace-view-info.element.ts
@@ -95,6 +95,20 @@ export class UmbMediaWorkspaceViewInfoElement extends UmbLitElement {
this._updateDate = Array.isArray(variants) ? variants[0].updateDate || 'Unknown' : 'Unknown';
});
}
+ #openSvg(imagePath: string) {
+ const popup = window.open('', '_blank');
+ if (!popup) return;
+
+ const html = `
+
+ 
+
+`;
+
+ popup.document.open();
+ popup.document.write(html);
+ popup.document.close();
+ }
override render() {
return html`
@@ -118,18 +132,12 @@ export class UmbMediaWorkspaceViewInfoElement extends UmbLitElement {
}
#renderLinksSection() {
- /** TODO Make sure link section is completed */
if (this._urls && this._urls.length) {
return html`
${repeat(
this._urls,
- (url) => url.url,
- (url) => html`
-
- ${url.url}
-
-
- `,
+ (item) => item.url,
+ (item) => this.#renderLinkItem(item),
)}
`;
} else {
@@ -141,6 +149,25 @@ export class UmbMediaWorkspaceViewInfoElement extends UmbLitElement {
}
}
+ #renderLinkItem(item: MediaUrlInfoModel) {
+ const ext = item.url.split(/[#?]/)[0].split('.').pop()?.trim();
+ if (ext === 'svg') {
+ return html`
+ this.#openSvg(item.url)}>
+ ${item.url}
+
+
+ `;
+ } else {
+ return html`
+
+ ${item.url}
+
+
+ `;
+ }
+ }
+
#renderGeneralSection() {
return html`