How to Contribute Photos to NeatClubs
Before you can contribute a photo or a graphic file, you must be logged in to the system either as a system administrator or as a user who has the “upload files or images” privilege enabled in their profile.
The site administrator can control these individual member permissions by selecting “Manage Members” from the side-panel menu when logged in, and by editing the appropriate member record. Member permissions can be found by scrolling to the bottom of the member profile screen.
Under the “Photo Gallery” on the side panel menu, there are two different photo upload options:
These two options are provided because different browsers have different capabilities. The simple photo upload requires minimal capability in your browser. It uses a simple HTML form based upload and should always work,. This simple upload is slower than fancier upload options involving Adobe Flash. The simple photo upload will only allow one photo or graphic file to be uploaded at a time.
A second more sophisticated interface, relies on Adobe Flash and allows multiple files to be uploaded at once. This photo upload control has been validated on FireFox and Internet Explorer with Flash versions 9 and 10. Adobe has a history of "breaking" sophisticated functionality of this sort as they introduce new Flash versions however, so this may not work if you are running on a later version of flash or on a browser that we've not tested. Most users will probably prefer this second photo upload option.
Both upload approaches are described in detail below.
Performing a Simple Photo Upload
Once you do, you will see a screen similar to the one below. Click the "Browse" button and select an image or photograph file from your local file system. (don't simply type a filename into this field as this will not work).
Once a filename has been selected in the screen above by selected file and clicking "Open", click "Upload" on the photo upload dialog screen below.
The upload process may take several seconds, so please be patient. The simple HTML upload lacks the facility to display any sort of progress indicator.
If there is already a file on the server that has the same name, you will see a message similar to the one below.
The default behaviour of NeatClubs.COM is to re-name a newly uploaded file with a conflicting filename to avoid a potential conflict.
Click Proceed to continue, or if you are sure you want to replace the existing file on the server, select Replace the existing file with this new file before continuing.
If you rename the file in response to the dialog below, a new filename will be created similar to the old filename except that it will be pre-pended by a random five digit number.
Once your file has been physically uploaded to the server, you will see a view similar to the one below:
If your file is in the incorrect orientation as in this example, click the appropriate "Rotate" option to change the orientation of the file.
(This is a compute intensive operation that takes place on the web-server, so a newly rotated file may take a moment to appear)
Based on the existing size of the uploaded image, NeatClubs.COM will automatically suggest a new size to re-size the image to. By default, files that are greater than approximately 500 pixels in width will be downsized to be ~500 pixels wide. This means that the file size will be reasonable size while still displaying good quality on the web-page. We say "approximately" 500 pixels because this value is a configurable setting in the System Setup.
You can manually force a file to be a new size as shown below. You should never re-size a file in such a way that it comes larger than the original or the resulting image quality will be poor.
If you want a size not list on this screen, you will need to manually re-size the file yourself before uploading. You can click the "Same" box before pressing "Submit" to leave the file size unchanged.
Before clicking Submit, you must also fill in the other form items that describe your photo as shown below.
Each of the items is explained in the paragraphs that follow.
| a. | Picture Description: Enter some text that describes the picture. This is text that will be visible to visitors to your web-site when they put their mouse over the picture. Generally text descriptions associated with photos are considered private information and will not be displayed to users who are not logged in. This behavior can be configured under “System Setup” / “Preferences” / “Photos" |
| b. | The Contributor field will always show the name of the person uploading the photo. This field cannot be changed |
| c. | Next select a “System Category”. This is information you can provide that will make it more convenient to retrieve photos. The list of valid system-wide photo categories is defined in the System Setup menu by the administrator. Select the category that best fits your type of picture. Please note that some System Categories have special meanings: |
| i. | Event Related Photos: We suggest using this for pictures related to particular events or occasions. (i.e. a group dinner, a competition or an outing) |
| ii. | Side Panel Graphic: These photos are handled differently. Photos assigned the Side Panel Graphics system category will appear when enabling “advertisements” or “side panel elements” on your website. If you want an image to be clickable as a side-panel element, it should be uploaded as a side-panel ad. As mentioned before, 150 pixels is an optimum size for side panel ads. Although you may have the system re-size the graphic to 150 pixels for you, you’ll achieve a better “crisper” effect if you size the photo appropriately before uploading it. This is particularly true for graphics that contain text. |
| iii. | Web Header Graphic: Web Header Graphics are also handled specially. A typical size for the web header graphic for most browsers will be approximately 700-800 pixels wide and 100-150 pixels tall. The system accommodates the ability to maintain a library of web-header graphics and to switch easily between them under “System Setup” / “Website Layout & Preferences” / “Website Setup Information”. Please note that you must associate a web header graphic with this System Graphic type for it to appear on the selectable list of headers. Web headers should be pre-sized precisely before being uploaded or they will appear distorted. To provide better website performance you are asked to indicate the precise size of your header graphic in the Website Setup screens related to the header graphic. To make your site more accessible to people accessing or cellular devices or PDA’s (personal digital assistants), you may also upload a graphic appropriately sized for these devices. Wireless users who are often billed based on bandwidth use will not appreciate downloading a 50 kilobyte header – you can upload a lighter weight PDA specific graphics header and put it in the “Web Header Graphic” system category. Use the “Optimized Header Graphic for PDA & wireless devices” option to specify the graphic to display on devices that the system detects are handhelds. (under “System Setup” / “Website Layout & Preferences” / “B-Website Setup Information) |
| iv. | Email Header Graphic: Like the Web Header Graphic above, E-Mail headers are treated specially as well. The Email Header Graphic will appear at the top of all outgoing e-mail messages from the site including registration confirmations, newsletters and so on. The default outgoing Email Header Graphic is selected under “System Setup” / “Website Layout & Preferences” / “C-E-Mail Setup”. Sometimes, you may want to associate a different outgoing graphic header with different types of communications. For example, you may have a standard header for outgoing automated e-mails from your site (responding to registrations & on-line inquiries etc.) but you may want a different stylized header for your newsletters. For this reason Email Header Graphics may also be selected as a “document property” for documents of type “Newsletter”. By updating the document properties of a Newsletter you can associate a different Email Header for just that particular newsletter, or any subsequent newsletter created by copying the original. |
| d. | Next, you can select a “User Picture Category”. If you are creating a new picture category, for example “Summer 2007 photos”, you can type the name of this new category on the fly, and the new category will appear as a valid category going forward. User Categories are important since photos are often grouped in terms of these categories in the Photo Gallery, the Side Panel graphics and in applications like Side Shows. (pictures having the same user category are referred to as "Photo Groups") |
| e. | File Permissions: Next, place check marks beside all of types of users that you will want to be able to see your photo. Please note that if you do not check “Member of the General Public”, your photo will not be visible in system generated photo galleries to users who are not logged in to your website. The member type definitions are defined in the System Setup under “Categories & Definitions” / “Member Types”. You should set up your member definitions once and avoid changing them. While you can add additional member type definitions to the list, it is not a good idea to re-order the definitions since each photo and document will need to be updated to correspond to the new list of valid member types. |
| f. | Optional Target URL: This field is not necessary, but you can automatically have a photo link to a particular URL if users click on that photo. Enter an optional valid URL in this field. for example http://ogf.com |
Once you have filled in the form describing the picture, press “Submit” to commit the picture to the database. When the file has been stored you will see a screen similar to the one below. From this screen you can select the option to upload another photo, change information about the image or view the photo library listing
At this point the photo has been successfully uploaded into your system!
A few more notes about the uploaded photos:
| • | Photos that you upload will always be accessible at the URL ‘http://mydomain.com/uploads/filename.gif’. If you forget what the URL is and need to retrieve it, you can access the properties of the image from the list view of the photo gallery. |
| • | Every time a photo is uploaded, “thumbnails” for the photographs are generated at the same time. Both small and large thumbnails are generated, to allow for different viewing preferences in the photo gallery. These thumbnails are stored on the web server under ‘http://mydomain.com/thumbs’. |
Uploading Multiple Photos at Once
An alternate mechanism to upload photos is provided that employs a Flash based control to manage the file upload. NeatWorx wishes to acknowledge the work of Harald Kirschner of Germany for building this upload component and making it available in the public domain.
The Multiple Photo Upload feature is optimized to upload more than one photo at a time. We have optimized this upload process to be faster, in part by providing less configurable options for each uploaded file. If you wish to change the orientation (landscape or portrait) or any other properties of uploaded photos, you can do so after photos are uploaded and saved by Modifying the Photo Properties.
This facility requires Adobe Flash so it the component fails to function it may be because:
a) you do not have Adobe Flash installed in your browser
b) the installed flash component is present but is disabled
c) You are running a version of Flash earlier than Flash 8 or newer than Flash 10 (the tested versions)
d) You are running Flash in a browser, browser versions or operating system that we've not yet validated
The procedure for using the multi-upload facility is described below:
Start by selecting the option to upload multiple photos as shown:
Next, click on "Select Files" to indicate the files you want to upload. You can click on photos with your mouse while holding the Shift or Control keys to select multiple files at once.
After this, your selected files will be queued for uploading as shown below. Click Upload to move these files from your local computer up to your website. Files will be moved into the "uploads" directory on the server. Filenames will be pre-pended with a date and timestamp to guarantee that each uploaded photo has a unique name.
You will see progress indicators as below as the files upload.
One the files are all uploaded, the you will be provided with a "Describe Photos" interface as shown below. This screen allows you to provide descriptions for the uploaded photos.
In this example there was no pre-existing photo collection for these photos so we decided to put them into the "Trampoline Team" group. You may assign photos uploaded independently to different user-defined photo collections.
After pressing "Save" there will be a delay of several seconds as NeatClubs generates thumbnails for the uploaded photos in various required sizes.
You will then be re-directed to the "Photo Listing" view from which you can modify the properties of any photos. Note that these photos have now been inserted into the user-defined "Trampoline Team" photo category and are now usable elsewhere in NeatClubs where photo collections are required.
After you provide descriptions for each photo and assign them to an appropriate Category and Collection name you can press "Save"
After several seconds the screen below will appear to confirm that the photos have been successfully stored in your photo library.
