qia-image - An HTML Custom Element to Supplement or Replace the img Element

UUID: 63347bb2-38ce-4766-a59a-89c864d901d5
Links
- as part of JH-Articles: Web Libraries ~ qia-image
Timestamps
- 20231209.Started this article
- 20231209.Hade the full strucutre

What is <qia-image>?

a web GUI widget component for displaying a single image as well as annotation with HTML custom element APIs
<qia-image> appears in two forms in terms of getting image source
- <qia-image> without src but with a child img element as its first non-blank child node
  - <qia-image> will take use of the currentSrc, alt, title and style attribute values from the img element
    - for the image on focus embedded inside <qia-image>
  - <qia-image> will take all other child nodes as a displayed annotation for the image sourced from img[src]
    - when there is no other non-blank child node than img[src], the img[alt] will be used as the annotation
- <qia-image> with src
  - <qia-image> will take all its child nodes as a displayed annotation for the image source from qia-image[src]

<qia-image> in comparison to <img>

<qia-image> can have children elements as image annotation
- where the self-closing <img> only can have alt and title as supplements to the image on focus
<qia-image> accepts image source in two ways: either from the attribute src or from its first non-blank <img> child node
- where <img> accepts image source from attribute src and srcset

Use Cases

When or where is qia-image needed? Why necessary?

when caption text is needed for an image unit
when limited space is left or preferred for an image and no scaling but scrolling is preferred

Features

What does qia-image bring?

qia-image allows annotation text provided to the image
qia-image enforces max-height 80vh and overflowY auto
- comparing to img, this saves space without loosing content by allowing scrolling
- for images that are indeed tall with information

APIs

How to use?

<qia-image>
    <img src="" alt="">
</qia-image>

<qia-image src="">
    Annotation HTML
</qia-image>

Live Demos

JH-WWW.Dark.Wide.20231210

JH-WWW.Dark.High.20231210

Code Examples


<qia-image>
    <img src="assets/20231102-000255.png" alt="Caption: Slotted/Wrapped Qia Image" title="Tooltip: Qia Image 1" style="width: 400px; height: 300px;">
</qia-image>

<qia-image style="width: 400px; height: 400px;">
    <img src="assets/20231102-000255.png" alt="Caption: Slotted/Wrapped Qia Image">
    The above image is an example.
    (It is taken on 20231101.)
    <img src="assets/20231102-000350.png" alt="Caption: Qia Image 2" title="Tooltip: Qia Image 2">
</qia-image>

<qia-image style="width: 400px; height: 400px;">
    The following image is an example.
    <img src="assets/20231102-000255.png" alt="Caption: Slotted/Wrapped Qia Image">
    (It is taken on 20231101.)
    <img src="assets/20231102-000350.png" alt="Caption: Qia Image 2" title="Tooltip: Qia Image 2">
</qia-image>

<qia-image style="width: 400px;">
    <img src="assets/20231102-000255.png" alt="Caption: Slotted/Wrapped Qia Image">
    The above image is an example.
    (It is taken on 20231101.)
    <img src="assets/20231102-000350.png" alt="Caption: Qia Image 2" title="Tooltip: Qia Image 2">
</qia-image>



<qia-image src="assets/20231102-000255.png" title="Tooltip: Qia Image 1" style="width: 400px; height: 300px;">Caption: Qia Image 1</qia-image>

<qia-image src="assets/20231102-000255.png" title="Tooltip: Qia Image 1" style="width: 400px; height: 400px;">
    Caption: Qia Image 1 <br>
    The following image is for describing the main image
    <img src="assets/20231102-000350.png" title="Tooltip: Qia Image 2">
</qia-image>

<qia-image src="assets/20231102-000255.png" title="Tooltip: Qia Image 1" style="width: 400px; height: 400px;">
    <img src="assets/20231102-000350.png" title="Tooltip: Qia Image 2">
    The above image is for describing the main image <br>
    Caption: Qia Image 1
</qia-image>



<qia-image src="assets/20231102-000255.png" title="Tooltip: Qia Image 1" style="width: 400px; height: 400px;">
    Caption: Qia Image 1 <br>
    The following image is for describing the main image
    <qia-image src="assets/20231102-000350.png" title="Tooltip: Qia Image 2">Caption: Qia Image 2</qia-image>
</qia-image>

<qia-image src="assets/20231102-000255.png" title="Tooltip: Qia Image 1">
    Caption: Qia Image 1 <br>
    The following image is for describing the main image <br>
    <qia-image src="assets/20231102-000350.png" title="Tooltip: Qia Image 2" style="width: 400px;">Caption: Qia Image 2</qia-image>
</qia-image>

More Use Cases

The use cases I have (as part of a bigger blueprint) include the following

using <qia-image> as a drop-in replacement for <img> in HTML documents
- although <qia-image> lacks certain features comparing to <img> such as the support of srcset
- the HTML documents can be resulted from converting Markdown
using qia-image as an cutomized alternative or enhancement to img for Markdown notion ![]() in Markdown
- ![]() which could include several different variants
  - ![alt](src) - the standard one
  - ![alt](src "title") - non-standard but also exists
- indicating ![]() as qia-image can have several different ways
  - making qia-image the default translation for ![]()
    - which results in a pattern as <qia-image src="" title="">alt</qia-image>
  - surround ![]() with <qia-image> and </qia-image>
    - which results in a patterns as
      - <qia-image><img alt="" src="" title="" /></qia-image>
      - <qia-image><img alt="" src="" title="" />...MoreOtherNodes..</qia-image>
using <qia-image> for more annotation to the image on focus
- in patterns where innerHTML is the annotation as
  - <qia-image src="">innerHTML</qia-image>
  - <qia-image><img alt="" src="" title="" />innerHTML</qia-image>

But down to the earth, why I made it? For my own Markdown parser to support syntax beyond just ![](), to use in places like my websites such as JH-Articles. As a sneak peak, there will also be something as !qia-image[innerHTML](src "title") as well as !qia-audio{"lrc-src": "..."}[innerHTML](src "title") and qia-link[innerHTML](href "title").

* cached version, generated at 2024-01-10 13:55:18 UTC.