Overview
You can upload saved image files from computer to your WildApricot database in Settings > Files or by using WebDAV. Using WebDAV allows you to copy multiple files or folders at the same time.
For a deeper dive on database file management, see our File management article.
To learn how to create online photo albums, view our article about the Photo album gadget.
Pro Tip: For optimal load times, an uploaded image should not exceed 200 KB in size.
Getting started
The first step in inserting an image is to select the site page where you want the picture to appear, and then select Edit.
Next, click within the content gadget editor where you want the image to appear.
To learn how to add images to emails, view our article on the Email editor.
Click the Image icon within the content editor toolbar or select Insert image from the More dropdown menu.
Selecting the picture
After you click the Image icon or Insert image, the Insert image window appears.
In this window, you can:
- Choose an image to be inserted from the images already saved in your account files
- Upload a saved image from your computer files and then select it
Note: When you insert an image, you really insert a link to the image stored in your files. Images and other files to your WildApricot database can always be accessed by navigating to Settings > Files. See File management to learn more.
Important Note: If you upload an image and then later move, rename, or delete the image from your database files, the image will no longer appear on your website.
Selecting a image already saved in your database files
- Select the folder that contains the picture. The Pictures folder is selected by default, but your image may be located in a different folder, depending on how you saved it. Click the Resources link to move up one level within the folder hierarchy, then double click the folder you want to open.
- Click the image you want to insert. It will appear highlighted.
- Click Insert.
Uploading a new image to your database
There are two ways you can upload a new image to your database files.
- You can drag and drop a file from your computer's file explorer.
- You can click the Browse button and find the file as listed on your computer or network.
In either case, the image you choose will be uploaded and saved in your WildApricot database, which you can access later by navigating to Settings > Files in the admin view.
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 smaller than these dimensions will be uploaded at their normal size.
Note: 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 WildApricot.
Pro Tip: For optimal load times, an uploaded image should not exceed 200 KB in size.
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.
Important Note: If you move, rename, or delete an image in your database files, the image will no longer appear on any website pages where you previously inserted the image.
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 WildApricot account. You can select images from – or upload images to – any folder on your on your WildAccount.
To switch to a different folder, click the Resources link to display the other folders grouped under the Resources folder.
Important Note: If you move, rename, or delete an image in your database that has already been inserted in a website page content editor, the image will no longer appear on your website because its file path will be disrupted.
Then, 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 WildApricot account from the Insert image dialog. To do so, follow these steps:
Important Note: If you move, rename, or delete an image folder in your database files, this will disrupt the link path for any images in that folder that you have already inserted into website page content editors, and the images will no longer appear on your website.
- 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.
Important Note: If you move, rename, or delete an image folder in your database files, this will disrupt the link path for any images in that folder that you have already inserted into website page content editors, and the images will no longer appear on your website.
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).
Resizing an image 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 an image
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 an image
To remove an existing image 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.
Using an image as a link
You can use an image to create a link so that when visitors click it, they will go to a particular web site, site page, event page, or email address. To create an image link, 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 image's link, 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 an image, click the Unlink button within the Edit link window, or click the Unlink icon in the upper right corner of the image.
Pasting images
Pasting images into website content editors is not recommended because doing so often causes display errors.
Important Note: Always save and upload an image before inserting it via the editor's Insert image feature.
Pasting copied images without using the Insert image feature can cause problems with your page's display.
File formats and naming restrictions
You can insert images in 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 save and upload the image to your WildApricot database, then insert the image.
