How to add an image to a page

A page of pure text is hard work for a visitor. Adding an image takes under a minute in the editor, and Hubb sizes it to look good on phones and tablets automatically.

Adding an image to a page

1. Log in to your web office, select the group and open the article you want to edit.
2. Click the spot in the text where the image should go.
3. Click the ‘Add Image’ button on the editor toolbar.
4. Browse for an image already on your site, or upload a new one on the spot: click the upload area, find the image on your computer, then select it once it’s uploaded.
5. The Image Properties dialogue opens. By default the image is set to work well on phones and small tablets as well as larger screens, so usually you can just click ‘OK’.
6. Use ‘Preview’ at the top right to see how the page looks, then ‘Save’ when you’re happy.

---

Good to know

• To adjust an image that’s already in a page, right-click it and choose Image Properties. Double-clicking usually works too, but if the image has a link on it, double-clicking opens the link dialogue instead, which catches people out.
• In Image Properties you can also fix the common untidiness culprits: set the width to 800 with responsive ticked so it fills the page cleanly, set the alignment to ‘not offset’ if you don’t want text wrapping down the side, and clear the border field if an old image arrived with a thick frame around it.
• Before adding images across the site, it’s worth cropping them to a consistent size; our image editor guide covers the standard sizes and how to use them.
• Image widths set as a percentage resize gracefully on different screens: 100% for a full-width image, smaller if text should run beside it.
• Avoid images with important text baked into them: it’s often unreadable on a phone, and nobody can click an email address in a picture. Put the details in real text under the image instead.
• A couple of well-chosen images beat a wall of them; give each one room to breathe.