How do I upload and insert images?
1. Introduction and Preparation
The two main methods for uploading images to your web site are:
Uploading as an attachment to a post*
This is typically the most used method. By “attaching” images to your post you create a tie between the post and images allowing them to be shown in the post’s attachment controls where you can access them quickly for inserting into content or to publicly display them as a thumbnail gallery or a slide show.
Uploading directly to the Media Library
This method is suitable for images you want to link directly to or store for later use in any post’s content.
*For the sake of this article a post may refer to a page, blog post or any other custom content type.
Image Editing Tool
To edit your images before uploading them to your site, you will need an image editing tool such as Preview or iPhoto for Apple, Paint for Windows, a professional level editing tool such as PhotoShop or an online image editor such as picnik.
Preparing Your Images
Ensure your image type is appropriate for upload. Your image must be in the file format .png, .jpg, .jpeg or .gif.
If your images are for your web site content you will generally want your image size to be no more than 1000 pixels wide and / or 1000 pixels high. Working with images outside of these dimensions is usually a waste of resources. It will make editing a longer process due to the additional time it takes your computer to process these larger images. It will also needlessly take up additional web site storage space.
With the above in mind, your first step should be to re-size your images so that the width and height are no more than 1000 pixels. If you want to display your images at a precise image size, you should size/crop your images accordingly before uploading them.
There may be exceptions to this when you need a larger image to use for your site background or when you need to share high definition versions of your images with others. In the latter case, we generally recommend you use Dropbox instead of your site’s upload functions.
2. Uploading as an Attachment
1. Click within your content in the location where you wish to insert your image/s.
2. Click the image Upload/Insert button to launch the attachment controls.
3. At this stage you may choose to insert an image from another web site using the From URL tab or an existing image in your media library using the Media Library tab.
For this article we will instead proceed with uploading images using the From Computer tab and clicking the Select Files button.
4. Use the file browser to locate and select your image files on your local computer hard drive. Note that you can select multiple image files at this stage. Once you have selected your image files, click the Open / OK button.
5. Once the file upload has completed, review your image settings as follows:
- Use the Show/Hide link to display each image’s settings.
- Edit the image size and rotation using the in-built image edit tools.
- Enter a relevant title for your image (required).
- Enter alternate text for your image. This is the text that will be shown in place of your image if the image cannot be displayed for any reason. We strongly recommend that you enter relevant text here that is also a strong search term, as such image alt text can often have a positive impact on SEO.
- Caption text is optional and will be displayed with your image.
- Description text is not typically used with your image display. You should enter a description if your custom content uses the description (for a portfolio for example) or if you are linking your images to the attachment page (see item G below).
NOTE: If you are editing multiple images or creating a gallery of images to display as thumbnails or a slide show, you can skip items G, H, I and J at this stage.
- Enter a URL of a location to be loaded if your visitor clicks your image:
- Type a URL to any web page.
- Click the None button to have no link.
- Click the File URL button to link to the full size version of the image. Note that this will enable the light box viewer, that will show your full size image in an animated pop-up overlay.
- Click the Post URL button to link to the attachment page. This page will show your image on a new page by itself with Title, Caption and Description text.
- Choose the alignment for your image. Inserting multiple images with alignment settings may cause your content to become messy in some cases. In this case you should type the shortcode [clear] after / before any images that appear to be causing issues with content layout.
- Choose the image size. Keep in mind that over-sized images will not be allowed to break your content and may be automatically sized down accordingly.
- Click the Insert into Post button if you are ready to insert the image into your content. Note that you can also delete the image with these controls.
- If you did not insert an image in step J, you can continue editing your uploaded images as needed. Finally click the Save all changes button when you have finished.
6. By repeating steps 2 and 3 above, and selecting the Gallery tab (this tab only appears after you have uploaded images as described above), you can access your attached images for further editing or inserting into content at any stage.
Setting Image Order
When viewing the Gallery you will note that there is an additional input field next to the Show/Hide links. These fields are used to order your images.
Setting the image order is important when using your images for a thumbnail gallery or slideshow. Click the Save all changes button after setting the order of your images.
Inserting a Gallery
From the Gallery tab (see section 2, item 6 above) you can use the Gallery Settings below your image list to insert a gallery of thumbnails into your post content.
Note that you can select what your thumbnails link to:
- Image File: links to the full size version of the image. Note that this will enable the light box viewer, that will show your full size image in an animated pop-up overlay with prev/next image browsing controls.
- Attachment Page: This page will show your image on a new page by itself with Title, Caption and Description text and prev/next image browsing controls.
For more information on Gallery shortcode options, refer to section [gallery] of the Shortcode support article.
3. Uploading to the Media Library
1. Navigate to your Media admin area.
2. Click the Add New button at the top of your Media Library page.
3. Clicking the Select Files button. Use the file browser to locate and select your image files on your local computer hard drive. Note that you can select multiple image files at this stage. Once you have selected your image files, click the Open / OK button.
4. Once the file upload has completed, review your image settings (see section 3, item 5 above) and save your changes.
5. You can click the title of any image in your media library to further edit settings at any stage.
When you click the title of a file in your Media Library, you will be provided with a URL for the location of that file. This direct URL can be used to share access to the file or to link to the file from a 3rd party application.
Additionally a secure link is provided for the file, that can be used for 3rd party applications that require such security, e.g. adding an image to your PayPal payment page.
Last Modified: 20th November, 2012
Other ‘Web Site’ Articles...
- An introduction to your Web Site
- Dashboard Menu
- Pages Menu
- Posts Menu
- Comments Menu
- Media Menu
- Appearance Menu
- Users Menu
- Tools Menu
- Settings Menu
- How do I assign a menu to a theme location?
- How do I add a slide show to my web site?
- How do I insert a video into my web site content?
- How do I add a newsletter subscription form to my Web Site?
- Can I install themes and plugins on an Aarfie Web Site?