Image demo pattern

Image demo pattern

It is possible to use an image (static or animated) as a demo in a CodePattern.

Use an Img shortcode wrapped in a <figure> tag in the demo.md file. In this case, you should not add body.html to the demo assets. If you still want to display an HTML snippet, give it a name other than "body".

// demo.md

---
layout: demo
patternId: image-demo-example
---

<figure >
<img alt="WalkMe state toggle test." class="w-screenshot" decoding="async" height="400" loading="lazy" sizes="(min-width: 441px) 441px, calc(100vw - 48px)" src="https://web-dev.imgix.net/image/admin/3lZosaL1YXafLn4ZRINl.gif?auto=format" srcset="https://web-dev.imgix.net/image/admin/3lZosaL1YXafLn4ZRINl.gif?auto=format&w=200 200w, https://web-dev.imgix.net/image/admin/3lZosaL1YXafLn4ZRINl.gif?auto=format&w=228 228w, https://web-dev.imgix.net/image/admin/3lZosaL1YXafLn4ZRINl.gif?auto=format&w=260 260w, https://web-dev.imgix.net/image/admin/3lZosaL1YXafLn4ZRINl.gif?auto=format&w=296 296w, https://web-dev.imgix.net/image/admin/3lZosaL1YXafLn4ZRINl.gif?auto=format&w=338 338w, https://web-dev.imgix.net/image/admin/3lZosaL1YXafLn4ZRINl.gif?auto=format&w=385 385w, https://web-dev.imgix.net/image/admin/3lZosaL1YXafLn4ZRINl.gif?auto=format&w=439 439w, https://web-dev.imgix.net/image/admin/3lZosaL1YXafLn4ZRINl.gif?auto=format&w=500 500w, https://web-dev.imgix.net/image/admin/3lZosaL1YXafLn4ZRINl.gif?auto=format&w=571 571w, https://web-dev.imgix.net/image/admin/3lZosaL1YXafLn4ZRINl.gif?auto=format&w=650 650w, https://web-dev.imgix.net/image/admin/3lZosaL1YXafLn4ZRINl.gif?auto=format&w=741 741w, https://web-dev.imgix.net/image/admin/3lZosaL1YXafLn4ZRINl.gif?auto=format&w=845 845w, https://web-dev.imgix.net/image/admin/3lZosaL1YXafLn4ZRINl.gif?auto=format&w=882 882w" width="441" />
</figure>
<p>This sample gets diplayed in the code samples area,
but is not included in demo.html</p>
<p>This sample gets diplayed in the code samples area,
but is not included in demo.html</p>

{% Img src="image/admin/3lZosaL1YXafLn4ZRINl.gif", alt="WalkMe state toggle test.", width="441", height="400", class="w-screenshot" %}
Last updated: Improve article