image file info toegevoegd bij CMD+ENTER

webui/backend/app/api/routes_files.py

@@ -79,6 +79,19 @@ async def pdf(
     )
 
 
+@router.get("/image")
+async def image(
+    path: str,
+    service: FileOpsService = Depends(get_file_ops_service),
+) -> StreamingResponse:
+    prepared = service.prepare_image_stream(path=path)
+    return StreamingResponse(
+        prepared["content"],
+        headers=prepared["headers"],
+        media_type=prepared["content_type"],
+    )
+
+
 @router.get("/thumbnail")
 async def thumbnail(
     path: str,

webui/backend/app/api/schemas.py

@@ -92,6 +92,8 @@ class FileInfoResponse(BaseModel):
     content_type: str | None = None
     owner: str | None = None
     group: str | None = None
+    width: int | None = None
+    height: int | None = None
 
 
 class SettingsResponse(BaseModel):

webui/backend/app/fs/filesystem_adapter.py

@@ -2,6 +2,7 @@ from __future__ import annotations
 
 import shutil
 import mimetypes
+import struct
 import grp
 import pwd
 from datetime import datetime, timezone
@@ -23,6 +24,7 @@ class FilesystemAdapter:
             group = None
 
         content_type, _ = mimetypes.guess_type(path.name)
+        width, height = self._image_dimensions(path) if path.is_file() else (None, None)
         return {
             "name": path.name,
             "size": int(stat.st_size) if path.is_file() else None,
@@ -31,6 +33,8 @@ class FilesystemAdapter:
             "group": group,
             "content_type": content_type,
             "extension": path.suffix.lower() or None,
+            "width": width,
+            "height": height,
         }
 
     def list_directory(self, directory: Path, show_hidden: bool) -> tuple[list[dict], list[dict]]:
@@ -159,3 +163,114 @@ class FilesystemAdapter:
     def modified_iso(path: Path) -> str:
         stat = path.stat()
         return datetime.fromtimestamp(stat.st_mtime, tz=timezone.utc).isoformat().replace("+00:00", "Z")
+
+    def _image_dimensions(self, path: Path) -> tuple[int | None, int | None]:
+        suffix = path.suffix.lower()
+        try:
+            if suffix == ".png":
+                return self._png_dimensions(path)
+            if suffix in {".jpg", ".jpeg"}:
+                return self._jpeg_dimensions(path)
+            if suffix == ".gif":
+                return self._gif_dimensions(path)
+            if suffix == ".bmp":
+                return self._bmp_dimensions(path)
+            if suffix == ".webp":
+                return self._webp_dimensions(path)
+            if suffix == ".avif":
+                return self._avif_dimensions(path)
+        except (OSError, ValueError, struct.error):
+            return None, None
+        return None, None
+
+    @staticmethod
+    def _png_dimensions(path: Path) -> tuple[int | None, int | None]:
+        with path.open("rb") as handle:
+            header = handle.read(24)
+        if len(header) < 24 or header[:8] != b"\x89PNG\r\n\x1a\n":
+            return None, None
+        return struct.unpack(">II", header[16:24])
+
+    @staticmethod
+    def _jpeg_dimensions(path: Path) -> tuple[int | None, int | None]:
+        with path.open("rb") as handle:
+            if handle.read(2) != b"\xff\xd8":
+                return None, None
+            while True:
+                marker_prefix = handle.read(1)
+                if not marker_prefix:
+                    return None, None
+                if marker_prefix != b"\xff":
+                    continue
+                marker = handle.read(1)
+                while marker == b"\xff":
+                    marker = handle.read(1)
+                if not marker or marker in {b"\xd8", b"\xd9"}:
+                    return None, None
+                segment_length_bytes = handle.read(2)
+                if len(segment_length_bytes) != 2:
+                    return None, None
+                segment_length = struct.unpack(">H", segment_length_bytes)[0]
+                if segment_length < 2:
+                    return None, None
+                if marker in {b"\xc0", b"\xc1", b"\xc2", b"\xc3", b"\xc5", b"\xc6", b"\xc7", b"\xc9", b"\xca", b"\xcb", b"\xcd", b"\xce", b"\xcf"}:
+                    payload = handle.read(5)
+                    if len(payload) != 5:
+                        return None, None
+                    height, width = struct.unpack(">HH", payload[1:5])
+                    return width, height
+                handle.seek(segment_length - 2, 1)
+
+    @staticmethod
+    def _gif_dimensions(path: Path) -> tuple[int | None, int | None]:
+        with path.open("rb") as handle:
+            header = handle.read(10)
+        if len(header) < 10 or header[:6] not in {b"GIF87a", b"GIF89a"}:
+            return None, None
+        width, height = struct.unpack("<HH", header[6:10])
+        return width, height
+
+    @staticmethod
+    def _bmp_dimensions(path: Path) -> tuple[int | None, int | None]:
+        with path.open("rb") as handle:
+            header = handle.read(26)
+        if len(header) < 26 or header[:2] != b"BM":
+            return None, None
+        width, height = struct.unpack("<ii", header[18:26])
+        return abs(width), abs(height)
+
+    @staticmethod
+    def _webp_dimensions(path: Path) -> tuple[int | None, int | None]:
+        with path.open("rb") as handle:
+            header = handle.read(64)
+        if len(header) < 30 or header[:4] != b"RIFF" or header[8:12] != b"WEBP":
+            return None, None
+        chunk = header[12:16]
+        if chunk == b"VP8 " and len(header) >= 30:
+            width, height = struct.unpack("<HH", header[26:30])
+            return width & 0x3FFF, height & 0x3FFF
+        if chunk == b"VP8L" and len(header) >= 25:
+            bits = struct.unpack("<I", header[21:25])[0]
+            width = (bits & 0x3FFF) + 1
+            height = ((bits >> 14) & 0x3FFF) + 1
+            return width, height
+        if chunk == b"VP8X" and len(header) >= 30:
+            width = 1 + int.from_bytes(header[24:27], "little")
+            height = 1 + int.from_bytes(header[27:30], "little")
+            return width, height
+        return None, None
+
+    @staticmethod
+    def _avif_dimensions(path: Path) -> tuple[int | None, int | None]:
+        with path.open("rb") as handle:
+            data = handle.read(256 * 1024)
+        if b"ftypavif" not in data and b"ftypavis" not in data:
+            return None, None
+        index = data.find(b"ispe")
+        if index == -1 or index + 20 > len(data):
+            return None, None
+        width = int.from_bytes(data[index + 12:index + 16], "big")
+        height = int.from_bytes(data[index + 16:index + 20], "big")
+        if width <= 0 or height <= 0:
+            return None, None
+        return width, height

webui/backend/app/services/file_ops_service.py

@@ -32,6 +32,15 @@ THUMBNAIL_CONTENT_TYPES = {
     ".png": "image/png",
     ".webp": "image/webp",
 }
+IMAGE_CONTENT_TYPES = {
+    ".jpg": "image/jpeg",
+    ".jpeg": "image/jpeg",
+    ".png": "image/png",
+    ".webp": "image/webp",
+    ".gif": "image/gif",
+    ".bmp": "image/bmp",
+    ".avif": "image/avif",
+}
 VIDEO_CONTENT_TYPES = {
     ".mp4": "video/mp4",
     ".mkv": "video/x-matroska",
@@ -270,6 +279,8 @@ class FileOpsService:
             content_type=metadata["content_type"],
             owner=metadata["owner"],
             group=metadata["group"],
+            width=metadata["width"],
+            height=metadata["height"],
         )
 
     def save(self, path: str, content: str, expected_modified: str) -> SaveResponse:
@@ -413,6 +424,39 @@ class FileOpsService:
             "content": self._filesystem.stream_file(resolved_target.absolute),
         }
 
