• 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


Associated Construction Engineering

The Energy Fix

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
Michelle Levitus 5 months ago
Gecko Designs was a pleasure to work with while building out a brand new website. They understood what we were after and had creative and useful ideas to help us reach our goals for the website and for our organization. Communication was friendly and reliable throughout the process and they were available to troubleshoot any issues that arose before we went live, and after. Highly recommend!
5
Eric Halverson 3 months ago
Gabriel at Gecko Designs has proven over and over again that he and his team offer an incredible product to their clients (me!). I've been thrilled by his communication, the products they offer, and their responsiveness to my requests. Anyone looking for a website, logo, etc.. would be making a no-brainer decision to do business with Gecko Designs.
5
Martin Judnich 7 months ago
From intro meeting to final website, this was a great experience. Gecko created exactly what I was looking for, and was very timely and affordable. Great collaboration, lots of changes, and they made me feel comfortable every step of the way. I could not recommend more.
5
Lincoln Mansch 10 months ago
Our non-profit organization can't find enough adjectives to describe the top-notch, professional, and amazing work Gabe and his team provides. They have been amazing supporters of our organization from answering simple quick questions, to volunteering at our events, to helping us with graphic designs and website updates for our biggest event, to helping us with the mother of all projects....redesigning our very outdated website. We are always amazed at how quickly and efficiently they work despite us coming back with little nit-picky changes and requests. We often wonder if we're their only client because they are so quick to respond....but that is exactly how they want you to feel - as if you are their only/most important client. They are always willing to do whatever it takes to get the job done right by taking very careful consideration of their clients' needs, wants, and desires, and end up producing work that is nothing short of brilliant.
5
Jaycie Loney a year ago
Gabe and his team did a great job helping us with our fundraiser. They were the most affordable, easiest to work with place in town! We couldn't have been more pleased with these guys!! Highly Recommended!