Inserting images into emails

By way of introduction, the ChurchSuite email composer includes an HTML editor with a range of tools for styling and formatting your messages prior to sending...

...and clicking the ellipses tool (the button with three dots) surfaces further tools.

There are further tools available on the right-click menu within the Body content section of a message...

To insert an image, position your cursor in the desired place where the image is to be added. Click the Insert/edit image tool icon.

You can either specify the Source URL (web address) of an existing online image (perhaps located on your website), 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 into the drop zone, or click + to select a file to upload, which will let you browse and navigate to a file on your computer. Note that files can only be uploaded one at a time. 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 50Mb in size (although images no larger than 1Mb are recommended to ensure the email opens quickly and without consuming a recipient's internet download quota! 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 re-click the Insert/edit image tool again 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 - some email clients' security settings do not display images by default, so a description placeholder is use. The Width and Height are automatically populated based on the original image's actual size and proportions, but you can adjust the dimensions if you wish. The padlock icon constrains the dimension so that images are not distorted when the width or height are changed.

Click Save to save the image settings.

Inserting full width images

The maximum width of emails sent from within ChurchSuite is 580px. To have email images responsively adjust to the size of the user's screen (i.e. full width rather than a fixed 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="" alt="puppy.jpg" width="600" height="400" />

Where the width of the image is set to a fixed value, remove those fixed height and width elements, and replace with a single style="max-width:100%;", like this...

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 the image is being rendered on, whichever comes first. The image height will change proportionately as well.

Still need help? Contact ChurchSuite Contact ChurchSuite