Web Graphics

Control Panel > Website Tab > Setup

Select this option to manage images uploaded to the website, including logos and graphics used on the home page, on custom pages, and in the page header and content boxes around the layout (for example, under the menu or above the footer.) Note that photos are managed separately, in the Photo Manager. Photos are stored in multiple resolutions whereas web graphics are stored only as uploaded.

When you select this option, you will see a screen similar to the following:

Web Graphics Manager Screen

Many clubs and associations have hundreds of graphics used around their website. If you just click Show Files without any selection criteria, all files will be listed, in pages of 50 files each. Use the standard page navigation tools to move between pages.

Filtering criteria can be based on file names or titles. Use “file names contain” to search for extensions such as JPG or GIF. You can also filter by specific folders. Use the “are anything” option to display files in one folder only.

If you search by title, the first grid column will show “Title (file name)”. If you search by file name, the first grid column wil show “File name (Title)”. If there is no title specified, we will show “<no title>”. These files are not returned in a title search unless you do not specify any criteria.

Note also that when a file is uploaded, we will modify the file name internally to avoid accidentally overwriting a file if a duplicate name was used. So when you place a web graphic on a page using the editor, the HTML code will use the internal file name rather than the one you originally uploaded.

The following options can be found in the Maintain column:

Maintain Options
Icon Description
View Icon (View) View this graphic in a small popup window.
Edit Icon (Edit) Edit properties for this graphic. You will see the Add/Edit screen described below.
Copy Image URL Icon (Copy URL) Copy a URL to clipboard that can later be used to download this web graphic from anywhere (another web page or website, or an email.)
Delete Icon (Delete) Delete this graphic. You will be prompted to confirm this action. Note that any references to this file around the website will need to be removed or edited to point to a new file.
Image Editor Icon (Image Editor) Click this icon to modify the image, including rotating it, cropping it, changing the brightness, or changing the size.

Click Add Web Graphic to upload a new graphic. You will see a screen similar to the following:

Add/Edit Web Graphic Popup

Browse to the file on your local hard disk or network. The filename will appear, together with a Remove option if you selected the wrong file. Specify an optional title and folder, then click Save to upload the image or Cancel to return without uploading.

When you edit a file, a slightly different version of this dialog appears, allowing you to replace the file, change the title, or move it to a different folder.

Click Manage Folders to see a screen similar to the following:

Web Graphic Folder Manager Screen

This is a standard ClubExpress admin screen, showing a list of folder and the number of graphics in each folder.

Click the Add Folder button to create a folder. You will see a small popup to specify the folder name. Spaces are allowed but duplicate folder names are not.

Click the standard Edit icon to modify a folder name, and the standard Delete icon to remove a folder. You can only do so when there are no graphic files in that folder.

Click Return to Previous Page to return to the Web Graphics Manager.

When you select the Image Editor icon, you will see a popup screen similar to the following:

Image Editor Popup

The photo is shown at its full resolution. Use the scroll bars on the right and along the bottom edge to adjust the view.

Icons at the top of the window provide the following functions:

  • Undo last change
  • Redo last change
  • Rotate left
  • Rotate right
  • Crop
  • Adjust Brightness
  • Adjust Size

The current width and height are also shown.

When you enter “Crop” mode, you can drag out a rectangle, then adjust in any corner or the middle of any edge. Click the “✓” icon to execute the crop or the “X” icon to cancel the crop.

When you enter “Adjust Brightness” mode, use the + and – icons to adjust the brightness. Click the “✓” icon to save or the “X” icon to cancel.

When you enter “Adjust Size” mode, there are a number of options:

  • Use the + and – icons to adjust the size in 5% increments.
  • Enter a scale value to adjust the size by a ratio. Numbers between .1 and < 1 will shrink the image. For example, .5 makes it half the size. Numbers greater than 1 grow the image. For example, 2 makes it double the size. The aspect ratio is retained.
  • Enter a width or height number in pixels to adjust just that dimension. The aspect ratio is NOT retained.
  • Click the “✓” icon to save the new size or the “X” icon to cancel and retain the original size.

Click Save and Close to save your changes and return to the Photo Album  Manager. Click Save as New (edited) Image to save your changes to a new file. You will be prompted to enter a filename. The original photo is unchanged. Click Cancel to close the dialog without saving any changes.

Note that photos that are modified and saved over the original image, and that are used on a web page somewhere on the website, may not reflect the changes immediately because the browser has cached the images. Those pages will need to be hard refreshed, or the browser cache cleared to see the changes. Alternatively, users can use the "save as new" to create a new photo and then replace any photos on the site with the newly saved image.

Also, the “Save as New (edited) Image” does not automatically add photos to an existing album. They must be added manually.