Inserting Pictures Into Wordpress

1

INSERTING PICTURES INTO WORDPRESS

If you don’t want something too complicated, just read the BASIC section. If you want to go into the topic in more depth, read the ADVANCED section as well.

BASIC

To add pictures (and maybe a bit of text) to an existing page:

• Either Bring up the page and put the cursor where you want to add the picture, click Edit This Entry at the bottom of the page and it will switch straight into the Dashboard for that page,

or click Oswestry Borders U3A’ in the black bar at the top left of the page and select Dashboard, Pages, and select Edit for the desired page.

• You can now add/change the text as you wish. Click Update.
• To add a picture, click where you want to add the picture.
• Click Add Media and, if the picture is on your computer, click Upload Files then Select Files and choose the file you want from wherever you’ve stored it. If the picture is already in the Media Gallery, click on it.
• The file will then be put in the Media Gallery. On the right hand side there is a box called ATTACHMENT DETAILS; you need to make your selections:
• Particularly give the picture a Caption (this then stays with the picture if you move it, etc.)
• Alt Text is for blind users who have a voice read out to them what is on the screen.
• Scroll down to ATTACHMENT DISPLAY SETTINGS and select which Alignment you want (Left, Centre or Right). If you want text to wrap round it, select Left or Right
• select Media File for Link to and
• for Size select Medium as it’s big enough to be seen but the file is not so big that it uses up too much of our total free space!
• Finally click Insert into page, then Update.
• You can then click View Page (just below the page heading) to see what your page will look like. This opens a new screen, so it’s often best to close it once you’ve finished viewing.
• If you wish to change something once the picture is published, bring up the picture in Edit page mode, click on it, and two symbols will appear, one to Delete it, and one to Edit it. Click the Edit image symbol and different options become available. You can change the Size (that it will appear on the screen), and the other options mentioned above. If you want to link the picture to a larger version elsewhere, for instance on another website such as Flickr, add the web address in Link URL. Don’t forget to click Update.

To add an extra page, e.g. if you’ve got a lot of stuff to add (for instance about a trip or event):

Bring up the Dashboard again (Oswestry Borders U3A in black bar top left, Dashboard), Pages, Add New. A new page will come up. Add whatever heading, text and pictures you want AND then put it in the right place on the website by going to Page Attributes (right hand column), under Parent choose the page you are adding to, and in Order say whether it’s the first, second etc. page. Click Publish.

To delete a page:

Bring up the Dashboard, Pages, and put your cursor on the page you want to delete. An option to Trash comes up; click it.

More help:

Learn Wordpress.com has a lot of useful help. If you can’t find what you need, use the Search box.

These are a shortcut to learning how to do tasks, and can be accessed at

Get Flashy is the Help page on inserting Galleries of photos, Slideshows (possibly more useful when inserting several pictures on a theme) and Videos.

Very comprehensive tutorials

FastStone Photo Resizer 3.2 is an image converter and renaming tool that intends to enable users to convert, rename, resize, crop, rotate,change color depth, add text and watermarks to images in a quick and easy batch mode. This is a useful tool to reduce the file size of photos, whether you are putting them on the website, adding them to a Borders Bulletin article, or sending them by email. Available to download FREE at Alternatively, FastStone Image Viewer 4.9 also allows you to view images including comparing up to 4 images on the same page, with a zoom-in facility which enables selection of only the best focussed photos. In addition photos can be moved or copied to other folders easily (for instance, from your camera to a folder on your computer). I wouldn’t be without it!

ADVANCED

Image Size and Quality

The size and quality of an image for use on a web page is determined by a variety of things.

Physical Size

The physical size of an image is based upon two things: The size of the image on the screen and the file size. Generally, the file size is treated as a different issue.

File Size

This is the size of the file on your hard drive or server.

Resolution

Resolution refers to the number of pixels in an image. Resolution is sometimes identified by the width and height of the image as well as the total number of pixels in the image.

File Type

There are basically X image types popularly found on the Internet: jpeg,gif,png and (for favicons (the icons next to the address) Addendum (3)) ico.

The physical size of the image is information we need to know in order to determine how much "space" the image will occupy on a web page. If your WordPress Theme features a fixed width content area of 600 pixels and the image you want to use is 800, the image will push the sidebar and layout of your web page around, messing up your design. Images within that 600 pixel width need to be restricted to that maximum width in order to protect the layout of your page. It's up to you to determine what size they should be from there, matching the image to your overall layout and styles.

File size dictates the time it takes to load your page, the larger the file size, often increased because of a high image resolution quality, the longer it will take to load. People often don't have the patience to wait through long web page loads, so keeping your file sizes low speeds up your web page access times. Typically, large high quality images should be kept between 100K and 60K. Smaller images should be closer to 30K and lower. Larger file sizes also take up more of the space our website has been allocated.

The resolution of the image dictates its clarity. The higher the resolution, though, the larger the file size, so you have to make a compromise between quality and file size.

Luckily, the various file types most commonly used on the Internet have compression features. When you save the file as one of these types, it condenses or compresses the data information in the image file. Internet browsers can decompress this information to display the image on the screen. Some graphic software programs allow you to set the compression rate to control the quality of the image (and file size) at the time you save it. Depending upon your use of the images on your site, you may have to experiment with this to get the right ratio that keeps the resolution quality good while maintaining a small file size.

Websites use four common file types. The end of a filename (called the extension) tells what type it is. One type, ico, is to make a favicon file -- but this is usually only done when a website is first set up. The other three types are used for general images:

