How to Add an Image to your Signature

How to Add an Image to your Signature

Applies to SmarterMail 12.x-14.x

Adding an image to your SmarterMail signature is a pretty simple process. Getting started, there are a few things to consider:

1. Use the standard HTML editor to add styling to signatures, like changing font colors, adding in hyperlinks or other stylistic elements.
2. If you want a picture added to your signature, perhaps your picture or your company logo, simply add a picture to your Account Profile. This is found in Settings >> My Settings >> Account Profile. On the Personal Info tab you can add a picture that can then be added to your signature using a signature/picture variable. Just realize that pictures added to your Account Profile have maximum dimensions you'll need to work with.
3. If you want to add a different image, like a Facebook or Twitter icon with a hyperlink, you will want that image to be hosted somewhere. Ideally, it should be hosted within your website but you can use an image hosting service such as Imgur, ImageShack or other hosting service. Regardless of where you host the image, you will need to get the full URL to where the image is located. For example, "http://www.smartertools.com/images/email/temp_2010/twitter_icon.png"
4. To add a custom image, place your cursor where you would like the image inserted. Click on More in the WYSIWIG tool bar, then click on the Image icon. Enter the full URL for the image. You can use the other tabs to add additional information for the image.

Applies to SmarterMail 8.x-11.x

Adding an image to your SmarterMail signature is a pretty simple process. Getting started, there are a few things to consider:

1. Use the standard HTML editor to add styling to signatures, like changing font colors, adding in hyperlinks or other stylistic elements.
2. If you want a picture added to your signature, perhaps your picture or your company logo, simply add a picture to your Account Profile. This is found in Settings >> My Settings >> Account Profile. On the Personal Info tab you can add a picture that can then be added to your signature using a signature/picture variable. Just realize that pictures added to your Account Profile have maximum dimensions you'll need to work with.
3. 
4. To add a custom image, you WILL need to edit the HTML of your signature. However, this is a fairly painless process. To add an image, you just add the tag somewhere in your signature, and add the full URL to your image between the quotation marks. You can add a single image, or add multiple images using separate tags. It's really up to you.

As stated. to add a custom image you will need to edit the HTML of your signature. Thankfully, the HTML editor within SmarterMail allows you to switch back and forth between the "design view" and the "code view" of your signatures. You do this by simply clicking the Show Source button. (It looks like a piece of paper with two carats - < >).

Clicking on Show Source after you've added items to your signature will display the HTML code used for displaying the information you've added. For example:

<p>Sincerely,<br /> <br />
Bill Dailey<br />
Training Administrator<br />
SmarterTools, Inc.<br />
(623) 434-8050<br />
www.smartertools.com<br />
<img src="http://www.smartertools.com/images/email/temp_2010/twitter_icon.png" />Follow Us!</p>

As you can see, the last line shows the link to the Twitter icon we mentioned earlier in this article and uses the tag. This is the exact HTML code for adding that icon to the final signature. After the above information is saved, your signature would look like this:

Sincerely,

Bill Dailey
Training Administrator
SmarterTools, Inc.
(623) 434-8050
www.smartertools.com
Follow Us!

If you wanted the Twitter icon and the action item to link to your actual Twitter account, you can either simply select them and click the Insert Hyperlink button in the editor toolbar, or edit the HTML directly by adding in an A HREF tag, and surround the icon link AND any associated text. After adding that hyperlink, your HTML code for the Twitter line would look like this:

Follow Us!

Now, you not only have the image added, but that image, as well as the "Follow Us!" text will link directly to the Twitter account. The final signature will look like this:
Sincerely,

Bill Dailey
Training Administrator
SmarterTools, Inc.
(623) 434-8050
www.smartertools.com

Follow Us!



And there you have it. As always, if you're unsure of any of this, either contact your Web designer or shoot an email to the SmarterTools sales team and we'll be happy to help you out.