Add references between image and pic in UG

MarkBind · Apr 11, 2024 · 362f761 · 362f761
1 parent e0e9239
commit 362f761
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/docs/userGuide/syntax/images.md b/docs/userGuide/syntax/images.md
@@ -61,3 +61,9 @@ Clicking on this image will bring you to the MarkBind homepage (instead of openi
 [![logo](https://markbind.org/images/logo-lightbackground.png =150x)](https://markbind.org)
 </variable>
 </include>
+
+<box type="info" seamless>
+
+If you want to display images with captions, or have the image auto-resize to fit its container, take a look at [MarkBind's `pic` component]({{baseUrl}}/userGuide/components/imagesAndDiagrams.html#pictures).
+
+</box>
diff --git a/docs/userGuide/syntax/pictures.md b/docs/userGuide/syntax/pictures.md
@@ -20,6 +20,12 @@ src | `string` | | **This must be specified.**<br>The URL of the image.<br>The U
 width | `string` | | The width of the image in pixels.<br>If both width and height are specified, width takes priority over height. It is to maintain the image's aspect ratio.
 lazy | `boolean` | false | The `<pic>` component lazy loads if this attribute is specified.<br>**Either the height or width should be specified to avoid layout shifts while lazy loading images.**
 
+<box type="info" seamless>
+
+If you want to display images that are automatically linked to its image URL, such that one can click on the image to view the full image, take a look at [MarkBind images]({{baseUrl}}/userGuide/formattingContents.html#images).
+
+</box>
+
 <div id="short" class="d-none">
 
 ```html