• Website Home
  • About
  • Services
  • Portfolio
    • Recent
    • Archives
  • Shop
    • Catalog
    • Order

ASK Design Blog

Designer | Artist | Teacher

  •  
    • Blog Home
    • Web Design
    • Graphic Design
    • Art
      • Licensed Art
    • Links
    • Calendar
    • Contact

    Adding Images to WordPress Pages and Posts

    May 17, 2016 by ProfK Leave a Comment

    I have created a video tutorial to walk you through the process for adding images in WordPress:
    VIEW VIDEO!

    TUTORIAL SUMMARY

    AddNewAdding images in WordPress is very simple. You can add them directly to pages and posts (and there are a couple of ways to do this), or you can first upload them to the Media Library and then insert them into a page or post.

    Upload to Media Library

    1. Hover over the MEDIA navigation link in the left sidebar and you’ll see 2 options: Media Library and Add New. Select Add New.
    2. The multi-file uploader appears. Drag and drop your media files into the boxed area designated “Drop Files Here”.
      Upload-dragndrop
    3. Alternatively, click the SELECT FILES button to get to the single File Upload window that requires you to navigate to the image file on your desktop.
    4. Another alternative is to click on the browser uploader link. Then click on the Browse button to navigate to the image file on your desktop.
      File-Uploader
    5. Once the file is uploaded, there’s nothing left to do until you want to add it to a page or post. But, if you want to make changes, click the Edit link. In the Edit Media area, you can adjust the size and cropping, and/or fill in the fields for caption, alternative text, and description.

    Add to Pages and Posts

    The ADD MEDIA button that resides above the content editor area is the key to adding images.

    1. Go to the page or post where you want to add an image.
    2. Find the spot where you want to place the image and click there with your cursor. It will work best if you place the image at the beginning or the end of a paragraph, or between paragraphs.
    3. Click the ADD MEDIA button. This brings you to the INSERT MEDIA window overlay.
      AddMediaButton
    4. If you’ve already uploaded an image, it will be in the Media Library, where all images are stored. Find the image you want and select it.
      NOTE: Use one of the nifty filters or the SEARCH bar at the top of the INSERT MEDIA window to help you find images in the library.
    5. AttachmentDetailsWith the image selected, its details will appear in the right sidebar. Pause here for a moment and notice that this is where you can fill in the fields for caption, alternative text (for accessibility), and description. Look further down and you’ll see the ATTACHMENT DISPLAY SETTINGS. Adjust the settings for alignment, linking, and size as needed. I set the linking to None when I don’t want the user to go anywhere when he/she clicks on the image.
    6. Click on the button INSERT INTO POST. The image will now be in the page or post. Remember to click the SAVE DRAFT or UPDATE button when finished.

    Editing the Image

    If you want to change the size or alignment, select the image. A small toolbox will appear above the image. Click the “x” to delete the image. You can easily change the alignment right inside that toolbox. Or, you can click on the pencil icon to go to the IMAGE DETAILS window overlay, where you can make the same alignment changes as well as size and linking modifications. You can even edit the original image size and cropping. Advanced Options provide an opportunity to apply title attributes and CSS classes.

    Optimization

    Before adding images, make sure the images are optimized! For tips on image optimization, check out my blog post How to Prepare Images for the Web.

    More Related Posts

    How to Resize an Image in WordPress
    How to Resize an Image in Photoshop
    How to Create and Edit WordPress Galleries
    Best Alternatives to Photoshop
    Image File Formats: print vs. web

    Filed Under: WordPress Tagged With: image optimizing, uploading images to WordPress, WordPress media library

    Reader Interactions

    Leave a Reply Cancel reply

    Your email address will not be published. Required fields are marked *

    Primary Sidebar

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Looking for Something?

    My Art in a Book!

    kornegger loseyourmind front cover
    Several of my paintings are in this book (including the cover)
    BUY THE BOOK!
    My blog post about designing the book: Self-Publishing Adventures

    Testimonials

    I received the notecards on Friday and it was on my to do list today to email you my deep appreciation for them. They are amazing and I am so glad to have them to share. I am sure I will order more in the future. You are such a gifted artist and I thank you for sharing in a way others can use the art.

    — Shari Spokes

    Your new pastel "Lettuce Lake” is really beautiful. Very, very nice.

    — Tony from Belmont, MA

    My dear sweet sister. I can’t tell you how much I love your pictures. I so much wanted something and was so sorry that I couldn’t pick something out at your sale. On the other hand, I so much wanted something that you had chosen for me. Its been on my mind and suddenly, your beautiful pictures arrived. They are beyond beautiful and I cried when I saw them. Sending you love and my bestness.

    — Marti from Reno, NV

    Affiliate Partners

    We receive compensation when you purchase a service or product via the links on this blog.

    Web Hosting

    ThemeOfMonth

    Great Software Deals!

    MacUpdate Logo

    themeforest banner

    Photo, Video & Design Software

    Copyright

    © 2000-2020 Anne S. Katzeff. All rights reserved. Unless noted, all artwork and text are copyrighted by the artist. Images may not be reproduced, manipulated, or used in any way without Anne’s written permission.

    Categories

    Graphic Design

    • AIGA
    • Design Is History
    • Janice Moore
    • Mass. Contractors

    Web Design

    • 978 Grid System
    • A List Apart
    • A List Apart
    • Adobe Color Tools (formerly Kuler)
    • AWWWards
    • Smashing Magazine
    • underthesite
    • www schools

    Tech-Computer

    • Adobe TV
    • Orramac
    • Teknoziz

    Comments

    In an effort to reduce spam, comments are restricted. Please email Anne if you have a comment or question that you are unable to post. Thanks for understanding.


    Archives

    Typography

    • 1001fonts
    • Adobe Type
    • Adobe Web Type
    • Bitstream
    • Dafont.com
    • Emigre
    • Font converter (free)
    • Font Spring
    • Font Squirrel
    • Google Fonts
    • I Love Typography
    • identifont
    • Typeinspire
    • Typewolf
    • Typoretum

    Photography

    • Creative Commons

    Footer

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Subscribe to RSS Feed

  •  ASK Design Blog
  • Contact

    Website
    Email

    Connect and Share

  •  
  • Copyright © 2021 · Optimal Theme · Built on the WordPress Genesis Framework· Customization and design by ASK Design