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

Gecko Designs
523 N Higgins Ave
Missoula, MT 59802

Phone:
(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


Oxbow Cattle Company Promotional Sticker

Yellowstone Angler

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


Phone:
(406) 662-1123

5
523 N Higgins Ave, Missoula
5
5
Avigail Bass a month ago
We redesigned a very very old website with Gecko and began the process during coronavirus. Despite those challenges, the team at Gecko was very helpful and flexible. They built us a beautiful website, taking into account all our needs. The project manager Grace, was a pleasure to work with, always available to answer questions, great with communication, and very organized. They went above and beyond to make sure the end product was perfect, even if it meant putting in extra hours, or extending the project longer than anticipated. We really appreciated all they did for us and could not be happier with the results!
5
Avi Kolko in the last week
Gecko built us a new Unity Hospice website from the ground up, as well as designing new brochures and other collateral material. Working with them has been a pleasure - they are professional, organized, responsive, aim to please, and are easy to work with. Their design work is beautiful, and they really took pains to understand the look we were going for. Highly recommended!
5
Craig McKay 2 months ago
Gecko Design staff was super easy to work with. They were able to help us create an incredible web site that is getting noticed. I would highly recommend Gecko to anyone looking for web design.
5
Courtney Firak 5 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!
5
PHC Missoula 6 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.
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 Spring 2021! Has it been awhile since you’ve re-branded? We get it! Call us and we can help! (406) 662-1123