Creating Clickable Images on GitBook
When I first started using GitBook for API documentation, I had a lot of trouble trying to implement this particular feature- Clickable images.
What I wanted was an image that could contain a hyperlink. My reason? I felt I could use a couple of linked-image widgets to liven up my documentation.
Linking an image in Markdown (Gitbook’s default code) requires a few more steps than I was used to in HTML. Markdown is a lightweight markup language for creating formatted text using a plain-text editor. And since its syntax slightly differs from HTML, I could not implement this with the usual HTML anchor tag <a href>
.
After a couple of experimentations, I found a way around it.
Here’s how I created clickable images on Gitbook, in three easy steps:
1. I uploaded the images onto a free server, instead of uploading them directly to Gitbook. Check out https://imgbb.com/
2. I copied the virtual address of the image as generated by the free server (HTTPS
with an image extension: .png
or .jpg
)
3. I then affixed the address into the Markdown code format below:
[](linked-website-address)
So basically,
[](https://some.site/your-link.html)
Copy this link and paste in your GitBook WYSIWYG Editor.
There you have it! Your image is now clickable!
PS: The Markdown code above was generated via a combination of 2 different subcodes
a. Usual Markdown code for adding links: [link-text](https://some.site/your-link.html)
b. Markdown code for adding images: 
I replaced the link-text
in code sample a with the markdown image code, like so:
[](https://some.site/your-link.html)