Skip to content

Instantly share code, notes, and snippets.

@steveosoule

steveosoule/srcset-output-encoding.xml

Last active August 5, 2025 16:33
Show Gist options
  • Save steveosoule/0cc13d2d1eb8f9f900bdb05465a4af6b to your computer and use it in GitHub Desktop.
Save steveosoule/0cc13d2d1eb8f9f900bdb05465a4af6b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. steveosoule revised this gist Aug 5, 2025. 1 changed file with 47 additions and 36 deletions.
    83 changes: 47 additions & 36 deletions srcset-output-encoding.xml
    View file
    Original file line number Diff line number Diff line change
    @@ -8,11 +8,16 @@
    <style>
    img {
    max-width: 150px;
    margin-left: 4rem;
    margin-left: 1rem;
    }

    .images {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    }

    .image {
    margin-left: 4rem;
    margin-left: 1rem;
    }
    </style>
    </head>
    @@ -23,17 +28,17 @@
    "title": "Normal",
    "filename": "graphics/00000001/color-green.png"
    },
    {
    "title": "Space",
    "filename": "graphics/00000001/color-green--with space.png"
    },
    {
    "title": "Comma",
    "filename": "graphics/00000001/color-green--with,comma.png"
    },
    {
    "title": "Tab",
    "filename": "graphics/00000001/color-green--with tab.png"
    },
    {
    "title": "Space",
    "filename": "graphics/00000001/color-green--with space.png"
    }
    ]</mvt:capture>

    @@ -42,36 +47,42 @@
    <mvt:assign name="l.result" value="miva_json_decode( l.settings:image_json, l.settings:images )" />

    <div class="images">
    <h2>default</h2>
    <mvt:foreach iterator="image" array="images">
    <div class="image">
    <h3><code>&mvt:image:filename;</code></h3>
    <picture>
    <source srcset="&mvt:image:filename;">
    <img src="graphics/00000001/color-red.png" alt="Failed to Load">
    </picture>
    </div>
    </mvt:foreach>
    <h2>encodeentities()</h2>
    <mvt:foreach iterator="image" array="images">
    <div class="image">
    <h3><code>&mvta:image:filename;</code></h3>
    <picture>
    <source srcset="&mvta:image:filename;">
    <img src="graphics/00000001/color-red.png" alt="Failed to Load">
    </picture>
    </div>
    </mvt:foreach>
    <h2>encodeURI()</h2>
    <mvt:foreach iterator="image" array="images">
    <div class="image">
    <h3><script>document.write(`<code>${encodeURI('&mvt:image:filename;')}</code>`);</script></h3>
    <picture>
    <script>document.write('<source srcset="' + encodeURI('&mvt:image:filename;') + '">');</script>
    <img src="graphics/00000001/color-red.png" alt="Failed to Load">
    </picture>
    </div>
    </mvt:foreach>
    <section>
    <h2>default</h2>
    <mvt:foreach iterator="image" array="images">
    <div class="image">
    <h3><code>&mvt:image:filename;</code></h3>
    <picture>
    <source srcset="&mvt:image:filename;">
    <img src="" alt="Failed to Load">
    </picture>
    </div>
    </mvt:foreach>
    </section>
    <section>
    <h2>encodeentities()</h2>
    <mvt:foreach iterator="image" array="images">
    <div class="image">
    <h3><code>&mvta:image:filename;</code></h3>
    <picture>
    <source srcset="&mvta:image:filename;">
    <img src="" alt="Failed to Load">
    </picture>
    </div>
    </mvt:foreach>
    </section>
    <section>
    <h2>encodeURI()</h2>
    <mvt:foreach iterator="image" array="images">
    <div class="image">
    <h3><script>document.write(`<code>${encodeURI('&mvt:image:filename;')}</code>`);</script></h3>
    <picture>
    <script>document.write('<source srcset="' + encodeURI('&mvt:image:filename;') + '">');</script>
    <img src="" alt="Failed to Load">
    </picture>
    </div>
    </mvt:foreach>
    </section>
    </div>

    </body>
  2. steveosoule created this gist Aug 5, 2025.
    78 changes: 78 additions & 0 deletions srcset-output-encoding.xml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,78 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base href="/mm5/">
    <title>picture</title>
    <style>
    img {
    max-width: 150px;
    margin-left: 4rem;
    }

    .image {
    margin-left: 4rem;
    }
    </style>
    </head>
    <body>

    <mvt:capture variable="l.settings:image_json">[
    {
    "title": "Normal",
    "filename": "graphics/00000001/color-green.png"
    },
    {
    "title": "Space",
    "filename": "graphics/00000001/color-green--with space.png"
    },
    {
    "title": "Comma",
    "filename": "graphics/00000001/color-green--with,comma.png"
    },
    {
    "title": "Tab",
    "filename": "graphics/00000001/color-green--with tab.png"
    }
    ]</mvt:capture>

    <mvt:comment> <pre>&mvt:image_json;</pre> </mvt:comment>

    <mvt:assign name="l.result" value="miva_json_decode( l.settings:image_json, l.settings:images )" />

    <div class="images">
    <h2>default</h2>
    <mvt:foreach iterator="image" array="images">
    <div class="image">
    <h3><code>&mvt:image:filename;</code></h3>
    <picture>
    <source srcset="&mvt:image:filename;">
    <img src="graphics/00000001/color-red.png" alt="Failed to Load">
    </picture>
    </div>
    </mvt:foreach>
    <h2>encodeentities()</h2>
    <mvt:foreach iterator="image" array="images">
    <div class="image">
    <h3><code>&mvta:image:filename;</code></h3>
    <picture>
    <source srcset="&mvta:image:filename;">
    <img src="graphics/00000001/color-red.png" alt="Failed to Load">
    </picture>
    </div>
    </mvt:foreach>
    <h2>encodeURI()</h2>
    <mvt:foreach iterator="image" array="images">
    <div class="image">
    <h3><script>document.write(`<code>${encodeURI('&mvt:image:filename;')}</code>`);</script></h3>
    <picture>
    <script>document.write('<source srcset="' + encodeURI('&mvt:image:filename;') + '">');</script>
    <img src="graphics/00000001/color-red.png" alt="Failed to Load">
    </picture>
    </div>
    </mvt:foreach>
    </div>

    </body>
    </html>