Inserting Photos

Using images will probably be the most frustrating thing you’ll do in WordPress. Getting them where you want them, in the right size, and putting text where you want it in relation to the  image can be very time consuming. You will save a lot of time if you re-size and edit your image using photo editing software like Photoshop before you upload you images to WordPress especially for the Slider images.

It just takes trial and error, and a LOT of patience!

When you upload a photo, WordPress “crunches” your image and produces 3 versions of your photo – a 150 x 150 thumbnail, a medium and large/full-size version. If your photo is a different size WordPress will “crop” it for you. For most standard format images you insert into a page or post it probably won’t make a difference. But the Slider will crop an image to a height of about 320 pixels high, and it will usually take the section out of the middle of your photo. So if you have an image that’s a standard format, the image that displays in the Slider may not look the way you want. You may have the same issue with featured images and thumbnails.

The original size of this photo was 420 x 275 pixels, a fairly standard format. The following images give you an idea of how WordPress “crunches” your photos. You can see that the Large/Full Size and the Medium look very similar, but the Thumbnail gets cropped, and the Slider image gets cropped in a strange place.

Original/Full Size                                                                                                                  Medium

JTNPcoyote          JTNPcoyote

      Thumbnail                                                                                Slider

JTNPcoyote      JTNPcoyote-slider-crop

For the Slider, I would edit the image in Photoshop to look more like this:

JTNPcoyote-slider-crop-better

Photo courtesy of Ginny Solomon.

For your Slider, take some time to choose a photo that will work well in the horizontally elongated format – photos that will still look good and highlight what you desire after it’s cropped. See HERE for more information on how to create a Slider.

 

OPTIMUM PHOTO SIZES

  Thumbnails:           150 x 150 pixels

    Medium:                  300 x 400 pixels

        Large:                       1024 x 1024 pixels

     Slider images:        1170 x 320 pixels

 

The Media Library

Before you can insert a photo in your page or post, you must upload the image into your Media Library.

Dashboard | Media| Library will take you the Media Library.

media-library-add--new

At the top of the screen, click on the <Add New> button.

 

 

media-library-add-admin-bar

You can also click on +New in the Admin Bar and choose Media.

 

 

 

upload-new-media

In the Upload New Media window you can either drag your photos into the window from a folder on your desktop, or click on the <Select Files> button to navigate to the image on your computer, then press the <Open> button to upload your image.

When you can see a small thumbnail of the image at the bottom of the window the image has finished uploading and is now in your Media Library.

 

Navigate back to the Media Library by going to Dashboard | Media | Library and you’ll see a list of your photos with the latest one you uploaded appearing first.

 

 

To insert a photo:

The process for inserting a photo is the same for either a page or post.

In the body of text, place your curser where you’d like to insert the photo.

Click on the <Add Media> button above the text formatting bar.  add-media-button

selected-photo

Click on a photo to select it.

In the Attachment Details window, choose your Alignment, Link and Size in the Attachment Display Settings Area.

Click on the <Insert into Page> button.  insert-into-page-button

 

 

 

The Attachment Display Settings

insert-photo-settings

 

Alignment

Alignment Left will make your image left-justified and allow you add text to the side of the image:

photo-aligned-left-2

 

 

 

 

Alignment Right will put the image on the right, and you can also add text beside the image:

photo-aligned-right

 

 

 

 

Alignment Center will put your image in the center, but you can only put text above or below the image. The following example also has the text centered.

photo-aligned-center

 

 

 

 

 

If you choose Alignment None you can put the image wherever you want within your text but again, you won’t be able to add text beside the image.

photo-aligned-none

 

 

 

 

 

Linking your photo:

photo-link

When you  hover your mouse over the image in your page or post the curser will turn into the hand which indicates that the image is a link.

Linking to the Media File will take you to the page that WordPress created with a full size version of the image that you uploaded into your Media Library.

Linking to the Attachment Page will take you to a page that WordPress created with the same size image that you posted.

You can link to a Custom URL by entering in the URL address in the text box.

 

Changing the size of your image:

 

photo-sizeYou have 3-4 options here depending on the size of your uploaded image.

Thumbnails are always 150×150 pixels, and WordPress will “intuitively” crop the image for you.  Sometimes the image may be cropped where you don’t want it cropped, so the best bet is to use photo editing software like Photoshop to edit the image and then upload it to your Media Library to use.

Medium will usually be about 300×200 pixels but it will be dependent on the format and size of the original image.

Large and Full Size are sometimes combined depending on the size of the image you uploaded. In the examples of Alignment above, the photo I uploaded was very large (3502×2408 pixels) so WordPress split it out and gives a separate Large and Full Size version.

 

To create a Featured Image:

featured-images-sectionWhen you’re editing a page, find the Featured Image section in the lower right corner.

Click on the link to Set Featured Image. This will open up your Media Library where you can select the photo you want to be displayed in a Content Area on your Homepage.
selected-photo

set-featured-image

In the Media Library, click on the photo to select it.

Click on the <Set Featured Image> button to save it. set-featured-image-button and the  photo will appear as the Featured Image.

 

Don’t forget to <Update> the changes you made to the page. update-button

 

 

If you wish to remove the Featured Image, simply click on the Remove featured image link and Update the change. update-button

 

 

When you select this page to use in your Homepage Content Area, the Featured Image you’ve selected will be displayed with a link to this page. The featured image will not appear when you view the page, it will appear only in the Content Area of your Homepage. Keep in mind that the format of the photo in the Content Area may not match your original format and WordPress may have cropped it. You  may want to edit the image using photo editing software like Photoshop and then uploading the new edited image to your Media Library.