Documentation – How to upload assets to the website

This is a brief description of how to store (on the alumni website) all files that are referenced in pages on the site.  This includes, but is not limited to, images, PDF files, Word documents, spreadsheets, etc.  This also includes all files used to handle the site as a whole (the theme, style sheets, etc. that are best handled by web-savvy technicians. The transfer of assets to the website is accomplished using File Transfer Protocol, commonly referred to as FTP.

Get FileZilla

A popular and free software to manage FTP is FileZilla.  It can be accessed here for a free download: Download FileZilla.  The discussion below assumes that you are working with FileZilla.

Logging on to the server hosting the alumni website

When you initiate FileZilla, you will see:
the FileZilla login fields

Fill in the four fields using the login credentials that you have been given, then click on the FileZilla Quickconnect button

You will see a screen similar to this one:
the FileZilla screen fields

The areas of the screen (sections) are:

A

  • The log of all transactions between your computer and the server. You can ignore this.

B

  • A folder display of the open folder on your computer.  You can change this in the the FileZilla local site folder field field above section B

C

  • A folder display of the open folder on the website server. You can change this in the the FileZilla server folder field field above section C. However, see Navigating Using FileZilla, below, for a better way to change the server folder.

D

  • The listing of all the contents in the open folder on your computer (as identified in section B.

E

  • The listing of all the contents in the open folder on the website server (as identified in section C).

F

  • A log of all the file transfers accomplished or being carried out.

The following text refers to these six sections.

Navigating using FileZilla

When you first log in to the website, you will be shown folders which you may not modify.  Instead, you need to navigate to the area where all assets are kept.  Navigation is similar to that used with Windows explorer.  Do the following:

  1. either single-left-click on the FileZilla 'public-html' folder name in section C or double-left-click on the FileZilla 'public-html' folder name in section E.
  2. repeat using the FileZilla 'wp-content' folder name
  3. repeat using the FileZilla 'uploads' folder name

At this point, you are at the folder on the website server where all site assets are stored. You may have to navigate further to the area corresponding to the website page associated with the asset.

You should also navigate to the correct folder on your computer, using information in sections B and D.

At any time, you can go up one level by clicking on the FileZilla higher folderin sections D or E.

Transferring files using FileZilla

To copy a file to the server, simply drag it from section D to section E.  You will see this logged in section F.

You can also copy files from the server to your hard drive, by dragging the file from section E to section D

Likewise, you can copy complete folders in either direction.

Keeping the folder display current

If you make changes to the folder on your computer that is featured in section D, Filezilla may not know about this.  So, if you created a new image with the intent of placing it on the website, it may not be shown in section D after you saved it there.

You can refresh section D at any time by clicking in ctrl-F5.

Deleting or renaming files or folders on the server.

As in Windows, you can right-click on a folder or file in section E.  You will see
the FileZilla file and folder action options

Click on the FileZilla delete file or folder or the FileZilla rename file or folder.

Creating a folder on the server.

Folders to contain assets on the website server should parallel pages on the website.  i.e., there is usually one folder for each website page that references assets.

Should you need to create a new folder (under the wp-content/uploads folder):

  1. In section C, navigate to the folder under which the new folder is to be created.
  2. Click anywhere in section E. You will see
    the FileZilla file and folder action options
  3. Click on the FileZilla new folder button.