Handling image resizing

You might have noticed that the width settings from your Notion pages are currently not reflected on your HelpKit site. At the moment Notion does not provide the width of their images via their API which means in HelpKit all images have to be displayed with a 100% width. To counteract scaling portrait images to a width of 100%, we have implemented an algorithm that detects portrait images and sizes them accordingly.

This system works great in 80% of cases but there will be edge cases where you would like the images to look a bit different. No worries, we will go over the most common issues you might face and show you a workaround.

This will most likely happen if your image is close to a 1:1 square format. The easiest solution to make your picture appear smaller is to give the image a border and use the newly generated image for HelpKit. There are multiple easy ways to achieve this. You could use a tool such as:

Image without border:

Image with border:

You also have the option to insert 3 column rows and put your image in the middle column and then adjusted the width of the column. This lets you set it to a reasonable size. There are discrete widths, so you can keep the width of the images looking consistent.

Luckily there’s a easy and extremely customizable way for you to achieve this. All you have to do is use HelpKit’s custom CSS feature and target the following class .notion-image-inset

If you feel stuck or have any questions regarding your images, don’t hesitate to reach out. We are always eager trying to help you make your site look as best as possible 💪