Cropping an image

You upload you image to the Media Library.  You realize your image needs to be cropped.  Ugh.  In the old days, you would have to crop that image in your photo editing software and upload the image again. Good news . . .you can now crop your image from the Media Library.

Cropping an Image

Start in the Media Library.  Select the image you want to crop.

The Edit Media or Attachment Details page is next screen.  Click on the Edit Image button below your image.image-editing-01

To start cropping an image, click and drag over the area you want cropped.  The cropped area will become darker.  The area to preserved will be brighter.  Move the crop square as needed to get the crop you want.  Click and hold on any of the little squares (in the corners, center top, bottom, left and right area of the image) to lengthen or shorten the crop.  To scale smaller or bigger, click and drag a corner square.

image-editing-02
Happy with the the new look?  Click the crop button above the image.  The cropped image will replace the original image.  When you are done editing your image:

  • click  the Save button below the image
  • AND THEN click the blue Update button in the right sidebar to update the image.

Media Library

The Media Library allows you to edit, view and delete media you uploaded to your website or blog.  The Media Library provides you with two ways to view your library, the Grid and List Views.  You can toggle between the Grid and List Views by clicking on the icons under the Media Library title.

Toggle the Media Library Views between List and Grid Views.

Media Library Grid View

The Grid View gives you thumbnails of your images, audio and movie icons.

Media in the Library Grid View.

Media Library in the Grid View showing drop down menu.

 

With the grid view,  your media library automatically displays all media items.  It can also be sorted by images, audio, video and media items not attached to a page or post.

 

 

 

 

Media Library List View

The Media Library List View is a table which lists all of your media in a row.  Media is listed with the newest upload first.

Media Library in the List View.

By hovering over a library item in the the List View, you get three options:  Edit, Delete Permanently and View.  You can also quickly see what page or post the library item is attached to and when it was uploaded.

media-library-05

Click Delete Permanently to delete the image from the database.  Clicking View will bring you to the attachment page for the library item.  Clicking Edit will bring you to a page where you can add a caption, alternative text for screen readers and a description of the image.

Media Library - view media to edit the Caption, Alternative Text and Description.

 

Image Details

Once you selected the image you want to add to your page or post, you’ll see a checkbox next to the thumbnail confirming your selection, and see information about it displayed in the Attachment Details pane in the right sidebar of the media uploader.

Attachment Details for your Image

Image details - adding an image to your post or page.

The Attachment Details shows a small un-cropped thumbnail of the image, and important information like the filename, date uploaded, and image dimensions in pixels.

There is a link so you can edit the image, which takes you to the Edit Image page, or you can delete the image by clicking the Delete Permanently link.

You can also edit the following information about your image:

Title: The title of this media.
Caption: The caption for this image. The text you enter here will be displayed below the image.
Alternate Text: Enter the Alt text for the image, e.g. “The Mona Lisa” to describe the media. This alternate text is used by screen readers.
Description: A description of this image.
For more information on these media settings, see the Codex Edit Media page.

Attachment Display Settings for your Image

Image details display settings - adding an image to your page or post.The Attachment Display Settings (below the Attachment Details) controls how your image is displayed when seen on your site.

You can set the alignment (left, center, right or none) and what size image you would like to display on your page.

Left Alignment aligns the image on the left hand margin, and any text that is on the page wraps  around the image to the space on the right.
Right Alignment aligns the image on the right hand margin, and any text that is on the page wraps around the image to the available space on the left.
Center Alignment aligns the image to the center of the page, with no text displayed around the image.
None Alignment Setting inserts the image in to the page with no alignment

Adding photos to your page/post

Adding images to your page or post will make the page/post more engaging.  When creating or editing a page or post, you can add images using the Media Uploader tool. Here’s how:

1. Put your cursor where you want your image

Before you add an image to your page or post, first insert your cursor in the place within the text where you want the image to appear.  By placing the cursor (and then the image) within your text, you can later set the alignment of the image so that the text will wrap around the image.

Place your cursor on the left margin of your text, even if you want the image to appear on the right. There is an Alignment setting that lets you control the alignment image to appear on the right or the left side of the text.

If you want the image to be on a line without text, place your cursor on a blank line.

Adding images to your page or post.

2.  Click the Add Media button

Once your cursor is where you want your image to appear, click the Add Media button.  This will launch the media uploader.

Adding images to your page or post.

Click on Upload Files to upload new image or images.

Adding images using the Media Uplaoder.

This is the screen for the image uploader:

Adding images - uploading to the Media Uploader.

When the image is uploaded,  choose the image  from your media library by selecting that image.  Click Insert into Post in  the lower right corner to add the photo to your page.

Adding images - using the Media Uploader.