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.

As supplied, SmartStart applications are either preloaded with a range of standard templates from which the administrator can choose, or in the case of clients who have opted for a unique design, the design will be preloaded.

Main Light n Easy administration functions

• Login to admin with the information supplied by TOSD. The login link is in the footer (2 column layout) or the key under the header (3 column layout)
• The application will respond with “Login Successful” if you have logged in correctly, and will present three icons at the top left of the content area of the displayed page:
• The left hand icon is clicked when you wish to edit the currently displayed page. If the page you wish to edit is not displayed, select it from the menu first.
  • Note that a WYSIWYG editor is provided for entering content. This can be used to enter most types of content including text, images and hyperlinks.
  • Directly under the WYSIWYG editor window is a “Description” field. This is the meta description for the page. See this article for help with writing Meta Descriptions.
• The middle icon deletes the current page. Use with great caution because once deleted you will not be able to restore the page.
• The right hand icon of the three gives access to the admin tools.

• ‘New page’, as the name suggests creates a new page.
  • If the new page is to be at the top menu level (the same level as the home page) leave the menu level at the default value of ‘1′. If it is to nest under a top level menu item, select ‘2′
  • For the ‘Insert After’ line, select the menu item from the drop down box that you would like your new page to follow.
  • Assign a filename for the page – single word, no spaces, lowercase is best. Do not add any extension.
  • Assign a menu label. This entry will be displayed to the public on your menu. It can have multiple words seperated by spaces in the normal way if required.
  • Click [Create page] to save
  • Click on the new page from the menu then click the edit button.
  • The new page will display the Title, but no content.
  • Important: initially just quickly add at least one character to the page, click the green tick to save, then go into tools and click ‘Regenerate’. Your new page will now be activated.
  • Return to edit as required with your content.
• ‘Extra’ allows editing access for the information located in the sidebar of the website. This is sometimes linked to the News facility. That is, the information entered in Extra acts as a News ‘leader’, that visitors click in order to read the complete article.
• ‘News’ allows for the creation of categorised news items.
  • Special note: When a site is set up by TOSD to incorporate the news facility there will be a news page which, when opened in the admin editor, will have a title, a tag that looks something like this: [%!$news 1 5 1 1 $!%], and nothing else. Do not edit this page – this is not where news articles are created.
  • News articles are created by clicking on the tools icon in the admin section and then selecting the News icon.
  • The screen that opens will allow you to create any number of news articles that will be automatically displayed on the news page when saved. The articles can be categorised, tagged with the Author’s name and assigned a title. Note that it is not necessary, nor is it a particularly good idea, to fill in your email address. Categories are optional and are often not necessary.
  • News items can be set to allow comments. Speak to TOSD if you would like your news  facility set up in this way.
• ‘Images’ provides a facility for images to be uploaded from a client’s PC into a directory for display in the website’s image gallery. Note that not all SmartStart solutions are initially configured to have an image gallery but one can be added at any stage. Contact TOSD.
• ‘Gallery’ allows clients to edit an XML file that is responsible for displaying the image names in a gallery.
• ‘Downloads’ allows the site owner to upload files (usually pdf documents) from their PC for visitors to download. Files can be arranged in categories. This facility is not usually enabled on a standard solution, but it can be enabled at any time. Contact TOSD.
• ‘Links‘ allows the site owner to easily create hyperlinks to external sites that may be of interest to visitors. The links feature descriptions and can be categorised.
• ‘Menu’ allows certain aspects of the menu structure to be manually edited. In most situations it is best not to alter any of these settings. Contact TOSD with any queries.
• The ‘Generate’ icon is actioned whenever template information requires updating. As it can be difficult for clients to determine what alterations require re-generation and what ones do not, the simple solution is to click it at the end of all editing sessions.
• ‘Setup’ allows the administrator to enter site wide system parameters.  In particular the Title, Sub-title, Keywords, Description and admin email details should be correctly set.
  • The admin email address dictates where the output of the contact form will be set.
  • The Title and Sub-title appear in the header.
  • There is a pull down box to change the default template. There are 12 colours of the 2 column template and 12 colours of the 3 column template to choose from.

• If you prefer the software to be installed on your PC try www.paint.net (and click on the ‘get paint’ link).
• If you prefer to use an online service  try www.pixlr.com (and click the ‘Jump in’ button).

Both of these are terrific editors that are more than up to the task.