Placing and editing an image in a Joe template
If you are working with a custom template of the Joe type, you create your newsletter in a dedicated editor. In a template like this, you can have several types of image blocks programmed. The block type determines what you can do with the image: a fixed image is in a fixed position and is required, while a scalable image can be moved, resized or omitted.
If you are working with a regular drag & drop newsletter, please refer to Adding an image to your newsletter.
Adding an image
Click on the placeholder image in your newsletter. In the window that opens on the left, click on ‘Select’ and choose an image from your computer. In the same window, you can add a link behind the image and enter alt text.
If you are creating a digitally accessible newsletter, always enter alt text. Screen readers read this text aloud, so it should describe the image. See: Alt text for an image.
Cropping a fixed image
A required placeholder image often shows a suggested size, for example 300 x 200. Sticking to this size ensures a balanced design and structure for your newsletter.
You can crop your image to this size in the image editor: first scale the image by width, then select the crop area. You can also choose a different size, as long as you follow the same order.
Scale the image by width
Tick ‘Lock resolution’ and enter the suggested width under ‘Crop size’, for example 300. Press Tab so the height scales automatically, and click on ‘Save’.
Adjusting or omitting a scalable image
You can adjust a scalable image directly within the text block:
- Resize: drag the bottom-right corner of the image with your mouse.
- Change position: hover your mouse over the text in the block and click on the arrow on the left or right of the block. Click the arrow again to alternate placing the image on the left, on the right, or across the full width.
- Omit image: click on the cross in the top-right corner of the image. The block will then become a regular text block. To bring the image back, click on ‘Make image visible’ on the left of your screen, below the text section of the editor.
If not all images in your template are loading, this is not caused by editing, but by how the template loaded: here is how to reload the template.