Every content management system needs to manage images. Avoori handles such media via a Media Library the same way its done in WordPress. It can be reached by going to Media > Library and clicking either the media item name or the edit link on hover will bring us to Edit Media page.
Edit Media Page Overview
Edit Media page provide users a way to edit media details such as title, caption, alt text, and description etc. It also provides with quick media editing tools such as rotating, scaling & cropping images.
Edit Media Page Options
This is how the Edit Media page looks like in Avoori.
image of edit media screen showing the image and the sidebar that includes additional image information.
The following options are available:
The name of the media that is often shown on attachment pages, the page designer image module and gallery module.
The URL for the media can be edited by clicking the Edit button or View Attachment Page to preview the given media attachment page.
Edit Image Button
If the media is an image, edit image button provides with image editing options such as rotate, crop & scale. We will explore these options below.
A quick explanation for the media can be provided here.
It is often known as alt-text, used for accessibility purposes and used to provide search engines with a clue about the image. For example, “A saturated image of clouds in the sky”.
You may place a detailed overview of the particular media item.
The direct link to the media file.
Save Meta Box
Located at the top right-hand side of the page, displaying key information about the selected media item, such as the upload date, web address, file name, type, size and dimensions. The media can be permanently deleted or updated by clicking the respective buttons, before or after making any changes.
Additional Edit Media Options
The following discussion, comments, slug, and author Meta boxes may not be visible by default. These can be enabled by checking a tick mark at relevant options available on the Screen Options tab at the top right of the Edit Media page.
image of the discussion, comments, slug and author meta boxes on the edit media screen.
You can choose if you want to allow comments and trackbacks on the media attachment page.
List of current comments is provided with the ability to add a comment to the current media.
It is the attachment page slug.
The author can be chosen out of the provided list of users for the media page.
Image Editing Options
When clicking the edit image button on the Edit Media page would transfer you to the following image editing page.
image of edit media page for a specific image.
The following options are provided right beside the image preview.
To cut out a specific portion of the image, you can drag the selection box over the image to make the selection and click crop to finalize the image cropping.
Used to rotate the image counter-clockwise in 90 degrees.
Used for rotating the image clockwise in 90 degrees.
Used for flipping the image upside-down.
Used for flipping the image left-to-right.
Redo is used for restoring an image to the subsequent edits while Undo is taking a step backward in succession from the edit history.
Used for scaling an image to specific proportions numerically.
Restore Original Image
Used for restoring the image back to its original state. The revisions will not be deleted.
Used for precise cropping if you are aware of the required exact dimensions.
Crop Aspect Ratio
Used for cropping at a certain combination of width & length to maintain the image size horizontally & vertically such as 1:1 for a square aspect ratio. The selection can be made holding the shift key while dragging to lock aspect ratio.
Used for numerical fine-tuning of the selection area, after visually making the image selection for cropping.
Used to save changes for the media and returning back to Edit Media page.
Used for canceling the current changes made after the last save.
Useful Keyboard Shortcuts
These shortcuts can make the cropping much faster and easier.
Arrow keys for moving by 10px
Shift + arrow keys for moving by 1px
Ctrl + arrow key to resize by 10px
Ctrl + Shift + arrow keys to resize by 1px
Shift + drag to lock the aspect ratio