Adding an image using the HTML Editor
Update your Donation pages and Event, Pledge-a-thon or Membership descriptions with images and logos. IMPORTANT : The images must first be hosted in the Secure Image Hosting section of your GiftTool account (learn how).
- Once you have uploaded the
image to the Image Hosting Section:
- Click on the image so that it opens in a new browser
- Copy the web address URL (for example: https://www.gifttool.com/images/logos/GTLogo110.gif)
- From any section of your Donation page, or the Description section of your Event, Pledge-a-thon, Shop Product or Membership in your GiftTool account, position your cursor where you want the image to be displayed.
- Click the Insert/Edit Image icon.
- Paste or type the Image URL web address of the location of the
image (for example: https://www.gifttool.com/images/logos/GTLogo110.gif).
- Be careful not to add an extra blank space in front of or at the end of your link when pasting the link into the editor. Blank spaces will be converted to "%20" and must be removed from the link added to the HTML editor in order for your image to appear correctly.
- IMPORTANT : If your template has been setup to be responsive, with a variable width depending on the device size, any images that you add to your Description needs to be setup with a variable width as well. In the Style field, under the Appearance tab (at the end if you already have some style parameters) paste in: max-width: 100%; height: 100%;
- Optionally, to have the image appear on the left side next to your text with extra padding between your image and your text, type float: left; padding: 15px 15px 15px 0px; in the Style field, under the Appearance tab.
- Or, to have the image appear on the right side next to your text with extra padding between your image and your text, type float: right; padding: 15px 0px 15px 15px; in the Style field, under the Appearance tab.
- Click Insert.
- If you are having trouble positioning the image beside your text, you can also create a table and insert the image in one column with your text in the other column. This gives you better control of the positioning across all browsers.
- Click Save when finished.