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.
Was this information helpful?
|
|