Add a Photo, Picture or Image to a Page, Post or Event

You are here:
Estimated reading time: 3 min

Pages, Posts and Events all use the same editor to add content. This means that you can upload and insert a picture to any of these items in the same way.

Before I describe how it’s done, there are a couple of things that are useful to know about digital images. Images (photos/pictures/graphics) come in different file types. Most commonly .jpg, second most popular is .png – these two are perfect for using in websites – smallish files for quick upload/download. Other file types may cause trouble as they may be less compatible across viewers devices.
Image sizes (resolution) don’t need to be huge for the web. Software on our website automatically resizes your pictures one-by-one when you upload to make them quicker to use. If you have a lot of photos to upload over a slow connection, you can feel free to reduce the file size in an image editor on your computer before upload if you want to.

Adding a photo

To add a photo to your post, place the cursor where you want to have the picture appear in your page/post/event edit screen (amongst the text). Then click the ‘Add Media’ button (it’s above the editor)

Add Media Button

 

 

After clicking the button you’ll be taken to the Insert Media screen. Two tabs give you the choice to either visit the media library (where previously uploaded images and files live) or to Upload Files – most of the time you’ll be uploading new files using this tab.
Click the ‘Select Files’ button towards the middle of the screen and select the images that you want to upload from your computer/device.

Add Media Button

 

The successfully uploaded image will appear in the media library as in the screenshot below.
To make a thorough job of adding the image neatly, take a look at the attachment details pane to the right.  The title is automatically created from the filename. It doesn’t show on the screen with the image so you don’t need to worry about that. You have probably described your image in the text that will accompany it in the editor, so you don’t need to worry about completing the caption or description either. The Alt Text is important for accessibility. Visually impaired users may be using a ‘screen reader’ to read out webpages to them. When the screen reader reaches an image, it reads out what you type in Alt text, it should be a brief description of the image. It’s a requirement of accessibility regulations that you provide alt text for images.
Uploaded Image Screenshot
Scroll down the attachment details pane until you reach attachment display settings. Here’s where you can choose whether the picture is full width, or to the left of right of your text. You can also choose what happens when users click on the image.

Alignment

None – sits to the left with other items above or below
Centre – full width across the page or post
Left – up to half the screen width on the left
Right – up to half the screen width on the right
*TIP to keep things simple and suitable for every screen size, stack items rather than trying to make more complex side-by-side image text layouts that may not be so flexible.

Link to

(What happens when they click the image)
None – Nothing happens
Media File – a full size image opens up
Attachment Page – don’t use this
Custom URL – the image becomes a link to take them to any web address you specify

Once you have these settings as you want them, you can click Insert into post and the image will be placed in your editor.
If you need to adjust anything about your image, you can do that by clicking on it in the editor.

Making Life Simple

Your browser will remember the last attachment display settings that you used, so you rarely have to fiddle with these. If you are uploading to the site via the WordPress App, that will give you a default set of settings too, so there’s also no need to worry about these.

The default settings are:
Alignment: None
Link to: Media File
Size: Full Size

Was this article helpful?
Dislike 0
Views: 26