• jpg (JPEG) is good for photographs. Saving a photo as jpg removes detail from the photo. Good photo editors let you control how much detail is removed (the "compression"). Different photos need different compression; doing this carefully and viewing the result can give you a usable photo with a small file size.
• gif can be poor for photographs. It's better for line art, like logos, with solid areas of the same color.
• png is for both photographs and line art. It compresses photos without losing detail, but usually makes larger photo files than JPEGs. Some older browsers don't completely support png, though.

If you aren't sure which file type is best for a particular image, try saving the image in more than one type and comparing the file sizes. Using the right type can make a big difference! There's more information in Sitepoint's GIF-JPG-PNG What's the Difference article.

Resizing Images

Not all graphic software packages allow you to resize images, though most should. Check your graphics software table of contents or index for resize, size, transform, reduce, or enlarge, all synonyms for the for the same thing. If they don't have the feature, you may have to find different software.

The process of resizing images is fairly simple. There are usually two methods:

1) You can resize an image through the use of tools provided which allow you to manually shift the edges of an image to deform or resize the image. The best way is to grab a corner, not the edge, to resize the image. The corner "handle" will usually resize the image maintaining the overall height-width ratio. Check your manual for specific instructions.

2) The other method involves simply specifying the image's final size. The advanced graphics programs allow you to set it by exact dimensions or a percentage of reduction or enlargement.

After resizing the image, the image may be smaller, but it may also be slightly out of focus. You can sharpen the focus of the small image by using the sharpen feature in your software.

When you have fine-tuned your small sized image or new thumbnail, export the image as a jpg, gif, or png.

Resources

• Image File Formats on the Web (See Addendum (2) below)
• GIF, JPG and PNG – What’s the Difference? (See Addendum (1) below)

Inserting Images into Posts and Pages

Contents

• 1Overview
• 2Step 1 – Placing your cursor
• 3Step 2 – Click the Add Media button
• 4Step 3 – Add or Select Your Image
• 5Step 4 – Attachment Details
• 6Step 5 – Attachment Display Settings
• 6.1Image Alignment
• 6.2Image Link
• 6.3Image Size
• 7Step 5 – Inserting the image
• 8Resources

Overview

When creating or editing a WordPress page or blog post, you can easily add images at any time using the WordPress Media Uploader tool. Here’s how to add an image, step-by-step, using the media uploader:

Step 1 – Placing your cursor

In order to add an image to your page or post, you must first insert your cursor in the place in the text where you want the image to appear. By placing your cursor within your text, you can add images inline with your content. You can also place your cursor on a blank line if you want the image to appear by itself instead.

Tip: It’s a good idea to place your cursor on the left margin of your text, even if you want the image to appear on the right. That’s because there is a special setting called Alignment that allows you to control whether the image appears on the right or the left side of the text. It even controls how text flows around the image automatically.

Step 2 – Click the Add Media button

Once you’ve placed your cursor on the line where you want your image to appear, click on the Add Media button to launch the media uploader interface, and then select the Insert Media option from the list of actions in the left side of the media uploader window.

Step 3 – Add or Select Your Image

You can add or select the image you want to add to your page or post by choosing from either of the following options in the center of the media uploader window:

• Upload Files: Upload the image you want to use from your computer by dragging it into the upload area.
• Media Library: Select from any previously uploaded images in the media library by clicking on the one you wish to add to your page or post.

Once you have selected or uploaded the image you want to add, You will see a checkbox next to the thumbnail confirming your selection, and see information about it displayed in the Attachment Details pane on the right hand side of the media uploader interface.

Step 4 – Attachment Details

The Attachment Details pane displays a small un-cropped thumbnail of the image, as well as important information such as the filename, date uploaded, and image dimensions in pixels.

There are also action links that allow you to Edit Image, which takes you to the Edit Image page, or to Delete Permanently to remove the image from your site.

In addition, you can edit the following media information:

• Title: The title of this media.
• Caption: The caption for this image. The text you enter here will be displayed below the image.
• Alternate Text: Enter the Alt text for the image, e.g. “The Mona Lisa” to describe the media.
• Description: A description for this particular media.

For more information on these media settings, see the Edit Media page.

Step 5 – Attachment Display Settings

The Attachment Display Settings pane controls how the image is displayed when viewed on the site.

You have options to set how you would like the image aligned on the page (in relation to the text and margins) and what the link behavior of the image will be, In addition you can set what size image you would like to display on your page.

Image Alignment

The Alignment setting allows you to determine where you would like the image to appear in your content area and how it interacts with any text on the page. You have the following image alignment options to choose from:

• Left: Aligns the image on the left hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the right.
• Right: Aligns the image on the right hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the left.
• Center: Aligns the image to the center of the page, with no text displayed around it.
• None: Inserts the image in to the page with no alignment

Image Link

The Link To settings determine the URL/web address to which the image will be linked when clicked on by a visitor to your site. You can specify the following image link settings:

• Attachment Page: Links your inserted image to its WordPress media attachment page.
• Media File: Links your inserted image directly to the original, full-size version of the file.
• Custom URL: Allows you to set a custom link URL for your inserted image to link to when clicked.
• None: This setting will remove the link completely, rendering the image “un-clickable”.

Image Size

The Size settings determine the size of the image you are adding to your site. By default WordPress creates a range of four image size for you to choose from:

• Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. Note, by default the Thumbnail size is a square, so some cropping of your original image may occur.
• Medium: Displays a medium-sized version of your image on the page/post. This is a good size to use with Left/Right alignments, as it leaves sufficient space for legible text to either side.
• Large: Displays a large-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space.
• Full Size: Displays a full-sized version of your image on the page/post. Note: WordPress will determine the width of the content column of your theme, and display the largest possible image for that space. If your original image is larger than this column width, the full size of the image may not be displayed.

You can visit the Settings>Media section of your WordPress dashboard to customize the above image sizes.