In this tutorial we’ll be going over how to place images and adjust their display settings in the WordPress default text editor, or the Divi Text module. This is a step-by-step comprehensive guide for WordPress beginners. Please let us know if you have any questions or comments. Enjoy!
1. Place your cursor where you want to place the image.
Place your cursor where you want your image to appear. If you want your image to be placed within a body of text then place your cursor to the left of a line of text in the location you want your image. Place the image on a blank line if you want the image to appear by itself.
2. Click on the Add Media button.
Aftering placing your cursor on the line where you want your image to appear, click on the Add Media button.
3. Upload an image or navigate to your Media Library.
After clicking on the Add Media button a media upload window will appear. You can upload an image from your computer by dragging the image from your computer into the media upload window. Or, by clicking on the ‘Select Images’ button and navigating to the image file on your computer.
If you already have the image uploaded to your Media Library, click on the Media Library tab at the top of the panel.
4. Confirm your selection in the Media Library.
After uploading an image the Media Library window will open and you will see a checkbox on your uploaded image thumbnail confirming your selection. To change your selection, or make a new selection, click on an image in the Media Library.
4. Attachment Details panel.
On the right side of the Media Library window is the Attachment Details panel. When you have an image selected this panel displays a small thumbnail of the image, as well as image details such as the filename, and image dimensions. Here you can choose to edit or delete the image, or edit the images information.
Title: Title of the media. Visible in a pop-up when you mouse over the image on the page.
Caption: The caption is descriptive text that is displayed below the image on the page.
Alternate Text: Text entered here is used to describe the media when the media is not visible. For example; when a visually impaired person is accessing your blog with a screen reader, or when an image won’t load, the alt text is used as a descriptor.
Description: A description for this particular media.
5. Choose your Attachment Display Settings.
The Attachment Display Settings are at the bottom of the Attachment Details Panel. These settings control how the image will display on the page after it’s been inserted.
ALIGNMENT:
Left: Aligns the image on the left hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the right.
Right: Aligns the image on the right hand margin, and any text that is on the page wraps (or flows) around the image to the available space on the left.
Center: Aligns the image to the center of the page, with no text displayed around it.
None: Inserts the image in to the page without alignment.
LINK TO:
These settings allow you to make your image ‘clickable’, like a button, and will bring the user to a new location of your choosing. For example; you could have an image of a fox that opens your website’s page on foxes when clicked.
Attachment Page: When the image is clicked the WordPress media attachment page will open.
Media File: Links your inserted image directly to the original, full-size version of the file.
Custom URL: Allows you to set a custom link URL, to another page on your website, or an external website.
None: This setting will make your image “un-clickable”.
SIZE:
The Size setting determines the size of the image as it appears on the page. There are four default WordPress image sizes for you to choose from:
Thumbnail: Displays a small thumbnail-sized version of your image on the page/post. The default Thumbnail size is a square. If your image isn’t already a square your image will be cropped to fit.
Medium: Displays a medium-sized version of your image on the page/post. This is a good size to use with Left/Right alignments, as it leaves sufficient space for legible text to either side.
Large: Display the largest possible image for the content column of your theme.
Full Size: Displays a full-sized version of your image on the page/post. However, If your original image is larger than the pages column width, the full size of the image may not be displayed.
*You can change the default sizes by navigating to Settings > Media in the WordPress dashboard.
6. Insert the Image.
Once you have selected your Attachment Display Settings, click on the blue ‘Insert Into Post’ (or Page) button located below the panel, to add the image to your page or post. You will return to the text editor window and your image will be visible where your cursor was located.
7. Edit or remove the image after placement.
To edit an image after it has been inserted; click on the image and a small panel will pop-up just above the image. Located on this panel are the four image alignment options, a pencil icon which allows you to make edits to the image size, caption etc. and an ‘X’ icon that will remove the image.
