Page 1 of 1

Uploading photos on Web Wiz Forums

Posted: Thu, 13 Apr 2017, 19:12
by coulomb
[ Edit: I note that this procedure is obsolete now that we have changed over to phpBB forum software. The procedure for the present forum software is simply to drag and drop attachments (including images) into the post editing pane.]

New forum users often have trouble figuring out how to add photos to their posts. The Web Wiz forums which we use at present (but hopefully will replace soon) is a little tricky to get used to.

First: photos straight out of a digital camera are usually very high resolution, so you need to prepare your photos a little. I use Microsoft Paint; it comes with Windows and it's very easy to use. Any paint program can probably crop and scale an image as needed. Usually, it's best to aim for about 640 pixels horizontally, and some 400-500 pixels vertically. Save in JPEG or PNG format; use JPEG for photos and PNG for screen shots and diagrams. The file should have a .jpg, .jpeg, or .png extension (last few letters of the file name, after the final period). Save the file somewhere you can readily find, such as your Pictures library.

Some images (e.g. schematic diagrams) often can't be squeezed into 640 pixels and still be readable. If so, leave it at the smallest readable size, and be aware that when the image appears in a post, it will be scaled to 750 pixels across. Readers will be able to see the image in full resolution, but they won't have instructions on how to do it, and it varies from browser to browser. I often add a comment similar to "Use your browser's controls to view the image at full size", or similar. In Firefox, there is a context (right mouse button) menu item "View image" to display the image by itself on a page; in Chrome, there is a "View image in new tab" context menu.

The byte size of the image has a limit too; usually it has to be less than 200 KiB (200 kilobytes, 204,800 bytes maximum). If the file is too big, the forum software will refuse to upload it. IF you can't get it any smaller, you could insert it into a zip file, and attach the zip file. You could also upload it to a third party file hosting service, such as Google Drive, PhotoBucket, DropBox, or many others, and link to the image stored there (see below for more on this).

[ Edit: usually it's best to save screen captures in PNG (Portable Network Graphic) format, since it's lossless and won't fuzz up any fine detail. However, some captures take up too much space (file size is too large) when saved in PNG format. In these cases, you can save as JPEG (.jpg or .jpeg), and wear the extra fuzziness. ]

Once you have a suitable image, you write your post. At the point where you want your image to appear, use the appropriate toolbar button:


For uploading a new image, we'll want the icon on the right, "upload image file". If you're wanting to link to an existing image on PhotoBucket, you'd use the image icon without the arrow, "link to existing image". While we're here, you can attach .pdf and .zip files (with larger byte size limits than for images) with the "other attachment" icon. For making clickable URL links, you can use the "insert hyperlink" icon. Don't bother highlighting or even typing the text of the link; it will ignore what's highlighted and ask for the visible text, then the URL of the link. Remember that URLs have to start with "http://" (or "https://"), and there must be no spaces in the URL, even before the start or after then end.

Ok, back to uploading an image file. After you've clicked the image icon with the arrow, you'll get this dialog:


(Lately, I've sometimes needed to resize that dialog box to see the buttons; if necessary, grab the bottom right corner and drag it out to show the whole dialog.)

It helpfully reminds you about the allowed file types, extensions, and maximum size. Click on "Choose File" (note: the exact wording of this button depends on the browser). You will get a standard file browser for your operating system. Navigate to the file you've saved. I usually like to view the file details, so that I can see the size of the file, but that's up to you. Once you have chosen the file (usually double click the file's icon, or highlight it and click OK), you should end up with this:


Click on OK (the OK of the "please be patient" dialog). The "please be patient dialog should disappear, to leave the one behind it with OK and Cancel. Click OK to continue. After a few seconds (depending on many things like the size of the file, your network speed, how busy the server is), you should end up with the dialog box with only the Cancel button enabled:


Up till that point, there is a message in the bottom left corner of the dialog box saying "Waiting for forums.aeva...", but usually you won't even notice it.

Now, when Cancel is the only option, is the time to press Cancel. You aren't cancelling your file upload; that's compete now, even if you abandon your post completely. You are merely closing the file upload dialog box at this point.

An easy way to remember this is to click OK till Cancel is the only option. Then and only then will Cancel be the right thing to do (assuming you didn't mess things up and actually want to cancel out to start again).

Now your post should have something like this at the end:

[ IMG ]uploads/689/Web_wiz_upload_image_3.png[ /IMG ]

There won't be the spaces around the square brackets; I have to put them there so it doesn't replace this text with the actual image. And of course your file name and the path will be different; /uploads/689 is reserved for my uploads; you will have a different number in place of 689.

If you like, you can check to see what your page is going to look like, by using the "Preview" button near the bottom of the Edit or Create New Topic page. That's it; you have your image embedded in your post, or it will be when you finish editing and click the "Post New Topic" or "Update Post" button (depending on whether you are creating a new post, or editing an existing one).

To edit an existing post (ordinary users can only edit their own posts), use the drop down menu near the top right corner of every post:


Click on the words "Post Options" or the gear icon to the left of that text. That will bring up a page allowing you to edit the text of the post. If you want to change an image, that's possible too. You have to find the image in the File Managed, delete the image, and perform a new image upload with the same file. It will end up with the same name, and the changed image will appear in place of the old image, in all posts using that image. You may have to tell your browser to refresh that page to see the change immediately after making it.

To find the file manager, start with the Member Control Panel at the top left of every forum page:


Press Member Control Panel, and the following should appear:


Choose the File Manager tab. Now you should see something like this:

Image      Image

The first image shows the list of file names on the left, and the preview of the image on the right. The second image shows the file details, and the Delete File and New Upload buttons mentioned earlier, when you need to edit an image. These buttons act pretty much as you'd expect, so I won't give step by step instructions unless asked for.

Please show me where I'm not clear in the above, and I'll attempt to edit it to a more usable resource.

[ Edit: see also Setting up an index page for slightly more advanced editing tips. ]
[ Edit: The image width above which they will be scaled down is 750 pixels. ]

Uploading photos on Web Wiz Forums

Posted: Fri, 14 Apr 2017, 16:48
by Paul9
Thanks a lot Coulomb - I have always had problems with uploading images, both on this forum and others. I am going to give it a go here and see what happens.


I have followed Coulomb's instructions and just checked in preview to see what happened.

It worked!

In my humble opinion the software is less than optimally designed. The step in the process where I have to click on CANCEL to progress to the next step is exactly the opposite of what I would expect. In virtually all other programs (and there have been many I have worked on not just used!) CANCEL takes you back to a previous step not forward to the next!

The explanation in Coulomb's post is the first time any explanation has explained the "logic" behind clicking on CANCEL.

The two most important lines in coulomb's post are:

"Now, when Cancel is the only option, is the time to press Cancel. You aren't cancelling your file upload; that's compete now, even if you abandon your post completely. You are merely closing the file upload dialog box at this point."

Thanks Coulomb - well explained!!


Uploading photos on Web Wiz Forums

Posted: Tue, 02 May 2017, 17:05
by Paul9
Nothing to see here.

This is just me trying to upload a pdf file.


In Preview it looks like it worked.

Thanks Coulomb