add image caption (#6003)

examples/reference/panes/Image.ipynb

@@ -99,6 +99,24 @@
     ")"
    ]
   },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "You can add a caption to the image by using the caption "
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.pane.Image(\n",
+    "    'https://assets.holoviz.org/panel/samples/png_sample2.png', sizing_mode='scale_width', caption='World Map'\n",
+    ")"
+   ]
+  },
   {
    "cell_type": "markdown",
    "metadata": {},

panel/pane/image.py

@@ -134,6 +134,9 @@ class ImageBase(FileBase):
         alt text to add to the image tag. The alt text is shown when a
         user cannot load or display the image.""")
 
+    caption = param.String(default=None, doc="""
+        Optional caption for the image.""")
+
     fixed_aspect = param.Boolean(default=True, doc="""
         Whether the aspect ratio of the image should be forced to be
         equal.""")
@@ -143,11 +146,11 @@ class ImageBase(FileBase):
         website.""")
 
     _rerender_params: ClassVar[List[str]] = [
-        'alt_text', 'link_url', 'embed', 'object', 'styles', 'width', 'height'
+        'alt_text', 'caption', 'link_url', 'embed', 'object', 'styles', 'width', 'height'
     ]
 
     _rename: ClassVar[Mapping[str, str | None ]] = {
-        'alt_text': None, 'fixed_aspect': None, 'link_url': None
+        'alt_text': None, 'fixed_aspect': None, 'link_url': None, 'caption': None,
     }
 
     _target_transforms: ClassVar[Mapping[str, str | None]] = {
@@ -171,6 +174,8 @@ def _format_html(
         html = f'<img src="{src}" {alt} style="max-width: 100%; max-height: 100%; object-fit: {object_fit};{width}{height}"></img>'
         if self.link_url:
             html = f'<a href="{self.link_url}" target="_blank">{html}</a>'
+        if self.caption:
+            html = f'<figure>{html}<figcaption>{self.caption}</figcaption></figure>'
         return escape(html)
 
     def _img_dims(self, width, height):

panel/tests/pane/test_image.py

@@ -311,3 +311,9 @@ def test_svg_stretch_both(embed, document, comm):
     model = svg.get_root(document, comm)
     assert 'width: 100%' in model.text
     assert 'height: 100%' in model.text
+
+def test_image_caption(document, comm):
+    png = PNG(PNG_FILE, caption='Some Caption')
+    model = png.get_root(document, comm)
+    assert 'Some Caption' in model.text
+    assert 'figcaption' in model.text