# Visual Markup ### About this export | Field | Value | | --- | --- | | **content_type** | lesson | | **platform** | contentstack-academy | | **source_url** | https://www.contentstack.com/academy/courses/contentstack-assets-foundations/visual-markup | | **course_slug** | contentstack-assets-foundations | | **lesson_slug** | visual-markup | | **markdown_file_url** | /academy/md/courses/contentstack-assets-foundations/visual-markup.md | | **generated_at** | 2026-05-28T12:30:00.532Z | > Part of **[Contentstack Assets Foundations](https://www.contentstack.com/academy/courses/contentstack-assets-foundations)** on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys. #### Video details #### At a glance - **Title:** Visual Markups - **Duration:** 4m 33s - **Media link:** https://cdn.jwplayer.com/previews/3KVfWhBM - **Publish date (unix):** 1778505358 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113566 kbps - video/mp4 · 180p · 180p · 150362 kbps - video/mp4 · 270p · 270p · 177200 kbps - video/mp4 · 360p · 360p · 205930 kbps - video/mp4 · 406p · 406p · 223479 kbps - video/mp4 · 540p · 540p · 277888 kbps - video/mp4 · 720p · 720p · 362318 kbps - video/mp4 · 1080p · 1080p · 593734 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/3KVfWhBM-120.vtt` #### Video transcript A great image tells a story. But in a modern digital experience, sometimes you need an image to do more than just look good. It needs to be interactive. Whether you're tagging products in a lifestyle shot, annotating a complex technical diagram, or creating a shoppable gallery, visual markups transform static files into actionable data. So again, the visual markups are a way for you to create an overlay clickable area within an image. It's adding metadata detail to that graphic. And you can do that in a couple different ways. So let's first take a look at a very basic example. I'll come over here and open up this image. And when I do, I'll then come over and choose this button here on the far right, which is visual markup. Now there's a couple different options that are available to you. You can add the markup yourself, or if you have an image like this with a couple obvious features in it, in this case some boats, AI is going to do a great job of figuring out that this image has some boats. So if we choose suggest markup with AI, it does in fact find both of those boats. So I'll go ahead and select these. So now we've created this area around each of these boats. And we may want to add some additional metadata to them describing what these boats are. So in order for you to do that, you would come over and click on the pin, which will open up a small window. And here we could provide a description. And we could type in something fairly detailed here, like fishing boat. You could go ahead and type in what location in the world it's in currently, what type of fish it's used for, so on and so forth. To save some time, I'm just going to type in fishing boat. But then when I click save bounding box, that's now permanently part of this image. Now this becomes incredibly powerful when you use these assets in your entries, because the markup data is part of the asset record itself. All your developers have to do is pull that metadata to build an interactive front end experience. And so this is a nice way to add some contextual information around an image. I'll come over here and click save asset. One additional thing that I want to show you, because we worked with the bounding box, there is another option here. So I'm going to come back to the assets section and open up this image here. And let's just say, for example, this image was part of a blog of a lifestyle company that sells outdoor gear. Down here towards the bottom, we have some controls where we can zoom in and out of the image. I'll go ahead and zoom in. Let's say, for example, the company sold this backpack. Again, we can come over to the visual markup option. Instead of using markup with AI this time, let's just add it manually. And you'll notice you have two options. You have the bounding box, which is what we saw AI generate around the boats just a moment ago. But here I can select hotspot. And I can essentially drop a pin on this backpack. And here I could type in information around what this backpack is, why you would want it. But the real power comes from this URL where I could link it to an actual website that sold this product. So whatever the website is, you would just type that in, this URL, and it would create a link to this product page. So it can be really powerful when it comes to e-commerce of being able to highlight different parts of an image and then move the user to that location within their e-commerce site. So again, I'll come over here and click Save Asset. So to wrap up, I just want to point out that these visual markups really turn your images into a map of information. We can use AI suggestions to quickly add these hotspots or we can do it manually and we can add custom URLs so our library could potentially become a revenue generating tool by linking different elements within the image to different product pages within an e-commerce site. #### Key takeaways - Connect **Visual Markup** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ## Supplement for indexing ### Content summary Visual Markup. Visual Markup in Contentstack Assets Foundations (contentstack-assets-foundations). ### Retrieval tags - Visual - Markup - contentstack-assets-foundations - lesson 09 - Visual Markup - contentstack-assets-foundations lesson ### Indexing notes Index this lesson as a primary chunk tagged with lesson_id "09" and topics: [Visual, Markup]. Parent course slug: contentstack-assets-foundations. Use asset_references URLs as thumbnail hints in search results when present. Never surface LMS quiz content or assessment answers from this file. ### Asset references | Label | URL | | --- | --- | | Video thumbnail: Visual Markup | `https://cdn.jwplayer.com/v2/media/3KVfWhBM/poster.jpg?width=720` | ### External links | Label | URL | | --- | --- | | Contentstack Academy home | `https://www.contentstack.com/academy/` | | Training instance setup | `https://www.contentstack.com/academy/training-instance` | | Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` | | Contentstack documentation | `https://www.contentstack.com/docs/` |