• 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


Greef Law

The Energy Fix (Logo)

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
Nicole Ichtertz 2 months ago
Everyone I worked with at Gecko Designs answered all my emails and questions promptly, and helped me rebuild and re-design my website with enthusiasm and efficiency. I highly recommend them, they are an awesome team to work with!
5
Hannah McDaniel a month ago
Gecko exceeded our expectations in every way with their efficiency, creativity and professionalism...our non-profit hasn't had a fully functional site that we are proud of in years, and not only did Gabe, Grace & the staff at Gecko completely turn this around, they helped us learn along the way. Thank you!
5
Allen Ratta 8 months ago
These guys are amazing! Gabe knew exactly where to go in the code and want to fix and had all our issues repaired in minutes! As a previous owner of a software company I would give them the highest rating possible!
5
Sprinkler Maniac 8 months ago
Had some updating issues with our website and Gabe provided an expedited response to our situation so we could keep the site up and running smoothly. Additionally, he tweaked a few things he noticed weren't correct so the site would have better SEO. Thanks so much!
5
Rebecca Shoemaker 9 months ago
Gecko is the whole package! Gabe is responsive, reliable, skilled, and affordable. thanks for all your help, i wish i'd found you sooner :)