This is a brief tutorial for any new authors that might find themselves writing material for Trollhattan Saab. It was written in October 2008 and the current setup here uses WordPress as the content management system, with significant customisation via a purpose built template system.
Click on any of the images below to enlarge.
You’ve got your username and password, right? The first thing you need to do is go to the login page I gave you and gain entry to the site. Once you’re in, you’ll come to the Dashboard, which looks like this at the moment:
That look will probably change with a new version of WordPress due soon, but the naming conventions should remain the same.
Writing an article
In order to write your article, you need to click where it says “Write”, at the top left, just under the big “Trollhattan Saab”. Here’s the Write screen:
As you can see, there’s a line at the top for the title of your article, a series of formatting buttons, followed by a big blank space where you put all your glorious musings.
As a rule, titles shouldn’t necessarily try to be clever. They should reflect the content of the article in just a few words, which helps search engines find the article easier. I haven’t always stuck to this (snippets entries are a notable exception) but it’s good to follow wherever you can.
The formatting buttons should be fairly easy to follow.
To use them, select the text in your article that the formatting will apply to, then select the button of your choice. You’ll really only need to use the Bold, Italics, Link and Blockquote buttons. Occasionally you might use the Delete button when you want to strike out incorrect text but leave a record that it was there. It’ll appear like this. Don’t use the “Img” button. Images are handles as follows…..
Adding images to your posts
Just above the formatting buttons, you’ll see an “Add Media” section with four buttons:
The first of these four buttons is the one we use to add pictures to posts on the site.
Handy tip: Make sure that the cursor is in the spot where you want the image to appear. It saves cutting and pasting the code into the right position later on (though I find that in some versions of IE I have to move the code around manually anyway).
With your cursor in place, click on that image button and you’ll come to the following screen:
Click the “Choose files to upload” button
Select your image file (jpeg recommended)
Click OK.
The software wizards will then proceed to load your file on the server and create the appropriate thumbnails at the same time. When your image is loaded, you’ll come to this screen:
A couple of notes here:
0) Before you load an image – is it correctly sized? Images shouldn’t be too large, unless their wallpapers. Ideally they should be max 800-900 pixels wide and around 700px high (absolute max). This helps the reader in viewing the images easily, esp on lower res monitors. You may need to resize your images.
1) Ideally, your image file title should reflect the main subject of the image. If it doesn’t, note something about the main subject (e.g. 2008 Saab 9-3) in the “description” box. The title and description are both searchable, which makes it easier to go into the gallery and pull down a picture you’ve loaded previously rather than loading it up from scratch again. More on that shortly.
2) Towards the bottom, you can see check boxes for the size and alignment of the image. The size should default to “Medium” and should be left there in most instances. This will produce an enlargeable image of 300px on the longer side, with the same proportions as the original. The only time you’d change that would be when the image is less than 300px. e.g. the media button image that I posted above. In that instance, to prevent WordPress from enlarging and distorting the image, I checked the “Full Size” box. You’ll find that “Medium” covers 99% of your image requirements.
3) Don’t use the alignment buttons. I’ll cover that right now
Image formatting
Placement and presentation of the imagery on TS is done by hard-coding the image code.
Once you’ve selected your image, written in any descriptions, etc, you need to hit the “Insert Image in Post” button at the bottom. That’ll dump the html for the image where you left your cursor.
Part of the html for the Dashboard picture that I used as the first image in this post looks like this:
img src=”http://www.trollhattansaab.net/wp-content/uploads/2008/10/dashbo ……..
To center the image, what you need to do is insert class=”centerp” between img and src. This will center the photo and put the two little lines around it.
If you’d like your images on the wrapped in text and on the right or on the left (like I did with these images) then you substitute leftp or rightp where I’ve got centerp in the example, above.
The complete code should end up looking like this. I’ve highlighted the code that was added for formatting.
It sounds complex when you read it, but it’s really quite easy.
Finishing off your post
Once your article is written and your images are inserted, there’s just a few things left to do.
Scroll down under the area where you’ve entered your text and you’ll see a list of categories. You need to select one or maybe two categories that your entry fits into. Try to keep it down to two if possible, please. Most should be self explanatory.
There’s also an area for tags, which I’m hopeless at remembering to use, but if there’s a notable subject that isn’t covered by a category desctription, please feel free to add it as a tag (e.g. Cadillac won’t have a category, but could be added as a tag).
You’ll also see an excerpt field. This controls what’s seen on the front page when people log on to TS. If you leave the excerpt section blank, the software will automotically use your first 30 or 40 words (approx) and that’s what people will see on the front page. I prefer to customise my excerpt, especially on a snippets entry, where I add dots to create line spaces (excerpt doesn’t do that automatically).
Finally, there’s an area called “Custom Fields”. This is where you allocate the image that will accompany your post on the front page of TS. Here’s how to do it:
Clicking that image button again, you come to this screen:
Select the “Media Library” tab at the top.
You can use the search box to search the library and find a suitable image. By the way, this is not just for the thumbnail. You can use this to search for images to include in your post as well.
For the thumbnail, you only want a small piece of the image code. A normal image URL will look as follows:
http://www.trollhattansaab.net/wp-content/uploads/2008/10/hirschoct1.jpg
What we want for the thumbnail is the bit from “wp-content” on. For the example above, that would be wp-content/uploads/2008/10/hirschoct1.jpg
Cut and past that code snippet into the value box in the “Custom Fields” section. There’s a drop down box on the left. Select “Image” from that drop down. Then click the “Add Custom Field” button. This will create the thumbnail that appears on the front page.
——
I think that pretty much covers the basics of writing an article for TS on WordPress. TS is a little unique in that it has a customised theme framework, hence if you’ve used WordPress before, it’ll be a little different, most notably in the area of image handling.
If you’ve got any queries, feel free to ask.
-