Uploading & Adding Images to Your Content

One of the best features of the web is the ability to easily integrate images into stories and articles, making them more attractive, immersive, and often more informative.  There are tools for uploading and inserting images into content you create for the Guild Avatar website, and this Help entry is intended to tell you how to do it.  The tools are not particularly intuitive, so a brief tutorial was definitely in order.

A Few Caveats, Provisos, & Quid Pro Quos

The file extensions that are allowed to be uploaded are limited.  Currently these are limited to: jpg jpeg gif png txt html doc xls pdf ppt pps odt ods odp docx xlsx dnd4e.  If you need other extensions added, please let me know.

The maximum file size you can upload is 2MB, and a graphics resolution of 1024x768 for images.  You also have a single user limit of 100MB.  Please keep your uploads to a reasonable level and use smaller and lower resolution images where possible.

Files are stored in /files/images.  You should be able to delete files you're no longer using from that directory using the image insertion tool.  Please do so periodically.

Image files that are already posted on the internet can be linked to directly, rather than being downloaded to your computer and then uploaded to our site.  This takes no storage and is generally the better way to go for images you only plan to use once, and or images which are going into a piece of content that has a short shelf life.  This tutorial, for instance, will be around for a long time, so I'll use exclusively uploaded images.  A game or movie review is usually only relevant for a few months, so I'd be more likely to link to an Amazon of Fandango image.  It's your call.

How To

Images can be upload from your computer, or linked to, using the same tool that inserts them into your article.  The tool is available through a button on the Rich Text Editor, called CKEditor, which you can access by pressing the button that looks like a house/skyscape out of a Blue's Clues episode... Usually the first button in the last bank of buttons in the top row, per the picture below.

Click the button, and an image insert dialog box pops up.  This dialog has three tabs at the top, and opens initially to the Image Info tab with a URL field to fill in, as well as simple fill in fields for the image display size, border, and any space you want between the image and surrounding images or text.  The "OK" button at the bottom right of this dialog box will insert the image you've selected into the post you're in the process of editing, right where the cursor was when you clicked the "Image" button to open the dialog box in the first place.  Use this if you want to link to an image available on the internet by copying the images URL and pasting it into the URL field, which appears as below.

Note the blue Browse Server button.  Click this if you want to upload an image from your computer, or insert an image already uploaded to the Guild Avatar Server.  A new file browser dialog box will pop up which looks like the one below.

If you want to insert a file already uploaded to the browser, click on one of the files listed under File Name, then click the "Send to ckeditor" button at the top right.  This will take you back into the file insertion dialog box.

If you want to upload a file from your computer, click the "Choose File" button and a new dialog will pop up on your computer which will let you browse through files on your system and choose the one you want.  That dialog box is different depending on what operating system you're running.  I leave it to you to know how that works for your system.  Once you've selected a file, you'll be taken back to the Image tool's file selection dialog box, and the selected files name will appear next to the "Choose File" button, per the image below.  Click the Upload button, and the file will be added to the list of files under "File Name", and it will be automatically selected for you.  You'll see that it is highlighted in yellow to indicate that it is selected.

If you need to, you can resize the file using the "Resize" button right next to the "Send to ckeditor" button.  Enter either the new Width or new Height, and the corresponding measure will be filled in for you.  Once resized, the new image will be given the same file name as the old one, with an _0 added to the end.  Select and delete the old file, then select the new file by clicking on it before continuing.

Once you've uploaded and selected the desired file, click the "Send to ckeditor" button, and finish inserting the file as outlined above.

Happy image insertion!

MJ