WordPress Basics: Images

A Quick Word about Copyrights

Unless the picture is one that you took with your own camera make sure that you have the right to use images on your website. This should be very clearly spelled out from where you are getting the image from. There are websites that let you download and use their images for free but make sure to read their usage rights. Freepik.com is a website that has a wide selection of images that you can use on your website but they ask that you add a credit line to your website. That way you are sharing where you found the image and who created the image with others.


Designed by Freepik

 

Other websites like Getty Images let you embed their images into your website. This is a nice feature because it lets you get higher quality images with out having to pay for them. Note: This will only work for images that you put on a Post or Page. You will not be able to use the embed in feature images.

Embed from Getty Images

 

There are some hosting websites that provide you with a selection of Stock Images built right in to the Media Library window. WordPress.com partners with Pexels┬áto provide some stock images for you to use anywhere on your website. You can access these images by going to the + Add Content button on your toolbar and clicking the “Free Photo Library” choice. Here you can do a search for an image to add.

 

Ok, I Have an Image Now What?

You have selected an image to use, for the purposes of this site I am going to assume the image is your own image.

Here is my image

Add your image to the page

You can add your image to your page by going to the + Add button on the toolbar and clicking Media.

This will give you a new window where you can either drag and drop or click the button to upload your image. After your image has uploaded then click the insert button at the bottom of the window.

How to change your image in the editor

Your image will have uploaded to the biggest size on the page. This means if you had a large image it will fill the whole page width. WordPress lets you make edits within the WYSIWYG editor so you do not have to make the edits to the image on your desktop and reupload it. When you hover over the image you will see a new menu pop up at the top of the image.

Image alignment and Image size

If you want to put your image on the left, center, or right side of the page and let the text wrap around it you can use these alignment buttons along with the size buttons ( – + ) to move your image around.

If the image is too small or too big using the size buttons ( – + ) then you can scale the image up or down by clicking and dragging the image corners.

Adding an image caption

You can use the talk bubble icon to add a caption to you image. This will add text under your image that you can edit using the WYSIWYG editor. If you want to Italicize, Bold, or Color your caption you can.

Editing the Image

If you click the little pencil icon to edit your image you will get a new screen with some additional choices.

On the edit window you can change the title of the image, caption, Alt Text, and the Description. If you are using a gallery to show multiple images sometimes the title will appear. Making this something easier to read than your file name is a good best practice. Alt Text is also a good best practice.

What is Alt Text and all these other edit fields?

Alt text is an alternative text for your image. This is used when your images do not load or if your user is using a screen reader. So make sure to enter in a more descriptive text for your image. For example, I would put the following in for these four fields:

Title: My Smiling Faces
Alt Text: Group of Smiley Faces
Caption: Hello and Welcome to My Page!
Description: Let me show you how to add an image to your page.

Don’t like that picture and want to start over?

Easy. Just click the trash icon or push your delete key when the image is selected. This will remove the image from your page but not your image library. You can always go back in and insert it again at a later time or on a different page. The image library is accessible on any page or post on you WordPress site.

Adding a Gallery

If you have multiple images you want to add to your page and have them show up in a gallery you can do this by adding all your photos to the media library by clicking the + Add button in the toolbar and dragging and dropping your images into the window. Once all your images have uploaded you can select the ones you want to add your your gallery on the page and click Continue.

The next window will give you options to set up your gallery. You can select from multiple layout choices. If you want your images in a different order then you can switch over to the edit tab and drag them into the order you would like. You can also select what happens when the image is clicked. If you select Attachment Page or Media File these options will open your image in a new window. If you select None then a Lightbox will pop up showing your images in a slideshow format on the same page. I would suggest you always select None, in most cases this is the option you will prefer. After you are happy with your gallery view click Insert to add the gallery to your page.

Once you have added the gallery to your page you have the option to go back and edit it by clicking the little pencil icon that pulls up when you click on the gallery. If you want to add or remove images you can do this under this edit window.

2018-02-22T11:28:17+00:00February 20th, 2018|Images, Wordpress, Wordpress Basics|0 Comments

Leave A Comment

Quick Links

WordPress.com

GoDaddy.com