Image Test

Foxdie included in category Test

2021-11-25 2021-11-25 489 words 3 minutes

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")

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" height="676" width="704" linked=true >}}
{{< /admonition >}}

The rendered output looks like this:

Click to fold

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.

2.2 Image with Hover Text Boxes: (experimental)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


$(document).ready(function() {
  $('.image-container').each(function() {
    const container = $(this);
    const containerOffset = container.offset();
    container.find('.note-box.movable').each(function() {
      const noteBox = $(this);
      const initialX = parseFloat(noteBox.data('initial-x'));
      const initialY = parseFloat(noteBox.data('initial-y'));
      const containerWidth = container.width();
      const containerHeight = container.height();
      const clampedX = Math.min(Math.max(initialX, 0), 100 - (noteBox.outerWidth() / containerWidth * 100));
      const clampedY = Math.min(Math.max(initialY, 0), 100 - (noteBox.outerHeight() / containerHeight * 100));
      noteBox.css({
        'position': 'absolute',
        'top': `${clampedY}%`,
        'left': `${clampedX}%`
      });
      noteBox.on('mousedown', function(e) {
        e.preventDefault();
        const startX = e.pageX;
        const startY = e.pageY;
        const startNoteBoxX = parseFloat(noteBox.css('left'));
        const startNoteBoxY = parseFloat(noteBox.css('top'));
        $(document).on('mousemove', function(e) {
          const offsetX = e.pageX - startX;
          const offsetY = e.pageY - startY;

          const x = Math.min(Math.max(startNoteBoxX + offsetX, 0), containerWidth - noteBox.outerWidth());
          const y = Math.min(Math.max(startNoteBoxY + offsetY, 0), containerHeight - noteBox.outerHeight());
          noteBox.css({
            'left': `${x}px`,
            'top': `${y}px`
          });
        });
        $(document).on('mouseup', function() {
          $(document).off('mousemove');
          $(document).off('mouseup');
        });
      });
    });
    container.css({
      'width': `${container.find('img').width()}px`,
      'height': `${container.find('img').height()}px`
    });
  });
});

1

{{< image2 src="images/stormtroopocat.jpg" caption="The Stormtroopocat" height="676" width="704" linked="true" data-initial-x="50" data-initial-y="50" textbox_content="This is the <b>first line</b> | This is the second line." >}}

https://foxdie.one/image-test/images/stormtroopocat.jpg — The Stormtroopocat