Online Help          

Inserting pictures

Home

Inserting and editing pictures

Overview

You can insert pictures into your webpages, emails, and email templates. Before inserting pictures, you have to upload them to your account using File management or WebDAV.

Instead of uploading and inserting pictures, you can edit the HTML code directly to display an image file stored on another website.

You can also add pictures to page headers or footers, your event listings, or your photo album

If you have already uploaded pictures to photo sharing sites such as Flickr, Photobucket, or Picasa, you can embed those external photo galleries in your Wild Apricot site. For instructions, see Embedded photo galleries.

Inserting pictures on a webpage

  1. Go to the Web pages tab and navigate to the page you want to modify.
  2. Click Edit to begin editing the page.
  3. Click where you want the picture to appear on the page.
  4. Click the Picture button on the toolbar at the top of the page.


    Inserting a picture

  5. From the Insert picture window that appears, you can choose a picture that is already in your account or upload new pictures from your computer or network. For instructions, see Selecting a picture (below). 

Inserting pictures in an email

  1. From the Compose your email screen, click where you want the picture to appear in the message.
  2. Click the Picture icon on the toolbar at the top of the page.
  3. From the Insert picture window that appears, you can choose a picture that is already in your account or upload new pictures from your computer or network. For instructions, see Selecting a picture (below).

Inserting pictures in a template

  1. Click Email templates from the Emails tab.
  2. Click the template you want to modify.
    Note: you can only modify custom templates (templates you have created). You cannot modify system templates (templates supplied by Wild Apricot) but you can duplicate them and modify the copies. See Using email templates.
  3. Click Edit template to begin editing the template.
  4. Click where you want the picture to appear in the template.
  5. Click the Picture icon on the toolbar at the top of the page.
  6. From the Insert picture window that appears, you can choose a picture that is already in your account or upload new pictures from your computer or network. For instructions, see Selecting a picture (below).

Selecting the picture

After clicking on the Picture icon while editing a web page, email, or email template, the Insert picture window appears. 


Insert picture window

From here, you can:

  • choose a picture to be inserted from the pictures already in your account, or
  • upload one or more new pictures then choose one of them to be inserted. 

To select a picture already in your account:

  1. Select the folder containing the picture (by default, the Pictures folder is selected). Click the plus sign to expand branches within the folder tree, and the minus sign to collapse branches.
  2. Click the picture you want to insert.
  3. Optionally, you can set the picture size and set other picture options.
  4. Click OK.

To upload a new picture:

  1. Select the folder where you want the picture to be stored. (For instructions on adding folders, see File management.)
  2. Click the Browse button.
  3. Select the folder on your computer or network containing the picture.
  4. Select one or more pictures you want to upload.
  5. Click Open

You can monitor the progress of the upload in the area below the file and folder panels.

 
Monitoring upload progress

After the upload is complete, you can select one of the uploaded pictures and click OK to insert the picture.

Before you upload pictures, you should check to make sure you don't exceed your overall file storage limit, or your single file upload limit.  

Sizing the picture

After selecting a picture, you can choose the size at which the picture will be inserted. The following size options are available:

Options Description Considerations
Original Use the picture's original dimensions.
If the picture is larger than the area available for it, part of the inserted picture may be cut off.
Large Resize the picture to be 600 pixels wide.
The picture width is automatically calculated to preserve the picture's proportions and avoid distortion. 
If you choose a size that is larger than the image's original dimensions, the inserted picture may appear pixelated.
Medium Resize the picture to be 200 pixels wide.
The picture width is automatically calculated to preserve the picture's proportions and avoid distortion. 
If you choose a size that is larger than the image's original dimensions, the inserted picture may appear pixelated.
Small Resize the picture to be 100 pixels wide.
The picture width is automatically calculated to preserve the picture's proportions and avoid distortion. 
If you choose a size that is larger than the image's original dimensions, the inserted picture may appear pixelated. 
Custom Use the horizontal and vertical dimensions
you provide.
If the dimensions you choose do not reflect the proportions of the original image, the inserted picture may appear distorted. 
If you choose a size that is larger than the image's original dimensions, the inserted picture may appear pixelated. 
Regardless of the size option you choose, the larger the picture you insert, the longer your web page will take to load.

Other picture options

After you have selected a picture to be inserted, you can set other picture options other than size. These options are:

Option Description
Tooltip Text that appears when a mouse pointer is positioned over the picture, or when the picture cannot be displayed.
Link to original Links the picture to the original full-sized version. You can use this option to create a thumbnail that can be clicked to display a larger image.
Border width The width of the frame that surrounds the picture (if any).
Text flow Picture position/alignment relative to the surrounding text.
For more advanced options, you can go into HTML mode after inserting the picture and modify the picture's <img> tag parameters.

Image file options

When you right click over an image within the Insert picture window, a number of image file options appear.


Image file options

For more information on these options, see File management.

Right clicking to view file and folder options does not work in Safari on the Mac. Instead of right clicking, hold down the Control button then click to display the menu.

Image view options

You can control the size of the image thumbnails displayed on the Insert picture window. To do so, right click between images and select the View option. From the fly-out menu that appears, you can choose to display extra large icons, large icons, or medium icons (the default option). Alternatively, you can choose to display image file details (including file size) instead of image thumbnails.

Folder options

When you right click over a folder within the Insert picture window, a number of folder options appear.


Folder options

For more information on these options, see File management.

Modifying an existing picture

To modify the settings for an existing picture, position your mouse over the picture, then click the Settings option in the bottom right corner of the picture.

 
Modifying picture settings

From the Edit Picture window that appears, you can change any of the picture settings or choose a different picture.

Removing a picture

To remove an existing picture from a web page, email, or email template, enter edit mode then position your mouse over the picture and click the X icon in the top right corner of the picture.

 
Removing a picture

Moving a picture

After inserting a picture into a web page, email, or email template, you can reposition it relative to the surrounding text by dragging and dropping it to a different location within the current section.

 
Dragging and dropping a picture

Dragging and dropping may not work in some browsers (such as Safari on a Mac) and may display misleading error messages such as File type not supported.

Linking a picture

You can link a picture so that when visitors click it, they will go to a particular web site, site page, event page, or email address.

To link a picture, follow these steps:

  1. While in edit mode, click the picture you want to link. (In some browsers, you might have to click-drag-release to select.)
  2. Click the Link dropdown in the toolbar towards the top of the page and select Insert link.


    Insert link option

  3. From the Insert link window that appears, select the destination for the link.


    Insert link window

    Enter a website address or email address in the Website URL or email field, click the Site page tab to select a page from your site, or click the Event tab to select an event from your site. For events, you can choose whether to link to an event's detail page or registration page.
  4. You can also enter a tooltip to be displayed when a mouse pointer is positioned over the picture, and control whether the link opens in a separate browser window.
  5. Click Insert link

To modify a link for a picture, enter edit mode then hover over the picture and click Link. From the Edit Link window that appears, you can change the link. 

 
Editing a link

To unlink a linked picture, click the Unlink button within the Edit link window, or click the Unlink icon in the upper right corner of the image.


Clicking the Unlink icon

File formats and naming restrictions

You can insert pictures saved using the following file formats: JPG, PNG, GIF. Your image file names must not contain any the following characters: *  /  :  ? < > " %  & or double spaces.

Troubleshooting

Image not showing up in some or all browsers

Most browsers can only display images that use the RGB color model. If you upload an image created using the CMYK color model (used for high quality printing) then the image might not display and instead you only see a placeholder thumbnail.

 
Placeholder thumbnail

For more information on color models, click here.

To convert the image to the supported RGB format just open the image in a standard image editor like MS Paint and save it.

You can also use online tools to convert your image to RGB format e.g. www.cmykconverter.com or www.cmyk2rgb.com.

See also


Wild Apricot Inc. 144 Front Street West, Suite 725, Toronto, Ontario M5J 2L7, Canada
Sales & Support: (Toll-free) +1 (877) 493-6090
All other inquiries: +1 (416) 410-4059
Copyright © 2012.
Wild Apricot™ by Wild Apricot Inc.