Figure Your Visuals

This guide will show you how to effectively present and link to figures in your artworks, making it easier for readers to navigate and reference visual content.

Presenting Figures

1. Present your figure with an <img> tag and a <div> for the caption:

<img src="<path-to-img>">
<div align="center" style="font-weight: bold; margin-bottom:12px; padding-top:0px">
Fig X.0: Name It not Yaya
</div>

Creating Linkable Sections

2. Add an HTML anchor with an ID to the <div> element you want to link to:

<div id="my-div">
   <!-- Content of the div -->
</div>

3. Create a link in your Markdown content that references the anchor ID:

[Link to My Div](#my-div)

Putting It All Together

Here's an example of how to implement this in your writing:

1. In your table of figures, create a link to your figure:

## Table Of Figures
- [Fig 6.0: Cruddur Stale User Interface](#staleui-figure)

2. Where you want to display the figure, use this structure:

<img src="assets/Week3/Cognito JWT/Token/37 something is wrong.png">
<div id="staleui-figure" align="center" style="font-weight: bold; margin-bottom:12px; padding-top:0px">Fig 6.0: Cruddur Stale User Interface</div>

Note: While the image appears at the top, it's actually the <div> element that serves as the link target.

Best Practices

• Be consistent with your naming conventions for figures and IDs.
• Avoid using spaces when naming assets. Use hyphens or underscores instead.
• Consider using a numbering system for your figures to make them easier to reference.

Example

For a practical example of this technique in action, refer to the Table of Figures in Week 3 (opens in a new tab) of the writing.

Remember, this approach not only makes your writing more visually appealing but also improves its navigability and user-friendliness.