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
srcset output encoding
Raw
srcset-output-encoding.xml
<!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: 1rem;
}
.images {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.image {
margin-left: 1rem;
}
</style>
</head>
<body>
<mvt:capture variable="l.settings:image_json">[
{
"title": "Normal",
"filename": "graphics/00000001/color-green.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>
<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">
<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>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment