Inserting and editing pictures

• Overview
• Inserting pictures on a webpage
• Inserting pictures in an email
• Inserting pictures in a template
• Selecting the picture
  • Sizing the picture
  • Other picture options
  • Image file options
  • Image view options
  • Folder options
• Modifying an existing picture
• Removing a picture
• Moving a picture
• Linking a picture
• File formats and naming restrictions
• Troubleshooting
  • I've uploaded images but thumbnails don't appear for them in the Insert picture window
• See also

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).

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.

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 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

I've uploaded images but thumbnails don't appear for them in the Insert picture window

The Insert picture window and File management screen can only display thumbnails for graphic images that use the RGB color model. If you upload an image that uses the CMYK color model (used for high quality printing), a placeholder thumbnail will be used in place of an actual thumbnail.

Placeholder thumbnail
For more information on color models, click here.
For information on determining an image's color model, or to convert a picture to RGB format, see Determining and converting image color space.

See also

• File management
• Managing files using WebDAV

Tegn abonnement på

BioNyt Videnskabens Verden (www.bionyt.dk) er Danmarks ældste populærvidenskabelige tidsskrift for naturvidenskab. Det er det eneste blad af sin art i Danmark, som er helliget international forskning inden for livsvidenskaberne.

Bladet bringer aktuelle, spændende forskningsnyheder inden for biologi, medicin og andre naturvidenskabelige områder som f.eks. klimaændringer, nanoteknologi, partikelfysik, astronomi, seksualitet, biologiske våben, ecstasy, evolutionsbiologi, kloning, fedme, søvnforskning, muligheden for liv på mars, influenzaepidemier, livets opståen osv.

Artiklerne roses for at gøre vanskeligt stof forståeligt, uden at den videnskabelige holdbarhed tabes.