Image Test

Foxdie included in category Test

2021-11-25 2021-11-25 142 words One minute

Contents

1 Basic Markdown Syntax for Image:

Images have a similar syntax to links but include a preceding exclamation point. ❕

1.1 With Label:

1

![Alt text](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

./images/stormtroopocat.jpg — The Stormtroopocat

1.2 Without Label:

1

![Alt text](https://octodex.github.com/images/stormtroopocat.jpg)

1.3 With Label and Admonition:

Click to fold

1
2
3


{{< admonition type=info title="Click to fold" open=true >}}
![The Stormtroopocat](./images/stormtroopocat.jpg "The Stormtroopocat")
{{< /admonition >}}

2 Using Image Shortcode

image shortcode is an alternative to figure shortcode. image shortcode can take full advantage of the dependent libraries of lazysizes and lightgallery.js.

1

{{< image src="images/stormtroopocat.jpg" caption="The Stormtroopocat" linked=true >}}

The rendered output looks like this:

/image-test/images/stormtroopocat.jpg — The Stormtroopocat

2.1 Using Image Shortcode with Admonition:

1
2
3


{{< admonition type=info title="Click to fold" open=true >}}
{{< image src="images/stormtroopocat.jpg" caption="The Stormtroopocat" linked=true >}}
{{< /admonition >}}

The rendered output looks like this:

Click to fold

        loading="lazy"
        src="/image-test/images/stormtroopocat.jpg"
        srcset="/image-test/images/stormtroopocat.jpg, /image-test/images/stormtroopocat.jpg 1.5x, /image-test/images/stormtroopocat.jpg 2x"
        sizes="auto"
        alt="/image-test/images/stormtroopocat.jpg" height="676"  width="704" >
</a><figcaption class="image-caption">The Stormtroopocat</figcaption>
</figure>

Question

I ran into a strange problem that I’m not sure how to resolve for the time being. Images shortcode does not function properly in admonition shortcode and only displays a link to the image (see below). Surprisingly, only one computer (my laptop) has this issue. That is, somehow because Scale and Layout of Windows Display is set to 150 %, therefore the symptom occurs globally in all browsers, instead of just one. Fortunately, images load normally on other devices (desktop PC, phones, and tablets).

The image below only shows a link, but changing the zooming level of the browser forces it to show, however.