When you upload an image, you’ll see a number of options to the right-hand side of the media uploader. We’ll walk through what each of these options controls.
At the top, next to the thumbnail, you’ll see some information about your image:
The image title is displayed, as well as the date the image was uploaded, the file size, and the image dimensions.
There is also an Edit Image link that will take you to a screen where you can edit the image itself (see Image Editing), and a Delete Permanently link in case you would like to delete the image.
Below this, you’ll see the image URL, which is the full direct link to where the image is stored on your site. This cannot be changed.
Below that, the Title of the image. You can edit this and change the title to whatever you like.
Next, there is a Caption field, where you can enter a caption to display below your image.
The Alt Text field controls what text replaces the image in case of slow-loading sites, or for readers using screen readers and other assistive technology. Best is to use a simple description of the image.
Description is an optional description of the image that will display on the image’s attachment page (if you choose for the image to be linked to its attachment page).
Finally, the display name of the user who uploaded the image is shown.
ATTACHMENT DISPLAY SETTINGS
Further down, there are a number of settings that control how the image will display in your post or page.
Alignment lets you choose for your image to be left- or right-aligned, with your text wrapping around it, or center-aligned with the text breaking above and below it. You can also choose ‘None.’
The Link To option controls where a reader is taken if they click on the image:
- Media File opens the image file on its own tab.
- Attachment Page opens the image on its own page in your site, where its title and description are displayed, and where readers can leave comments and use sharing buttons on the individual image itself (if comments and sharing are enabled on media files).
- Custom URL lets you choose where the image links; for example, you might want an image to link to a specific page of your site when clicked.
- If you don’t want the image to be clickable at all, choose None.
Finally, the Size option lets you choose to display your image at full-size, medium, large, or as a thumbnail. The specific sizes that are applied by the medium, large, and thumbnail settings are set by the theme.
FROM MEDIA LIBRARY
You can also modify settings for your already uploaded images directly from your media library. To do this, go to Media → Library in your dashboard:
Click on any of the images there, and the Attachment Details window will pop up:
Note that most of these are the same as the options discussed above, but some are in a slightly different position.
One new one, however, is Uploaded To:
This shows you the post or page the image is uploaded to, and links direclty to it.
The “Edit more details” link at the bottom-right (as well as the Edit Image button at the bottom-left) will take you to a screen where you can modify the image itself (see Image Editing).
You can also edit an already-uploaded image directly from the visual editor of a post or page. To do this click on any image in the visual editor and select the Pencil button that appears (you can also select the “X” button to remove the image):
An Image Details pop-up appears with many of the same options discussed above:
You’ll also see two buttons below the image:
Edit Original takes you to a screen where you can rotate, scale, or crop the image (see Image Editing), and Replace opens the Media Library to let you choose a different image altogether.
In addition, there are some Advanced Options available:
Note: These advanced options only appear when you edit an image directly from a post or page.
- Image Title Attribute controls what will be displayed as a tooltip when a reader hovers over your image.
- Image CSS Class lets you add CSS classes to an image.
- Image Border allows you to control the width in pixels and color of a border around your image.
- Image Margins lets you widen or narrow the amount of space between your image and surrounding content.
- Open link in a new window/tab will open the image (or the link where the image leads) in a separate browser window or tab.
- Link Rel controls the image link’s rel attribute, for adding nofollow amongst other things.
- Link CSS Class lets you add CSS classes to the image link (this is an advanced option; to get started with CSS, see CSS Basics).
In the above mentioned image class input you can use the following classes.
- img-circle Creates a circular image.
- img-rounded Trims the corners of the image.
- img-responsive Allows the image to scale with the website on different devices.