Inserting images into emails

The ChurchSuite email composer includes an HTML editor with a range of tools for styling and formating your messages prior to sending. In addition to the tools at the top of the email composer...

...there are further tools available when you right-click in the email Body content section...

To insert an image into the body content section of a draft email, position your cursor in the desired place where the image is to be inserted. Click the Insert/edit image tool icon.


You can either specify the Source URL (web address) of an image already available online, or you can upload an image from your computer or online file storage application. Click the Upload button (located to the right of the Source box).


Clicking the Upload button opens the File Uploader - either drag and drop, or copy and paste a file, or click to select files to upload, which will let you browse and navigate to a file on your computer...

You can also select files from a third-party file storage account with Google Drive, OneDrive, Evernote or Dropbox.

You can insert JPG, PNG and GIF image files (including animated GIF files) up to 25Mb in size. Once selected, click to Upload the image.

The image is inserted into the email.

You can now click to select the inserted image, and then click the Insert/edit image tool again in order to set the Image description and Dimensions. The Image Description field is useful where recipient email clients are not set to 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 the original image's actual size and proportions, but you can adjust the size if you wish.

Click OK to save the image settings.

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), right-click on the image and select the Source code tool to view the HTML code for the email.

Within the body of the HTML source 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="puppy.jpg" width="600" height="400" />

Where the width of the image is set to a fixed 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="puppy.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