By default, Scroll Viewport displays images in their original size and center-aligned. To ensure readability of articles, Scroll Viewport might adjust your images if they exceed a certain width or height.
Learn how Viewport handles your images and how you can control their size and alignment.
Adjusting the Image Size
Viewport will display images in their original size, as long as the following applies:
The original image is not wider than the width of the article content column in Viewport;
The original image is not higher than 1000px.
If the original size exceeds the allowed width and/or the maximum height, Viewport will not show the original size. Instead, it will reduce your image width to fit the content column width, or cap your image height at 1000px.
Adjusting the height prevents overly long articles on smaller devices like smartphones. You can override this behaviour by injecting custom CSS.
If you want to display images smaller than their original size you will need to first edit the image, reduce the size and then upload it again to your Confluence page.
Note that you cannot change how the image displays in Viewport by manually adjusting the size of the image in the Confluence editor.
Adjusting the Image Alignment
Images that are smaller than the content column width in Viewport will use the image alignment you have set in the Confluence editor. Note that ‘wrap left’ and ‘wrap right’ are not supported in Scroll Viewport.
You can change the alignment to center, left and right in the Confluence editor toolbar. By default, the new Confluence editor will center align all images, whereas pages created in the legacy editor will have images set to align left by default.
An example of how an image displays if it’s smaller than the content column width and set to ‘align center’:
Saving Time Using the Article Preview
Scroll Viewport allows you to preview and check content before you go live.
To avoid going back to Confluence to fix your already published images, we recommend you use the app’s article preview.
The preview will give you an idea of the layout of your page on your Viewport site, even if the page and its changes aren’t part of the last site generation.
Use the preview to see if you need to fix the width of images before going to Viewport. Once fixed, go to your site overview to update the site and bring the changes live.