You can insert pictures into content gadgets on your site pages and page templates, and in emails, email templates, event descriptions, blog posts, and forum topics.
You can upload images files to your Wild Apricot account as part of the process of inserting a picture, or by using file management or WebDAV. Using WebDAV allows you to copy multiple files or folders at the same time.
You can also add photos – stored in your Wild Apricot account or on your computer – to public photo albums. For more information, see Photo albums. 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.
Getting started
The first step in inserting a picture is to begin modifying the site page, page template, email, email template, event description, blog post, or forum topic where you want the picture to appear. Next, click within the content gadget, email, event description, blog, or forum topic where you want the image to appear.
With the new email editor, images are added to layout cells by dragging and dropping an image gadget. For more information on using the new email editor to compose manual emails, click here.
Now, click the Image icon within the content editor toolbar.
For blog posts and forum topics, administrators click the More menu and select the Insert image option.
Selecting the picture
After you click the Image icon while editing a site page, page template, email, email template, or event description, the Insert image window appears.
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.
You can navigate between folders in your account, and add, rename, or delete folders. You can switch from icons view to details view, where additional file information is displayed.
You can delete files while inserting pictures, but you cannot rename them, or move them to different folders. You can rename and move files from File management.
When you insert a picture, you are really inserting a link to the picture stored on your account. If you move, rename, or delete the image from your account, the image will no longer appear. Instead of uploading and inserting pictures, you can edit the HTML code directly to display an image file stored on another website.
Selecting a picture already in your account
To select a picture already in your Wild Apricot account, follow these steps:
- Select the folder containing the picture – by default, the Pictures folder is selected. Click the Resources link to move up one level within the folder hierarchy, then double click the folder you want to open. For more information, see Switching to a different folder (below).
- Click the picture you want to insert. It will appear highlighted.
- Click the Insert button.
Alternatively, you could just double click the file within the Insert image dialog.
Uploading a new image
There are two ways you can upload a new image from the Insert image dialog.
- You can drag and drop a file from File Explorer or Finder onto the dialog.
- You can click the Browse button and find the file on your computer or network.
In either case, the file you choose will be added to the currently selected folder.
If you don't want the image to be resized when you upload it, check the Keep original image size checkbox.
If this option is unchecked, images over 1920 x 1080 pixels will be resized to this size – while maintaining image proportions. Images under these dimensions will be uploaded at their normal size.
When uploading a PNG image with a transparent background that has a dimension larger than 1920 x 1080, if you uncheck this option – allowing the image to be resized – the transparency will be lost, and the image will appear with a white background.
You can upload any of the file types supported by Wild Apricot. The maximum size of each file is 100 MB. Your overall file storage limit depends on your billing plan.
After uploading the file, the file will be selected, and you can insert it by clicking the Insert button.
Deleting an image file
To delete an image file from the Insert image dialog within icons view, hover over the file then click the garbage can icon.
You will be prompted to confirm your intention to delete the image.
Limited administrators can only delete images that they have added themselves.
To delete an image file from the Insert image dialog within list view, click the Delete link for that file.
Switching to a different folder
By default, the Insert image dialog displays images from the Pictures folder, which is grouped under the Resources folder within your Wild Apricot account. You can select images from – or upload images to – any folder on your on your Wild Account.
To switch to a different folder, click the Resources link...
...to display the other folders grouped under the Resources folder.
Now, double click on the folder you want to switch to.
Creating a new folder
You can create a new folder under the current folder. To do so, click the New folder icon within the Insert image dialog.
You will be prompted to enter a name for the new folder. After doing so, you can click the OK button to add the folder or click the X button to cancel the addition.
Renaming an existing folder
You can rename any of the folders within your Wild Apricot account from the Insert image dialog. To do so, follow these steps:
- Switch to the folder above the folder you want to rename. For example, if you wanted to rename the Pictures folder, you would click the Resources link to display all the folders grouped under the Resources folder.
- Click the folder you want to rename. It will appear highlighted.
- Click the Rename folder icon.
- Enter a new name for the folder in the field that appears.
- Click the OK button.
Deleting a folder
To delete a folder from the Insert image dialog within icons view, hover over the folder then click the garbage can icon.
You will be prompted to confirm your intention to delete the folder.
Limited administrators can only delete folders that they have created themselves.
To delete a folder from the Insert image dialog within list view, click the Delete link for that folder.
Changing the file view
By default, the Insert images dialog displays thumbnails for each image, along with the file name. This is called icons view.
You can switch from icons view to list view, which displays image file details instead of thumbnails. To switch to list view, click the List view icon in the upper right corner of the Insert image dialog.
Now, the Insert image dialog displays the name, date, and size of each image within the current folder.
Changing the sorting order
You can change the order in which images are displayed, either in icons view or in list view. You can sort the images by name, date, type (file extension), or size, in ascending or descending order.
To change the sorting order of the images, click the sorting options that appear in the upper right corner of the dialog and choose a different option.
Restricting file access
From the Insert dialog, you can restrict access to files one at a time, or to an entire folder of files. You can only set access restrictions from list view, not icons view. You can also restrict file access from the Files screen. For more information, see Restricting access to files.
To set file access restrictions from list view, follow these steps:
- Click the link under the Access level heading for the file or folder you want to restrict.
Depending on the current access level, the link might appear as Public, Admin only, or Restricted. - From the Set access level dialog that appears, choose the type of users you want to be able to access the file or folder .
- Click the Save button to save your changes.
In icons view, files and folders with restricted access will be flagged by an icon beside the name.
Setting image properties
After you've inserted a picture, you can change its properties, including its size. To set the properties for a picture while editing the site page, page template, email, email template, or event description in which it appears, position your pointer over the picture, then click the Settings option.
From the image settings toolbar that appears, you can change any of the image settings.
The following options appear on the image settings toolbar:
Size
The displayed size of the image. By default, images are inserted at 100% of the container width (the area in which its appears). The following size options are available.
-
Original
Use the picture's original dimensions. Setting the image size to Original may result in the image appearing cropped, if the original size is greater than the container in which it appears (e.g. the content gadget). -
Small
Display the image at 25% of the container width (the area in which its appears) or image size, whichever is smaller. -
Medium
Display the image at 50% of the container width or image size, whichever is smaller. -
Large
Display the image at 100% of the container width or image size, whichever is smaller. -
Custom
Use the horizontal and vertical dimensions you provide. If the Maintain ratio checkbox is checked, one of the dimensions may be adjusted to maintain the image's aspect ratio. Setting a custom image size may result in the image appearing cropped, if the custom size is greater than the container in which it appears (e.g. the content gadget). -
Maintain ratio
Controls whether the image's aspect ratio is maintained when a Custom size is specified. With the Maintain ratio option checked, one of the custom dimensions may be adjusted to maintain the image's aspect ratio.
Link to original
Links the picture to the original full-sized image file. You can use this option to create a thumbnail that can be clicked to display the full-sized image in a separate browser tab.
Alt text
Text that appears when a mouse pointer is positioned over the picture, or when the picture cannot be displayed.
Alignment/text flow
Controls the alignment of the picture and the positioning of adjoining text.
The image appears inline with the adjoining text. The baseline of the first line of text will align with the bottom of the image.
The image will appear on the right. Any text that appears with wrap to the left of the image.
The image will appear on the left. Any text that appears with wrap to the right of the image.
The image will appear on the left. Any text that appears will break above and below the image.
The image will appear centered. Any text that appears will break above and below the image.
Margins
The amount of space – in pixels – that appears around the image.
Borders
The width and color of the frame that surrounds the picture (if any). You can select predefined thickness options or specify custom thickness (in pixels). When specifying the border color, you can select a color from the theme-specific colors at the top or from the drop-down palette below, or enter the hexadecimal code for the color (e.g. #FF0000 for red).
For more advanced options, you can go into HTML mode after inserting the picture and modify the picture's <img> tag parameters.
Resizing a picture manually
You can set the image size, along with other image properties, using the image editing toolbar, or you can resize an image by clicking on it – while editing the content gadget, event details, email, or email template in which it appears – then dragging its selection handles inward or outward.
Dragging a handle inward makes the image smaller, while dragging outward makes the image larger. You can use any of the selection handles, each of which can be used to resize the image while maintaining its proportions.
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 may not work in some browsers (such as Safari on a Mac) and may display misleading error messages such as File type not supported.
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.
You can also delete a picture by selecting it then pressing the Delete key on your keyboard.
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:
- While editing the site page, page template, email, or event description, click the picture you want to link. (In some browsers, you might have to click-drag-release to select.)
- Click the Link dropdown in the toolbar towards the top of the page and select Insert link.
- From the Insert link window that appears, select the destination for the link.
If you previously selected the Link to original option for the picture, then a link will appear to the full version of the picture.
To select the destination for the link, 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. - 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. If you previously entered Alt text for the picture, then the picture's Alt text will appear as the tooltip for the link.
- 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.
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.
Pasting pictures from other sources
You can paste pictures, along with other content from external sources such as Microsoft Word, Google Docs, Apple's Pages, a website, or an email. To do so, click within the content gadget, email body, event description, blog post, or forum topic where you want the content to appear then click the Paste icon within the content editor.
Pictures can only be pasted from sources that store images using URLs – such as Google Docs, web pages, and emails. Pictures cannot be copied and pasted from other sources such as Microsoft Word.
To modify the settings of the pasted images, you cannot use the image settings toolbar dialog as you would when modifying a picture inserted directly through the content editor. Instead, you must click the HTML button within the content editor and modify the HTML code.
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.
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.
For more information on color models, click here.
Image appears rotated
If a picture appears at the wrong angle – rotated 90 degrees, for example – try saving the picture using a different file format (e.g. .PNG) then loading the new file.
If that doesn't work, you can use a graphic editor such as PhotoShop to remove the EXIF data embedded in the graphic file that's controlling the orientation. For more information on this approach, click here.
Transparency lost when inserting a PNG file
When uploading a PNG image with a transparent background that has a dimension larger than 1920 x 1080, if you uncheck the Keep original image size option – allowing the image to be resized – the transparency will be lost, and the image will appear with a white background. If you upload the file with this option checked, the transparency will be retained.
Image is being flagged as a hotlink
In place of your image, the following image (or something like this) is being displayed:
This is happening because you are displaying an image stored on another site. This is called hotlinking and is considered an unacceptable practice since you are using someone else's content, storage, and bandwidth. If you have permission from the other site to display their image, then simply copy the image to your Wild Apricot account and insert the copy that is being stored on your Wild Apricot site.
