1. Select, resize and compress images for the web.
2. Upload the images to the /uploads directory using GetSimple’s file manager.
3. Create a new image gallery
4. Add selected images from the /uploads directory to the newly created gallery
5. Insert the tag that calls the gallery into a page

And here are a few more details . . .

Step1: Select, resize and compress images for the web

If you are familiar with preparing images for display on web pages then simply use whatever methods are familiar to you. If not I suggest you use Pixlr (www.pixlr.com) This online image editor is free and simple to use. Regardless of the method used to prepare images for display in the Simple Image Gallery I suggest you consider the following:

• Simple Image Editor will create thumbnails for display in grid form on the web page. These will present better if they are all the same size. One way to achieve this is to create a common background (e.g. 600px wide x 600px high) and then re-size and paste each image onto the background before saving it .
• Images straight out of a modern digital camera will be far, far too big, both in terms of actual size and file size. I suggest that finished images have a maximum dimension of 600px and all images should be saved at 96ppi resolution for the web.
• Common image formats would be png or jpg. If you are unsure I suggest you save the images in jpg format with the quality set to about 80. This will give a significant reduction in file size while still producing a nice image.

Step 2: Upload images to GetSimple’s /uploads directory

• In admin, click the ‘Files’ tab then click the ‘Upload files and/or images’ button

• A pop-up window will appear. Browse you PC, select the required image and click the ‘Open’ button. The image will be automatically uploaded and displayed in the files list.
• Repeat for all the images that are required for the image gallery.

Step 3: Create a new image gallery

• In admin, click the ‘Image Gallery’ tab then click the ‘Add New Gallery’ button

• Give the gallery a name then go down the list ticking those images that are required for the Gallery

Step 4: Add selected images

• When you have completed the selections scroll to the bottom of the file list and click ‘Save Gallery’

Step 5: Add the gallery to a page

• The gallery list will now be displayed. Highlight the tag code for the gallery just created and copy it.

• Go to the page where you want the gallery to be inserted and paste the code that you just copied and save the page.

That’s it! You should now be able to go to your website and view your new image gallery. Click on any thumbnail to pop up a larger version and scroll through the images.

If you would like to see a working version you can see one here.

Accessing the administration panel

Go to www.’yourdomain’.com.au/admin and enter your Username and Password as provided by TOSD.

Note: Replace ‘yourdomain’ in the above link with your own domain name ?

Main administration tabs

The diagram above shows the general administration layout. There are six main menu tabs across the top. Pages and Files are the only ones we will concern ourselves with in this Quick Start Guide. Notice that when you click on any of the main tabs a secondary set of options appears in the right hand sidebar, with the currently selected option shown in orange.

Pages

View All Pages

Selecting ‘Pages’ (from the tabs) then ‘View All Pages’ (from the sidebar secondary menu) displays a list of all the pages in the website.

Clicking on any of the page title links will enable you to edit that page.

Clicking on the ‘Create New Page’ button in the secondary menu will enable you to create a new page.

Creating a new page