+    def prepare_image_stream(self, path: str) -> dict:
+        resolved_target = self._path_guard.resolve_existing_path(path)
+
+        if resolved_target.absolute.is_dir():
+            raise AppError(
+                code="type_conflict",
+                message="Source must be a file",
+                status_code=409,
+                details={"path": resolved_target.relative},
+            )
+        if not resolved_target.absolute.is_file():
+            raise AppError(
+                code="type_conflict",
+                message="Unsupported path type for image",
+                status_code=409,
+                details={"path": resolved_target.relative},
+            )
+
+        content_type = self._image_content_type_for(resolved_target.absolute)
+        if content_type is None:
+            raise AppError(
+                code="unsupported_type",
+                message="File type is not supported for image viewing",
+                status_code=409,
+                details={"path": resolved_target.relative},
+            )
+
+        return {
+            "headers": {"Content-Length": str(int(resolved_target.absolute.stat().st_size))},
+            "content_type": content_type,
+            "content": self._filesystem.stream_file(resolved_target.absolute),
+        }
+
     def prepare_pdf_stream(self, path: str) -> dict:
         resolved_target = self._path_guard.resolve_existing_path(path)
 
@@ -465,6 +509,10 @@ class FileOpsService:
     def _thumbnail_content_type_for(path: Path) -> str | None:
         return THUMBNAIL_CONTENT_TYPES.get(path.suffix.lower())
 
