Inserting images into emails

Open the "compose email" window and position your cursor in the desired place within the body of your draft email. Click on the ‘Insert/edit image’ icon (the camera icon in the email compose toolbar).

You can either specify the "Source" URL (web address) of an image that is already available online, or you can upload an image from your desktop. Click the "Upload" button on the right-hand side of the "Source" box.

Choose your file, uploading from one of the specified applications or drag a file (or browse to a file) from your desktop. You can insert JPG, PNG and GIF image files (including animated GIF files) up to 25Mb in size.

The image is inserted.

If you click to select the inserted image and click the "Image" icon" button again, you now set the image description and dimensions.

The ‘Image Description’ field is useful for those email clients that do not automatically display images in emails - many email client's security settings do not display images by default. Instead, a text description is displayed in place of the image.

The ‘Dimensions’ are automatically populated with your image's actual proportions, but you can adjust the appearance of the image by editing these dimensions and specifying your own.

Click "OK" to save your image properties.

Note: Altering one set of dimensions and then clicking on the second set will cause them to automatically adjust to fit the ratio of the image - keeping it in perfect proportion. Once you’re happy with the image’s description and dimensions click ‘ok’ and continue composing your email.

Inserting 'full width' images

The maximum width of emails sent from within ChurchSuite is 580px. To get email images to adjust to the size of the user's screen (i.e. full width), click on the source code tool to view the HTML code for the email.

Within the body of the HTML code, locate the code relating to your image it will start with <img src=", as shown in the example below:

<img src="https://cdn.filestackcontent.com/MR9iRqIwSImZP7gtSBWT" alt="2013-KTM-390-Duke-high-resolution-02.jpg" width="600" height="400" />

Where the width of the image is set to a fixed px value, remove any height and width elements, and replace with style="max-width:100%;". In the above example the HTML is now as follows:

<img style="max-width:100%;" src="https://cdn.filestackcontent.com/MR9iRqIwSImZP7gtSBWT" alt="2013-KTM-390-Duke-high-resolution-02.jpg" />

The effect of this change will be to scale the image up (or down) to either the maximum resolution of the image or the width of the screen, whichever comes first. The image height will change proportionately as well.

Still need help? Contact ChurchSuite Contact ChurchSuite