Linking images
The LinkImage plugin lets you use images as links.
# Demo
Click one of the images to open the contextual toolbar. Use the link icon 
to add a link to the image. After you do this, an icon will appear in the top-right corner of the image, indicating there is a link attached to it.
Visit our restaurant and get a gluten-free dish on the house!
Or order online and pay for the shipping only!
Spring tuna
This wonderful tuna steak is seared on the outside and deliciously juicy inside. Served with a side of red cabbage and beetroot salad along with steamed vegetables, it is a perfectly balanced, healthy dish full of nutrients and as tasty as it gets!
Autumn potatoes
Potatoes are the perfect dish for hungry people! Jacked potatoes, baked whole with a side of stir-fried vegetables and gluten-free barbecue sauce are the perfect choice for people who crave the nostalgic flavors of the countryside!
Follow us on socials
This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.
# Additional feature information
Here are some use cases where linking images can be useful:
- Linking to a high-resolution version of an image.
- Using images as thumbnails linking to an article or product page.
- Creating banners linking to other pages.
The image link can be added or edited via the image toolbar. An icon in top right corner of the image indicates the presence of a link.
An example source code for block image would look similar to this one:
<figure class="image">
<a href="...">
<img src="..." alt="...">
</a>
<figcaption>Image caption</figcaption>
</figure>
An inline image code would look more like this:
<a href="...">
Some text <img src="..." alt="..." style="width: 20px">
</a>
# Installation
To enable this feature, you need to load the LinkImage plugin. Read more in the installation guide.
The LinkImage plugin is available in the @ckeditor/ckeditor5-link package.
# Common API
The LinkImage plugin registers:
- The
'linkImage'button that opens the link UI when an image is selected by the user (to use in the image toolbar). - The
'linkImage'command.
We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.
# Contribute
The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-link.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.
With the release of version 42.0.0, we have rewritten much of our documentation to reflect the new import paths and features. We appreciate your feedback to help us ensure its accuracy and completeness.