+    @staticmethod
+    def _image_content_type_for(path: Path) -> str | None:
+        return IMAGE_CONTENT_TYPES.get(path.suffix.lower())
+
     @staticmethod
     def _pdf_content_type_for(path: Path) -> str | None:
         return PDF_CONTENT_TYPES.get(path.suffix.lower())

webui/backend/tests/golden/test_api_image_golden.py

@@ -0,0 +1,102 @@
+from __future__ import annotations
+
+import asyncio
+import sys
+import tempfile
+import unittest
+from pathlib import Path
+
+import httpx
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[3]))
+
+from backend.app.dependencies import get_file_ops_service
+from backend.app.fs.filesystem_adapter import FilesystemAdapter
+from backend.app.main import app
+from backend.app.security.path_guard import PathGuard
+from backend.app.services.file_ops_service import FileOpsService
+
+
+PNG_1X1 = (
+    b"\x89PNG\r\n\x1a\n"
+    b"\x00\x00\x00\rIHDR"
+    b"\x00\x00\x00\x01\x00\x00\x00\x01\x08\x02\x00\x00\x00"
+    b"\x90wS\xde"
+    b"\x00\x00\x00\x0cIDATx\x9cc\xf8\xcf\xc0\x00\x00\x03\x01\x01\x00"
+    b"\xc9\xfe\x92\xef"
+    b"\x00\x00\x00\x00IEND\xaeB`\x82"
+)
+
+
+class ImageApiGoldenTest(unittest.TestCase):
+    def setUp(self) -> None:
+        self.temp_dir = tempfile.TemporaryDirectory()
+        self.root = Path(self.temp_dir.name) / "root"
+        self.root.mkdir(parents=True, exist_ok=True)
+        path_guard = PathGuard({"storage1": str(self.root)})
+        service = FileOpsService(path_guard=path_guard, filesystem=FilesystemAdapter())
+
+        async def _override_file_ops_service() -> FileOpsService:
+            return service
+
+        app.dependency_overrides[get_file_ops_service] = _override_file_ops_service
+
+    def tearDown(self) -> None:
+        app.dependency_overrides.clear()
+        self.temp_dir.cleanup()
+
+    def _request(self, path: str) -> httpx.Response:
+        async def _run() -> httpx.Response:
+            transport = httpx.ASGITransport(app=app)
+            async with httpx.AsyncClient(transport=transport, base_url="http://testserver") as client:
+                return await client.get("/api/files/image", params={"path": path})
+
+        return asyncio.run(_run())
+
+    def test_image_endpoint_success(self) -> None:
+        (self.root / "sample.png").write_bytes(PNG_1X1)
+
+        response = self._request("storage1/sample.png")
+
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(response.headers["content-type"], "image/png")
+        self.assertEqual(response.headers["content-length"], str(len(PNG_1X1)))
+        self.assertEqual(response.content, PNG_1X1)
+
+    def test_image_directory_type_conflict(self) -> None:
+        (self.root / "images").mkdir()
+
+        response = self._request("storage1/images")
+
+        self.assertEqual(response.status_code, 409)
+        self.assertEqual(response.json()["error"]["code"], "type_conflict")
+
+    def test_image_path_not_found(self) -> None:
+        response = self._request("storage1/missing.png")
+
+        self.assertEqual(response.status_code, 404)
+        self.assertEqual(response.json()["error"]["code"], "path_not_found")
+
+    def test_image_traversal_blocked(self) -> None:
+        response = self._request("storage1/../etc/passwd")
+
+        self.assertEqual(response.status_code, 403)
+        self.assertEqual(response.json()["error"]["code"], "path_traversal_detected")
+
+    def test_image_invalid_root_alias(self) -> None:
+        response = self._request("unknown/sample.png")
+
+        self.assertEqual(response.status_code, 403)
+        self.assertEqual(response.json()["error"]["code"], "invalid_root_alias")
+
+    def test_image_non_image_blocked(self) -> None:
+        (self.root / "notes.txt").write_text("hello", encoding="utf-8")
+
+        response = self._request("storage1/notes.txt")
+
+        self.assertEqual(response.status_code, 409)
+        self.assertEqual(response.json()["error"]["code"], "unsupported_type")
+
+
+if __name__ == "__main__":
+    unittest.main()

