• This field is for validation purposes and should be left unchanged.

Gecko Designs
523 N Higgins Ave
Missoula, MT 59802

(406) 662-1123

How to Insert and Edit Images in WordPress

Written by tim on October 3, 2013

In this tutorial we will be going through the steps involved for easily placing images into your your pages or posts of your WordPress site.  The following is a step-by-step guide for using the Media Uploader:

1. Create a new post or page / navigate to the page or post you want to add an image to.

2. Click into the page or post’s text field to place your cursor where you would like the image to insert the image at.


3. Click the “Add Media” button located at the top left of the text editor.

3.1 Once you click this button it will launch the Media Uploader interface where you will select the Insert Media Option.  Choose this option from the list of available actions on the left side of the Media Uploader window.

3.2 Next you will either upload new images or select them if you have previously uploaded them from your Media Library

3.3 To upload new images or files into WordPress select the Upload Files tab under the Insert Media Title.  You can either drag and drop your files onto the media up-loader window or click the select files button.  *Please note your images size as there is a 4MB file size limit and the larger the file the longer it will take for your webpage to load.

To drag and drop you images or files in, simply click and hold left click and move the selected item(s) into the uploader window and release left click.  Otherwise you can use the select files button and simply browse to your files, select them and click Open.

3.4  Your uploaded files will now be displayed under the Media Library Tab.  From here you can select any previously uploaded images by clicking on the one you want to add to your post or page.  To select an image or multiple image click on the thumbnail of your image or file and this will apply the blue outline and check box in the top right corner to indicate it is selected for insertion.  You will also see associated information for the selected item in the Attachment Details section on the right side of the Media Uploader.

4. Configuring your Attachment Details: Now we are going to set the attachment details for your uploaded image.  The Attachement details section displays an un-cropped thumbnail image of your selected file, as well as important information relating to your image.  This information includes the file name, date uploaded, image dimensions in pixels and options to edit or delete permanently.  Below this are additional fields you can edit for your image including:

  • Title: The title for the selected media
  • Caption: The caption for this selected media, the text that you enter here will be displayed below the image.
  • Alternative Text Field: The Alt text for the selected image, this field is similar to the caption field but is used primarily for greater accessibility for visually impaired users and also improves search engine rankings for your content.
  • Description: The description for your selected uploaded media.

For Additional information on this media settings section please review our Edit Media (Advanced) Tutorial.  (not yet completed)

5. Configuring your Attachment Display Settings: This section allows you to set how the image is displayed when viewed on your page/post.  These options include setting how you would like your image aligned on the page, what the link behavior of the image will be, and the size the image will be displayed at.

5.1 Alignment settings

  • Left Align: This aligns your image to the left margin of your page/post.  This will also page wrap or flow any text around the the image to any available space to the right of the image.
  • Center Align: This aligns your image to the center of the page / post with no text displayed around it.
  • Right Align: This aligns your image to the right margin of your page/post.  This will also page wrap or flow any text around the the image to any available space to the left of the image.
  • None: This setting will insert your image into the page with no alignment settings.

5.2 Link behavior setting: this field controls what URL / Web address the image will be linking to when clicked on by a visitor to your page/post.  Below are descriptions of each of your available link settings:

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

5.3 Size settings: These settings will determine the size that your image displays as when inserted onto your page/post.  WordPress by defalut creates a range of up to four image sizes for you to choose from:

  • Thumbnail: This selection will display a small thumbnail sized version of your image onto you page/post.  By default the thumbnail size is a square shape so some cropping to the display of your image may occur.
  • Medium: This selection will display a medium sized version of your image onto your page/post.  This is a common selection for use with the Left/Right alignment settings as it usually leaves ample space on either side of your image for text to be placed.
  • Large: This selection will display a larger sized version of your image onto your page/post.  WordPress will automatically determine the content area width of your theme and will display the largest possible sized image for the available space.
  • Full Size: This selection will place your image as its full size onto you page/post.  WordPress will automatically determine the content area width of your theme and will display the largest possible sized image for the available space, however if the image is too large for the space being placed into may not display as its full size.

6. Inserting the Image: Once you have finished setting your images details and alignment settings you will click on the blue Insert into post or Insert into page button to add your image to you post/page.  This will close the Media Uploader window and will return you to your page/post being edited.  Your image will now also display where you had placed your cursor from step 2.

At any time you may alter your images settings at any time while in the page/post editor by hovering your cursor over the image and clicking on the Edit Image button in the upper left hand corner that appears when hovered over in the editor.  Next to this is a red cancel sign that when clicked will remove the image from your page/post.  Simply selecting the image and hitting the delete key or back spacing over the image will also remove the image from your post or page.  The image will however still remain in you media library inside your media uploader if you wish to replace the image into your page/post again later.





To use the select


Posted in WordPress

Featured Clients

MT Solar

Volunteer Software

Take the first step

Questions? Give us a ring, shoot us an email or send a homing pigeon our way. Let’s get the ball rolling! We can’t wait to hear from you!

Gecko Designs, LLC
523 N Higgins Ave
Missoula, MT 59802

(406) 662-1123

523 N Higgins Ave, Missoula
Courtney Firak 2 months ago
Working with the team at Gecko Designs has been fantastic! I worked closely with Ali to create a new meetings website and she was so patient with all the changes to copy and took the time to walk me through the back-end of Word Press. I am confidently making changes on own but know that any request will be done quickly. The team was even very responsive over a weekend to meet a deadline. Highly, highly recommend!
PHC Missoula 3 months ago
Gecko's team does great work. We had a fairly complex request with a variety of stakeholder interests at play. Their team listened carefully and responded thoughtfully to our needs throughout the process! We were very pleased with the process and thrilled with the final product they provided.
Ronald Richker in the last week
The website that was built for us does not work on all browsers. Specifically, the product configurator, the most important part of the website, produces an error on older browsers. Very disappointed and frustrated.
Libby Addington 8 months ago
Gecko brings an immense amount of talent and expertise to any project, adding value and saving us time at every step of the process. We've been blown away by their balance of creative capability (across strategy, ideation, design and execution) with impeccable execution, on time and on budget every time. Can't recommend them highly enough.
Mark Thome 5 months ago
Gecko Designs had us at the lead phrase on their home page: "If you're tired of flakey freelancers and want to work with a team of professional, reliable experts, you've come to the right place!" We were at that point developing our site that we needed to step up to a professional team with a demonstrated portfolio of blue-chip sites, and the expertise to help bring our crazy ideas to fruition. We're looking forward to The Missoula Underground being a vital part of the Northwestern Montana scene, and the first step was picking up the phone and having a conversation with Gabe. Don't hesitate to hire their team, they are ACES at web design and development. Thanks, Gecko!
We’ve been working so hard making our clients look good, we neglected our own brand for quite a few years (25 to be exact...)! New look comin’ at ya Fall 2020! Has it been awhile since you’ve re-branded? We get it! Call us and we can help! (406) 662-1123