Adding Media – Photos, Images

The following file-types are supported by WordPress.org: jpg, jpeg, png (including transparent backgrounds), gif (including transparent backgrounds and animated gif’s).

RESIZING IMAGES/PHOTOS

We ALWAYS recommend using a modest size photo for your website. This prevents slow-loading of your pages, posts and special features and makes it much easier to work within the “Media Library.”  If you need to add photos to a page, gallery or slideshow we recommend a photo resizer. Of course PhotoShop is ideal, but it’s also expensive. As an alternative we’ve found this website to be reliable and trouble-free. NOTE: Although we haven’t experienced problems with this tool, we DO recommend good computer anti-virus and anti-malware for detection purposes: www.picresize.com

1. Select Picture (“From Computer”). You also have the option of choosing an image from another website but we DON’T recommend this as it can sometimes lead to COPYRIGHT issues down the road*. Next click the “Browse” button to locate the photo on your computer.
2. Resize Your Picture: Select “Custom Size…” and if photo is wider than it is long, type 600 into the “Width” field (no height necessary). If the photo is longer than it is wide, type 600 into the “Height (Optional)” field (in this case no width necessary). Click anywhere in the white area of the page so it updates. The updated width and height will show in the “Estimated Final” area.
3. Make sure “None” is selected.
4. Save As: Make sure “JPG” is selected. Click “I’m Done, Resize My Photo.” Next, you have the option of Viewing the image, “Resuming” your edit (go back and change size) or Saving it to your computer or sharing it on Facebook, Twitter, etc. When saving to your computer, make note of where you typically save downloaded files!! By default it will be your computer “Downloads” folder.

We ALSO have the option of installing an automated image enhancement/resizing plugin. Some require additional fees but if you’re interested in this method, please get in touch with us!

You’re now ready to upload the photo to your website’s “Media Library.” 

ADDING NEW Images/Photos to a Text Area

This does not apply to a Gallery, Album or Portfolio page—we’ll touch on that at the end of this page.

IF YOU’RE SATISFIED WITH THE SIZE OF YOUR IMAGE, ADD IT TO YOUR PAGE/POST:

1. Place your mouse in the spot where you want to add the image. If you want it to “float” to the right or left of a paragraph put the mouse before the first letter of the first word in that paragraph.
2. Click the “ADD MEDIA” button (directly above the text editor).
   1. You should see:
      1. “Upload Files” with a grouping of images below or…
      2. A white screen with “Drop files anywhere to upload” and a “Select Files” button or…
      3. The “Select Files” button only
   2. In the Media Library these 3 options make it possible to:
      1. Drag ‘n drop (easiest). With the folder containing your images open on your computer drag the image directly into the area that says “Drop files anywhere to upload”.
      2. OR… Click the “Select Files” button inside the rectangle. This will allow you to select and upload one file at a time.
      3. OR… Click the “browser uploader” to select multiple files from your computer and upload and insert them. (You also have the option of uploading multiple images but selecting only one for now and saving the others for later).
   3. When the image has been uploaded it will create a list of options you’ll need to select. Again, this technique ONLY applies to images you’re adding to a TEXT AREA.
      1. Title–This is helpful for search engine optimization and an all-around good practice, so it’s a good idea to give the photo an appropriate title (“Jane Doe Portrait”)
      2. Alternate Text—Again, this is helpful for search engine optimization and also helpful for people who might block images from being displayed. This doesn’t happen often but adding “alt tags” is definitely a good habit to get into.
      3. Caption–Add text ONLY if you wish to display a caption under the photo.
      4. Description–This really applies more to a Gallery image. (More on that at the end of this page).
      5. Link URL–If you are adding an image to a text area, this field will display the “path” to the image file. This is sometimes used for image links. For now, THIS SHOULD BE SET TO “None.”
      6. Alignment–This one is important. Select the appropriate side of the text you want the image to appear–right, left, center. If you select “None” it will display the image on a line of it’s own if large enough or the same line as the text if smaller… typically not what you want.
      7. Size–This is also important since a large image may need to be reduced to fit the area properly. To reduce the size within this tool, select the appropriate size for the image/photo. You will also have the option to drag corners to shrink or enlarge in step #9.
      8. Insert into Post — In some cases you’re inserting into a “page” but since WordPress was originally developed as a Blog tool, for image purposes it’s labeled “post”. Either way, click it if you want to add your image/photo.
      9. !! IMPORTANT !! If you’re not happy with the image size within the text editor, you can resize it by dragging the lower right or left corner up/down and out (or in). If you’re happy with the placement and size of the image, the FINAL and (also most important) step is to click the blue “Update” button on the page itself. If you want to edit what you did, single click on the image, then again on the pencil icon that appears.

Again, if you’ve made changes to something/ANYTHING in the text area click the blue “Update” button. Feel free to click “Preview Changes” to see what they’ll look like. (Close that window when you’re done previewing–the administrative area will still be there when you do).

REPLACING Images/Photos in a Text Area

To replace an existing image in the text area, simply single click to select the image you’d like to replace. Click the “ADD MEDIA” button and follow steps #1 & #2 (all) above.

SPECIAL NOTE ABOUT GALLERIES, PORTFOLIOS & SLIDESHOWS

There are SEVERAL different Gallery, Portfolio and Slideshow plug-ins available. Each offers a different set of options that may have been most appropriate for your site during development. We will include instructions for the most commonly used plug-ins in the near future but in the meantime please (click) get in touch with us about the Gallery, Portfolio and/or Slideshow used on your specific website!

*We recommend either Adobe Stock images or iStock for quality stock imagery. Copyright legal issues can come up months or even years after the fact.