webui/backend/tests/golden/test_api_info_golden.py

@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 import asyncio
+import base64
 import sys
 import tempfile
 import unittest
@@ -17,6 +18,11 @@ from backend.app.security.path_guard import PathGuard
 from backend.app.services.file_ops_service import FileOpsService
 
 
+PNG_1X1 = base64.b64decode(
+    "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVR4nGP4z8AAAAMBAQDJ/pLvAAAAAElFTkSuQmCC"
+)
+
+
 class FileInfoApiGoldenTest(unittest.TestCase):
     def setUp(self) -> None:
         self.temp_dir = tempfile.TemporaryDirectory()
@@ -59,6 +65,8 @@ class FileInfoApiGoldenTest(unittest.TestCase):
         self.assertIn("modified", payload)
         self.assertIn("owner", payload)
         self.assertIn("group", payload)
+        self.assertIsNone(payload["width"])
+        self.assertIsNone(payload["height"])
 
     def test_directory_info_success(self) -> None:
         directory = self.root / "Media"
@@ -74,6 +82,20 @@ class FileInfoApiGoldenTest(unittest.TestCase):
         self.assertIsNone(payload["size"])
         self.assertEqual(payload["root"], "storage1")
         self.assertIsNone(payload["extension"])
+        self.assertIsNone(payload["width"])
+        self.assertIsNone(payload["height"])
+
+    def test_image_info_has_width_and_height(self) -> None:
+        file_path = self.root / "pixel.png"
+        file_path.write_bytes(PNG_1X1)
+
+        response = self._request("storage1/pixel.png")
+
+        self.assertEqual(response.status_code, 200)
+        payload = response.json()
+        self.assertEqual(payload["width"], 1)
+        self.assertEqual(payload["height"], 1)
+        self.assertEqual(payload["content_type"], "image/png")
 
     def test_info_path_not_found(self) -> None:
         response = self._request("storage1/missing.txt")
@@ -113,6 +135,8 @@ class FileInfoApiGoldenTest(unittest.TestCase):
                 "content_type",
                 "owner",
                 "group",
+                "width",
+                "height",
             },
         )
 

webui/backend/tests/golden/test_ui_smoke_golden.py

@@ -62,6 +62,11 @@ class UiSmokeGoldenTest(unittest.TestCase):
         self.assertIn('id="viewer-modal"', body)
         self.assertIn('id="video-modal"', body)
         self.assertIn('id="pdf-modal"', body)
+        self.assertIn('id="image-modal"', body)
+        self.assertIn('id="image-viewer-img"', body)
+        self.assertIn('id="image-zoom-in-btn"', body)
+        self.assertIn('id="image-zoom-out-btn"', body)
+        self.assertIn('id="image-reset-btn"', body)
         self.assertIn('id="pdf-frame"', body)
         self.assertIn('id="pdf-close-btn"', body)
         self.assertIn('id="video-player"', body)
@@ -192,6 +197,12 @@ class UiSmokeGoldenTest(unittest.TestCase):
         self.assertIn('function openSearch()', app_js)
         self.assertIn('async function submitSearch()', app_js)
         self.assertIn('async function openInfo()', app_js)
+        self.assertIn('function imageElements()', app_js)
+        self.assertIn('function isImageSelection(item)', app_js)
+        self.assertIn('async function openImageViewer()', app_js)
+        self.assertIn('function isImageOpen()', app_js)
+        self.assertIn("`/api/files/image?", app_js)
+        self.assertIn('if (isImageSelection(selected)) {', app_js)
         self.assertIn('document.getElementById("info-modal")', app_js)
         self.assertIn("`/api/files/info?", app_js)
         self.assertIn('document.getElementById("search-input")', app_js)

webui/html/app.js

@@ -51,6 +51,12 @@ let batchMoveState = {
   destinationBase: "",
   count: 0,
 };
