fix: revealjs-section supports relative image for background

sphinx_revealjs/directives.py

@@ -2,6 +2,7 @@
 
 import json
 
+from docutils import nodes
 from docutils.nodes import Sequential  # type: ignore
 from docutils.parsers.rst import Directive, directives  # type:ignore
 from sphinx.util import logging
@@ -83,6 +84,15 @@ def __getitem__(self, key):
 }
 
 
+def inject_children(node: revealjs_section) -> revealjs_section:
+    """Inject extra nodes as children."""
+    if "data-background-image" in node.attributes:
+        child = nodes.image(uri=node.attributes["data-background-image"])
+        node.append(child)
+
+    return node
+
+
 class RevealjsVertical(Directive):  # noqa: D101
     option_spec = RevealjsSectionAttributes(**REVEALJS_SECTION_ATTRIBUTES)
 
@@ -101,7 +111,7 @@ def run(self):  # noqa: D102
         node = revealjs_section()
         node.attributes = self.options
         return [
-            node,
+            inject_children(node),
         ]
 
 

sphinx_revealjs/writers.py

@@ -1,16 +1,40 @@
 """Custom write module."""
 
+import posixpath
+from typing import Union
+
 from docutils.nodes import (  # type: ignore
     Element,
     SkipNode,
     comment,
+    image,
     literal_block,
     section,
     title,
 )
+from sphinx.builders.html import StandaloneHTMLBuilder
 from sphinx.writers.html5 import HTML5Translator
 
-from .nodes import revealjs_break, revealjs_section, revealjs_slide, revealjs_vertical
+from .nodes import (
+    revealjs_break,
+    revealjs_section,
+    revealjs_slide,
+    revealjs_vertical,
+)
+
+
+def build_attributes_str(
+    node: Union[revealjs_section, revealjs_break, revealjs_vertical],
+    builder: StandaloneHTMLBuilder,
+) -> str:
+    node = node.deepcopy()
+    img_idx = node.first_child_matching_class(image)
+    if img_idx is not None:
+        img: image = node.children[img_idx]  # type: ignore[assignment]
+        node["data-background-image"] = posixpath.join(
+            builder.imgpath, builder.images[img["uri"]]
+        )
+    return node.attributes_str()
 
 
 class RevealjsSlideTranslator(HTML5Translator):
@@ -33,7 +57,10 @@ def visit_section(self, node: section):
         if self.section_level >= 4:
             return
         idx = node.first_child_matching_class(revealjs_section)
-        attrs = "" if idx is None else node.children[idx].attributes_str()  # type: ignore[attr-defined]
+        attrs = ""
+        if idx is not None:
+            attrs = build_attributes_str(node.children[idx], self.builder)  # type: ignore[arg-type]
+
         if node.attributes.get("ids") and self.config.revealjs_use_section_ids:
             attrs += ' id="{}"'.format(node.attributes["ids"][-1])
 

tests/roots/test-default/with-section-directives/with-background-image.rst

@@ -0,0 +1,14 @@
+=================
+Test presentation
+=================
+
+Sample
+======
+
+.. revealjs-section::
+   :data-background-image: images/photo.jpg
+
+Head
+----
+
+content

tests/test_directives/test_section.py

@@ -1,6 +1,7 @@
 """Test cases for ``revealjs-section`` directive."""
 
 import io
+from pathlib import Path
 from textwrap import dedent
 
 import pytest
@@ -56,6 +57,15 @@ def test_render_custom_attributes(app: SphinxTestApp, status, warning):  # noqa
     assert section_tag["data-markdown"] == ""
 
 
+@pytest.mark.sphinx("revealjs", testroot="default")
+def test_render_local_photo(app: SphinxTestApp):  # noqa
+    soup = soup_html(app, "with-section-directives/with-background-image.html")
+    assert (Path(app.outdir) / "_images/photo.jpg").exists()
+    section_tag = soup.h2.parent
+    assert "data-background-image" in section_tag.attrs
+    assert section_tag["data-background-image"] == "../_images/photo.jpg"
+
+
 class TestForRevealjsSection:
     @pytest.mark.sphinx("revealjs", testroot="default")
     def test_csutom_params(self, app: SphinxTestApp, warning: io.StringIO):