Skip to content

MkImageCompare

Show source on GitHub

Node to show an Image comparison (using a slider).

Example: Regular

Jinja

{{ "https://picsum.photos/700" | MkImageCompare(after_image="https://picsum.photos/701") }}

Python

MkImageCompare('https://picsum.photos/700', 'https://picsum.photos/701')


<img-comparison-slider>
  <img src="https://picsum.photos/700" slot="first">
  <img src="https://picsum.photos/701" slot="second">
</img-comparison-slider>

<p><img-comparison-slider>
  <img src="https://picsum.photos/700" slot="first">
  <img src="https://picsum.photos/701" slot="second">
</img-comparison-slider></p>

Bases: MkTemplate

__init__ 

__init__(before_image: str, after_image: str, **kwargs: Any)

Parameters:

Name Type Description Default
before_image str

Image shown with slider to the right

 required
after_image str

Image shown with slider to the left

 required
kwargs Any

Keyword arguments passed to parent

 {}
Name Children Inherits
MkTemplate
mknodes.templatenodes.mktemplate
Node representing a jinja template.		 
graph TD
  94842457621888["mkimagecompare.MkImageCompare"]
  94842457643472["mktemplate.MkTemplate"]
  94842457569728["mkcontainer.MkContainer"]
  94842456688800["mknode.MkNode"]
  94842459618352["node.Node"]
  139878036543968["builtins.object"]
  94842457643472 --> 94842457621888
  94842457569728 --> 94842457643472
  94842456688800 --> 94842457569728
  94842459618352 --> 94842456688800
  139878036543968 --> 94842459618352
/home/runner/work/mknodes/mknodes/mknodes/basenodes/mkimagecompare/metadata.toml
[metadata]
icon = "mdi:image-off"
name = "MkImageCompare"
group = "image"

[[resources.js]]
link = "https://unpkg.com/img-comparison-slider@7/dist/index.js"
defer = true

[[resources.css]]
filename = "https://unpkg.com/img-comparison-slider@7/dist/styles.css"


[examples.regular]
title = "Regular"
jinja = """
{{ "https://picsum.photos/700" | MkImageCompare(after_image="https://picsum.photos/701") }}
"""

[output.html]
template = """
<img-comparison-slider>
  <img src="{{ node.before_image }}" slot="first">
  <img src="{{ node.after_image }}" slot="second">
</img-comparison-slider>
"""
mknodes.basenodes.mkimagecompare.MkImageCompare
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class MkImageCompare(mktemplate.MkTemplate):
    """Node to show an Image comparison (using a slider)."""

    ICON = "material/image-off"
    JS_FILES = [resources.JSFile(JS_URL, defer=True)]
    CSS = [resources.CSSFile(CSS_URL)]

    def __init__(
        self,
        before_image: str,
        after_image: str,
        **kwargs: Any,
    ):
        """Constructor.

        Args:
            before_image: Image shown with slider to the right
            after_image: Image shown with slider to the left
            kwargs: Keyword arguments passed to parent
        """
        super().__init__("output/html/template", **kwargs)
        self.before_image = before_image
        self.after_image = after_image