+let imageViewerState = {
+  scale: 1,
+  fitScale: 1,
+  path: null,
+  resizeHandler: null,
+};
 let settingsState = {
   activeTab: "general",
   logsLoaded: false,
@@ -203,6 +209,22 @@ function pdfElements() {
   };
 }
 
+function imageElements() {
+  return {
+    overlay: document.getElementById("image-modal"),
+    title: document.getElementById("image-title"),
+    fileName: document.getElementById("image-file-name"),
+    filePath: document.getElementById("image-file-path"),
+    error: document.getElementById("image-error"),
+    viewport: document.getElementById("image-viewport"),
+    image: document.getElementById("image-viewer-img"),
+    closeButton: document.getElementById("image-close-btn"),
+    zoomInButton: document.getElementById("image-zoom-in-btn"),
+    zoomOutButton: document.getElementById("image-zoom-out-btn"),
+    resetButton: document.getElementById("image-reset-btn"),
+  };
+}
+
 function moveElements() {
   return {
     overlay: document.getElementById("move-popup"),
@@ -655,6 +677,32 @@ function isPdfSelection(item) {
   return (item.name || "").toLowerCase().endsWith(".pdf");
 }
 
+function isImageSelection(item) {
+  if (!item || item.kind !== "file") {
+    return false;
+  }
+  const lower = (item.name || "").toLowerCase();
+  return [".jpg", ".jpeg", ".png", ".webp", ".gif", ".bmp", ".avif"].some((suffix) => lower.endsWith(suffix));
+}
+
+function currentImageScale() {
+  return Number.isFinite(imageViewerState.scale) ? imageViewerState.scale : 1;
+}
+
+function applyImageScale() {
+  const image = imageElements().image;
+  image.style.transform = `scale(${currentImageScale()})`;
+}
+
+function resetImageViewerState() {
+  imageViewerState = {
+    scale: 1,
+    fitScale: 1,
+    path: null,
+    resizeHandler: null,
+  };
+}
+
 function currentParentPath(path) {
   const normalized = (path || "").trim();
   if (!normalized) {
@@ -1771,6 +1819,55 @@ function closePdfViewer() {
   pdf.frame.removeAttribute("src");
 }
 
+function isImageOpen() {
+  return !imageElements().overlay.classList.contains("hidden");
+}
+
+function fitImageToViewport() {
+  const image = imageElements().image;
+  const viewport = imageElements().viewport;
+  if (!image.naturalWidth || !image.naturalHeight) {
+    return;
+  }
+  const widthScale = viewport.clientWidth / image.naturalWidth;
+  const heightScale = viewport.clientHeight / image.naturalHeight;
+  imageViewerState.fitScale = Math.min(widthScale, heightScale, 1);
+  imageViewerState.scale = imageViewerState.fitScale;
+  applyImageScale();
+}
+
+function adjustImageZoom(multiplier) {
+  if (!isImageOpen()) {
+    return;
+  }
+  const minScale = Math.max(imageViewerState.fitScale * 0.5, 0.1);
+  const maxScale = Math.max(imageViewerState.fitScale * 6, 1.5);
+  imageViewerState.scale = Math.min(maxScale, Math.max(minScale, currentImageScale() * multiplier));
+  applyImageScale();
+}
+
+function resetImageZoom() {
+  if (!isImageOpen()) {
+    return;
+  }
+  imageViewerState.scale = imageViewerState.fitScale;
+  applyImageScale();
+}
+
+function closeImageViewer() {
+  const image = imageElements();
+  image.overlay.classList.add("hidden");
+  image.error.textContent = "";
+  image.image.removeAttribute("src");
+  image.image.removeAttribute("alt");
+  image.image.onload = null;
+  image.image.onerror = null;
+  if (imageViewerState.resizeHandler) {
+    window.removeEventListener("resize", imageViewerState.resizeHandler);
+  }
+  resetImageViewerState();
+}
+
 function isInfoOpen() {
   return !infoElements().overlay.classList.contains("hidden");
 }
@@ -1815,6 +1912,8 @@ async function openInfo() {
     renderInfoField("Content type", data.content_type);
     renderInfoField("Owner", data.owner);
     renderInfoField("Group", data.group);
+    renderInfoField("Width", data.width);
+    renderInfoField("Height", data.height);
   } catch (err) {
     elements.error.textContent = err.message;
   }
@@ -2116,6 +2215,36 @@ async function openPdfViewer() {
   pdf.frame.src = pdfUrl;
 }
 
+async function openImageViewer() {
+  const selectedItems = activePaneState().selectedItems;
+  if (selectedItems.length !== 1 || !isImageSelection(selectedItems[0])) {
+    return;
+  }
+  const selected = selectedItems[0];
+  const image = imageElements();
+  const imageUrl = `/api/files/image?${new URLSearchParams({ path: selected.path }).toString()}`;
+
+  closeImageViewer();
+  image.overlay.classList.remove("hidden");
+  image.title.textContent = "Image";
+  image.fileName.textContent = selected.name;
+  image.filePath.textContent = selected.path;
+  image.error.textContent = "";
+  image.image.alt = selected.name;
+  image.image.onload = () => {
+    fitImageToViewport();
+    image.image.onload = null;
+  };
+  image.image.onerror = () => {
+    image.error.textContent = "Image could not be displayed in this browser.";
+    image.image.onerror = null;
+  };
+  imageViewerState.path = selected.path;
+  imageViewerState.resizeHandler = () => fitImageToViewport();
+  window.addEventListener("resize", imageViewerState.resizeHandler);
+  image.image.src = imageUrl;
+}
+
 function videoPlaybackMessage(item) {
   const lower = (item.name || "").toLowerCase();
   if (lower.endsWith(".mkv")) {
@@ -2179,6 +2308,10 @@ function openViewer() {
     return;
   }
   const selected = selectedItems[0];
+  if (isImageSelection(selected)) {
+    openImageViewer();
+    return;
+  }
   if (isVideoSelection(selected)) {
     openVideoViewer();
     return;
@@ -2369,6 +2502,13 @@ function handleKeyboardShortcuts(event) {
     }
     return;
   }
+  if (isImageOpen()) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeImageViewer();
+    }
+    return;
+  }
   if (isVideoOpen()) {
     if (event.key === "Escape") {
       event.preventDefault();
@@ -2553,6 +2693,12 @@ function setupEvents() {
     }
   };
 
+  const image = imageElements();
+  image.closeButton.onclick = closeImageViewer;
+  image.zoomInButton.onclick = () => adjustImageZoom(1.2);
+  image.zoomOutButton.onclick = () => adjustImageZoom(1 / 1.2);
+  image.resetButton.onclick = resetImageZoom;
+
   const search = searchElements();
   search.closeButton.onclick = closeSearch;
   search.overlay.onclick = (event) => {

webui/html/base.css

@@ -626,6 +626,36 @@ button:disabled {
   border: 1px solid var(--color-border);
 }
 
+.image-card {
+  width: min(1100px, calc(100vw - 28px));
+}
+
+.image-toolbar {
+  display: flex;
+  gap: 8px;
+  margin: 8px 0 8px 0;
+}
+
+.image-viewport {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 420px;
+  height: calc(100vh - 240px);
+  overflow: auto;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: color-mix(in srgb, var(--color-surface) 88%, black 12%);
+}
+
+.image-viewer-img {
+  max-width: none;
+  max-height: none;
+  transform-origin: center center;
+  transition: transform 120ms ease;
+  user-select: none;
+}
+
 .search-card {
   width: min(680px, calc(100vw - 32px));
 }

webui/html/index.html

@@ -249,6 +249,24 @@
     </div>
   </div>
 
+  <div id="image-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="image-title">
+    <div class="popup-card viewer-card image-card">
+      <button id="image-close-btn" class="viewer-close" type="button" aria-label="Close image">X</button>
+      <h3 id="image-title">Image</h3>
+      <div id="image-file-name" class="popup-meta"></div>
+      <div id="image-file-path" class="popup-meta"></div>
+      <div class="image-toolbar">
+        <button id="image-zoom-out-btn" type="button">Zoom out</button>
+        <button id="image-reset-btn" type="button">Reset</button>
+        <button id="image-zoom-in-btn" type="button">Zoom in</button>
+      </div>
+      <div id="image-error" class="error"></div>
+      <div id="image-viewport" class="image-viewport">
+        <img id="image-viewer-img" class="image-viewer-img" alt="">
+      </div>
+    </div>
+  </div>
+
   <div id="editor-modal" class="popup-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="editor-title">
     <div class="popup-card viewer-card editor-card">
       <button id="editor-close-btn" class="viewer-close" type="button" aria-label="Close editor">X</button>