• Click the ‘Create a New Page’ button
• Click the ‘Page Options+’ button to expose the options for your new page
• Give the page a ‘Title’ (preferaby one that contains a keyword, or keyword phrase that is relevant to the page content). Do not make the title too long, or, apart from anything else, it may take up too much room in the menu.
• Slug/URL: you can leave this empty. It will be automatically created from the page title when your page is saved. However if you do want something a little different from the title use lowercase letters only and dashes to separate words (no spaces). E.g. daffodil-varieties
• Select the parent page. If the page is to be at the top level of the menu, select ‘index’ from the pull down list.
• Add keywords (I suggest no more that 6 words) and make sure that any keywords are also contained in the general page content.
• Add a meta description (I suggest no more that about 140 characters (including spaces). The title and meta description are both displayed in the search engine results. They must be relevant to the page content and written in such a way that they will encourage people doing searches to want to click them.
• Template: in general leave as ‘Default Template’. Contact TOSD if you are in doubt.
• If the page is to be added to the menu (this would be the normal situation but you may not want to do it until you have finished working on the page) tick the ‘Add to menu’ box.
• Use the editor to enter and format your text, images and hyeprlinks. If you hover over any of the menu icons a text label will appear to tell you what it is. As shown below, icons are available for all common formatting functions.

Adding Content

Images:

These should be uploaded first using the ‘Files’ tab. All images should be set to their final size in pixels before uploading and have a resolution of 96ppi. Images straight out of a digital camera will be far too big, both in terms of their physical dimensions and file size. If you don’t have software to do this go to http://pixlr.com/ , click “Open Photo Editor” and click the ‘Open Image from computer’ link. This will enable you to resize your image and save it at the correct resolution.

Images are added after the text paragraphs have been set up.

• Click on the start of the paragraph the image is the be associated with to set the cursor then click the image icon.
• In the popup window click the ‘Browse Server’ button and select your image from the uploads list.
• Add a brief description in the ‘Alternative text’ box (using keywords if possible) set the alignment to’ Left’ or ‘Right’ and the HSpace to 10px to allow for a little padding around the image. Click OK to save.

Hyperlinks (links)

Highlight the words that will form the link and click the link icon. A popup window will appear.

• If you are linking to another page of your own website set the link type to ‘Link to local page’ and select the page.
• If you are linking to a page on another website set the link type to ‘URL’ and enter the URL e.g. www.anotherwebsite.com.au/pagewhatever
• If you are linking to a pdf (uploaded previously using the ‘Files’ tab) set the Link Type to ‘URL’, click the browse server button and select the file from the uploads list.

Presentation tips

• Leave the main body text of the page at the default size and colour. In other words: just type!
• Best to avoid pasting text from another application but if you must always strip pre-existing formatting by papsting it into a completely plain text editor (e.g. Notepad) first
• Getting the order right will help. Here is what I suggest . . .
• Add the main text content first.
• Format the headings and sub-headings by clicking on the icon with the drop down arrow labelled ‘Normal’ and selecting the required heading size. Note that Heading 1 (H1) should not be used as it is reserved by the system. Note also that the colours of the headings will not show up in the editor. They will appear correctly when the page is viewed, though.
• Add any images
• Add any hyperlinks
• Do any final adjustments to formatting e.g. bold, italic etc

Creating a News Article

If your website has a News facility configured click the Pages Tab then the News Manager button on the secondary menu. The existing News articles will be listed. Click on one to edit, or click the ‘Create New Article’ button to create a new one. Creation is very simple. Just type the article and add images or links as required. An Excerpt (summary / intro) may be added if required but is not necessary.

Uploading Files

• Select the ‘Files’ tab from the top menu – existing files will be listed under the Uploads directory
• Click the ‘Upload files and/or images’ button in the secondary menu to upload a file from your PC, taking note of my comments above in the Page Content/Images section regarding correct image preparation.
• This facility can be used to either upload images for insertion into a page or news article, or documents (preferrably pdfs) that you want to link to.

Image preparation

While it is possible (and easy) to re-size images from within WordPress, it is always best to size then appropriately prior to uploading them. There are two parts to this process:

• Setting the resolution to 96dpi (depending on the image’s source it could be up to 300 dpi, which would result in a very large file that would be slow to download)
• Setting the physical dimensions (width x height) in pixels. There can be a bit of trial and error with this one depending on the available width of the content area of the page or post.  I suggest you start by setting the width to 250px. In most image resizing applications the height will adjust automatically to suit.
• If you don’t have an image re-sizing application have a look at Fotosizer. This is a great little application that lets you resize multiple images at a time.

Image Upload / Insertion

• Open the page or post you would like to add the image to.
• Click at the start of the paragraph you would like to associate the image with.
  • You will see that you can either align the image to the left, with the text flowing around it on the right, or vice versa.
• Just above the row of editor icons there is a lable “Upload/Insert” – click the square icon immediately to the right of this lable. Notice that if you hover your mouse over it, it says “Insert an image”
• The popup window defaults to the screen required to upload an image from your computer. This is the normal situation. Click the “Select Files” button, browse to the folder on your computer that has the required image, and upload it.
• A thumbnail of the image will be displayed, along with fields to complete as follows:
  • Enter a meaningful title
  • Set the Link URL to “None” unless you would like the image to be clickable, in which case you can enter the target address
  • Set alignment to “Left” or “Right” as required.
  • If you have sized the image appropriately prior to upload you can leave the size to the default “Full size”
  • Click “Insert into post”
• The image will now be displayed in your post. Often you may like to create some whitespace around the image so that the text does not appear to be crowding it. If that is the case do this:
  • Click on the image, then click the edit icon.
• In the pop up window click on the Advanced Settings Tab
  • Next to the “Image Properties” line set Vertical Space to 10 and Horizontal Space to 10. You can experiment with these values.
  • Note that you can also add a border if required. Try entering a width of 2.

That’s it!

If you have come this far you have done well. It seems like a lot of little steps when described in detail like this, but it will soon be second nature. Happy blogging

Was this post useful? Feel free to add a comment.

• Making the most of meta description tags
• Writing meta tags
• Meta description tag

And this is a nice article on writing page titles just to round off the subject. While titles are arguably not as imortant as descriptions they are still relevant:

• SEO page title tips

And what about meta keywords?

Well, the truth is that they are no longer very relevant at all. Still, if you would like to use them ensure that you use no more than about 5-6 words. Long lists of keywords are more likely to have your site flagged for spamming.

• Meta tag generator
• Color Picker: hex
• Popup Window Code Generator
• International Currency Converter
• Fotosizer: a simple batch image resizer

More will be added over time, however in the mean time if you would like to suggest a utility feel free to leave a comment and I will add it to the list.