Including Pictures in a Post

There are 4 key steps for including a picture in a post:

  1. Save the photo in the right size and format for the web
    (max 400px wide, 72dpi, 50-100KB).
  2. Upload the photo using the File Upload area of the Write/Edit Post page.
  3. Send to Editor window.
  4. Position your photo correctly in the Editor window
    and edit the layout.

1. Photo Size and Format

Using an image handling program, crop your photo and then ensure that it is no more than 400px wide (200px or 300px wide photos
are often quite adequate). If you are reducing its size, make sure the width and height remain in the right proportions
– usually setting one value (the width) to what you want will cause the other value to be changed automatically.

The photo will have to be saved in JPEG or PNG format (with file type of .jpg or .png).
The filesize of the photo is important to ensure that it does not take too long to load the web page. Recommendations
for filesize of photos vary these days, because of improved technology in people’s internet connections.
However, a handy filesize to aim for is 50KB. You probably don’t want to exceed 100KB.

You can reduce the filesize of a photo by:

  1. reducing its dimensions (mentioned above)
  2. changing its resolution to 72dpi (or pixels per inch)
  3. compressing it when stored or exported (say to 70% of original quality)

Most image handling programs should offer some of these options under “Resize image” or “Save for web”.

2. File Upload

Use the File Upload area under the content input box to upload a photo from your machine to the website.
Enter a meaningful title in the Title field – this is used for website visitors who have images switched off in their
browser.

3. Send to Editor

Once the photo has been uploaded, you still need to include it in your post. Still within the File Upload area,
click on the Browse tab to view uploaded photos.
If it has not already been selected, click on the photo you want to use.

To include the full-size photo in the post,
click on Show fullsize, Link none
then click on Send to editor.

Handy hint: to place the photo exactly where you want it within your text, first select the options you want
(eg Show fullsize, Link none), then click within the input box where you want the photo to go. Then come back
and click on Send to editor.

4. Position and Layout

With the photo now embedded in your post, you can finalise the position, spacing and alignment.
If the photo is not appearing exactly where you want it, you can drag it to another position.
Cut and paste also work,
if it proves too tricky to drag the mouse to exactly where you want.

To edit the layout, click on the picture, then click on little tree icon. This will open up a little dialog box
which allows you to alter how the picture is handled.

Most useful is Alignment.
By default, the photo will appear on its own line within the document. To make the photo sit to
either the left or right of text, select either left or right within the alignment drop-down (the other options
are less useful).

You may also want to increase the space between the picture and the surrounding text. To do this, enter a value in the
Vertical space and/or Horizontal space boxes – these measurements are in pixels,
so a value of 10 is a good starting point.

More about Writing

There are a few other things which are handy to know when writing items. Copy and Paste  If you have already composed the article in another format, a Word document perhaps, it is possible to copy and paste into the Write Post input box.  Copy from the source document, then click in the input box and use […]

Writing an Item

Some simple instructions for writing a new item in WordPress. Log in to the admin function, located at http://domain/directory/wp-admin.  You can probably just use the login link at the bottom of the WordPress home page. You’ll have to enter your username and password.  Then you’ll be taken to the WordPress Dashboard. Select Write from the […]

Great sights, great sites

Just been away for a 6-week holiday and seen some great sights. And many of those great places to visit have some beautiful and informative websites. Have a look at:- The Shakespeare Globe Theatre in London The Glasgow Science Centre in, of course, Glasgow The Scottish Crannog Centre (did you know people used to live in amazing contraptions […]

Website Development

You have the look you want for your website…. but it’s just not doing enough for you.  It’s time to add…. new pages or sections on your website an easily updateable blog a photo gallery an online shop or store a cms, which allows you to easily update website content yourself some interactive elements on your pages an […]

Choices, Friends and Networks

A long time ago, in the olden days, people in villages and towns didn’t have the vast array of choices which we do today. When the wanted some clothes, they had to make do with what they could make or pay a friend to make.  When they wanted to find an apprenticeship for their son, […]

Extracts or Whole Posts?

I want to explore whether to show whole posts or selected extracts of posts. This applies to what I shall call a Group page – any page which shows a set of posts rather than a single post (Category pages or Archive pages or the Blog index page).

Now We’re Rolling

Having dug into the documentation and solved some mysteries regarding the header of the Default theme and the version of code used in the Connections theme, I’ve made a lot of progress with that list of early first steps.