Check Out the New Media Manager in WordPress

WordPress.com users were greeted with a new Media Manager over the weekend. This is the new media uploader coming in WordPress 3.5 when it releases December 5, 2012.

For most of us, this is a long-awaited, dream come true. The clunky WordPress Image Uploader is gone, replaced with one more visual and easy-to-use.

The announcement article provides basic instructions and information on the new Media Manager. For the most part, the new Media Manager for WordPress is intuitive to use, but there are still a few quirks you will encounter.

The benefits of the new WordPress Media Manager are immediately clear. The interface is clean and streamlined, helping you choose fast among only a few choices.

It begins with a new and improved “Add Media” button above the post and Page content area on the WordPress Administration Panels. Gone are the many little icons to select for images, video, audio, etc. It’s one simple button.

The Insert Media opening panel removes the old tabs and gives you four choices: Upload files, Media Library, Embed from URL, and Playlist Editor.

Upload Files: Upload files is the same as the old version. Simply drag and drop files from your desktop or file manager to the box and the images will automatically upload.

Media Library: Similar to the old version, this takes you directly to the Media Library, however the interface is completely changed. More on this in a moment.

Embed from URL/From URL: Flickr, YouTube, Vimeo, any other embedded multimedia are added to your site through here. Simply paste in the link, add descriptive text, and insert the media. WordPress.com currents displays this as “Embed from URL” and the nightly version of WordPress 3.5 beta displays “From URL.”

Playlist Editor: Only available for WordPress.com users. If you have the space upgrade for WordPress.com, you can play your mp3 files such as podcasts sorted in playlists. It may be available as a WordPress Plugin for self-hosted versions of WordPress.

NOTE: Please note that most of the images used in this tutorial are set by example to be thumbnail or medium-sized image, and all feature links to the WordPress Attachment Page, a feature of WordPress often overlooked.

Image Embeds and Galleries

US Federal Laws For Web Accessibility and Images All images on commercial or government websites are required by law to feature alternative descriptions within their HTML image tag. In WordPress, this is set in the ALT Text of the Attachment Details. The “title” of the image is similar to the title of a painting. Think of Mona Lisa by Da Vinci. “Mona Lisa” would be the title, but if you were not familiar with the Mona Lisa, you would need to have it described to you. This is the purpose of the Alternative Text, a description that describes the image. “Painted portrait of a woman sitting in a chair not smiling, painted by Leonardo Da Vinci.” That would be an adequate description of the physical attributes of the image. Descriptions such as “museum art” or “try not smiling today” are not allowed. They may inject keywords and be appropriate to the article content, but they are not appropriate descriptions of the image. The description must describe the image.

The new Media Manager is highly intuitive, but here are the things you need to know, and a few quirks you may encounter as it is new and still in development.

To begin, note that when uploading multiple images, you can move around on the Media panel while the uploads are in process, uploading new files or adding titles, captions, and alternative text descriptions on individual images. This should speed up some of the administrative tasks as you don’t have to wait for the images to finish uploading.

You can choose from the dropdown menu to filter the images displayed to all media items, images uploaded to this post, all images only, all audio, or all video.

There is no need to upload all your images again or make changes. The new Media Manager works with all images uploaded in the past. Just like the previous Image Uploader, it will not include images manually uploaded via FTP to your site.

Note: A quirk of the new uploader is that all images are selected automatically. If you click “Insert into post,” all the images will be inserted. This makes a mess and can be frustrating if you are not prepared for it.

At the bottom left corner of the screen, select “Clear” to unselect all the selected images so you can select which image you wish to insert into the post, or select the images you wish to add to a gallery post. If you do this by mistake, simply click on the images and choose to remove them from the post panel (they are not deleted from WordPress just your post) and add them properly.

Selecting and Editing Image Details

To select a single image for inserting into a post, click it and the image details appear to the right along with a thumbnail of the selected image.

Fill in the information as usual, but notice that the required asterisk for the title is no longer there. The title is the name of your file. Change this to an appropriate name instead of the weird file name from your camera. Remember, this title also becomes the title of your image Attachment Page.

The ALT Text is a requirement in compliance with US and other country web accessibility laws. This must be filled in as a sentence, with a capital letter to begin and a period to end, if you choose to comply. Compliance is required for businesses, non-profits, government agencies, and sites which serve the public (as in not your personal blog or online journal – money making sites, yes, as those are businesses).

Attachment Display Settings may be slightly confusing. They are similar to the former settings. Please note, this is the area in which you set the image alignment on the post or Page not the Attachment Page. Set it for Center, Left, or Right to align the image and have the text wrap around it on the post or Page.

Link To can be set to none, Custom URL (such as a link to a website), Media File (link to the image directly), or Attachment Page.

Attachment Pages are often overlooked in WordPress. These allow images to be showcased on their own post when clicked through via the attachment page link on the original post.

Attachment Pages features an enlarged view of the image (if the original is larger) and the title of the image as the Attachment Page post title (another reason to title your images better than DSC1294059305892370.jpg), and the comment box. This gives people the opportunity to comment on a specific image and say, “Hey, look! It’s me!” Click on the image on the Attachment Page and the full size image will be displayed on a blank web page. [Click the image to the right to see what an Attachment Page looks like in WordPress.]

Size: The last part of the Attachment Details for the image is the size. WordPress still features the small, medium, large, and full-size options for each image uploaded. These are the sizes for the image in the post, not for the Attachment Page. The Attachment Page will display the image at its full-size or the maximum width permitted by the WordPress Theme, whichever is less.

Featured Image: The featured image in WordPress has also been updated with the new Media Manager to make the process even easier. Choose the Featured Image feature from the post or Page editing panel and upload or select the image you wish to use. No longer can you select an image and assign it as a featured image directly from the Media Manager, making the decision a conscious one.

Galleries

Understanding WordPress Galleries In some programs and publishing platforms, galleries are collections of images stored together and associated with each other. In WordPress, a “gallery” is a method of displaying more than one image on a Post or Page in a gallery format. The images may be uploaded at the same time you create the post or Page, or uploaded at any time. The new Media Manager in WordPress makes it easy to select any images from the Media Library, freeing you from the bonds of images in collections or associated with a specific post. You do not need an additional WordPress Plugin to manage galleries unless you wish. Galleries are styled based upon the WordPress Theme.

Before the new Media Manager, galleries in WordPress consisted of the images you uploaded “attached” to a specific post, or you had to manually find and use the image ID numbers for every image you wished to put into a gallery from the Media Library and insert them into a shortcode. Bye-bye to this painful part of galleries in WordPress!

Gone, too, is the “Gallery” tab to which all uploaded images to a specific post to be “stored” virtually. The images can be selected from the entire Media Library or filtered to only the images associated with that post. To view the images attached to that post, select from the media filter dropdown box at the top of the Media Library screen, “Uploaded to this post.”

The double clicking to access images while writing and editing a post continues, but now is three clicks. Instead of the two clicks to get to the post gallery of images, you now click Add Media then Media Library and work from the images in there, or click a third time with the dropdown media filter menu to display only images uploaded to this post. I’m still dreaming of having images uploaded to this post visible on the post or Page panel, skipping the need to go to the Media Manager. I live in hope.

With the new WordPress Media Manager, to select images for a gallery post, in the post, upload images you wish to use or go to the Media Library access through the Add Media feature.

Select each image and a checkbox will appear in the upper right corner of the image.

At the bottom of the screen it will read “1 selected” with an Edit and Clear option next to a tiny thumbnail of the selected image. Select another and it will report “2 selected” and add that image to the thumbnails.

The Edit button under the number of selected images is not for editing posts. It is for editing the selected posts for the gallery.

Clear removes the check marks and deselects the images.

When you choose more than one image, a new button appears at the bottom right corner of the screen, “Create a new gallery.”

Here is where some people may get confused.

If you choose Insert into post, the selected images will be inserted into the post per the Attachment Display Settings. If they are set for center and full-size, the images will be displayed as such. If they are set for thumbnails and align right, the images will display accordingly.

If you choose Create a new gallery, you will be taken to the gallery “preview” screen.

The Gallery preview screen allows you to set the Gallery settings for the images such as where the images link (by default they link to the Attachment Page), and the columns, the number of images to show across the page.

You may drag and drop to reorder the images, and instantly add captions. Click “Describe this image” below each image to add a caption. The caption will display on the image in the gallery. If you wish to not feature a caption within your gallery, do not add one.

Click on an image to access the Attachment Details, filling in the title, caption, and required ALT text, the description of the image. Do this for all images within the gallery.

When you are ready, select Insert gallery.

If you aren’t confused by now, you will be.

If you are using the WordPress Visual Editor, you will see a large box on the post panel with snapshot of a scenic mountain and a point-and-shoot camera. You will not see your lovely gallery.

If you are in the text editor, you will see a shortcode for the gallery featuring the ID numbers of the images within the gallery.

Not what you were expecting.

To view your gallery, save as Draft and click the Preview button to open a preview of your post or Page in a new tab. Remember, the way the images are displayed as a gallery are dictated by your WordPress Theme or any WordPress Plugins you add to customize the built-in gallery feature of WordPress.

Not happy with the results in the Preview?

In the Visual Editor, click the box and choose the icon with the photograph to edit and rearrange your gallery in the Media Manager. In the Text Editor, delete the code and start over or rearrange the image ID numbers to sort them into the preferred order unless set by ascending or descending.

In the past, images were associated with their “original post,” the post to which they were originally uploaded. Some people used this to link an image back to that post. To do so, choose “Custom URL” from the Attachment Display Settings and paste in the link to that original post.

Editing Images

NOTE: While writing and publishing this article, WordPress.com has added a link to “Click here to go to the Advanced Image Editor” on the individual image details. This opens the Image Editor in WordPress. Expect this to be cleaned up with a button or something prettier by the time WordPress 3.5 is released.

The image editor is not as easily accessed as it was previously. You cannot currently edit an image from within the Post or Page Add Media “uploader” screens.

To edit an image, leave the post or Page and go to the Media > Library panel.

You have two options. You may upload a new image and select Edit to edit it immediately, or choose from the list of previously uploaded images.

If you choose to upload a new image, note that the Edit link opens a new browser window or tab without warning. If nothing happens, go hunting through your browser tabs.

From the list of images, find the image you wish to edit and hover over it. The Edit option will appear.

The Edit Media screen allows you to basically edit the Attachment Post as well as the image.

On the Edit Media screen, you may change the image title which is shown on the Attachment Page title. You may add or edit the caption, Alternative Text, and even add content on the Attachment Page like you would a post or Page, explaining the image, adding more information and links, or whatever you may wish to do.

To edit the image, click Edit Image to get to the WordPress Image Editor built into WordPress.

The WordPress Image Editor is a very limited editor. It allows rotating the image, cropping, flipping, and setting the Thumbnail settings for that specific image. Using the Scale Image feature, you may resize the image, though do so carefully as you must enter both numbers. If you make the image wider or narrower than its original proportions, distortion will occur.

Get Excited for WordPress 3.5

This is just one of the new features coming out in WordPress 3.5 on December 5, 2012.

For the most part, this is the only feature with the most changes, and I feel that the Media Manager isn’t done. I hope these little quirks will be fixed as the development team continues to work on this, especially the lack of a gallery preview in the post. I look forward to the Media Manager becoming integrated more into the post and Page panel, much like the powerful File Gallery WordPress Plugin, a Plugin I dream of being added to core. The bouncing back and forth from the post to the Media Manager continues to be a time waster, but the new interface will definitely speed things up.

In brief, WordPress 3.5 brings changes to to WordPress with the Links Manager (aka Blogroll) gone, the Twenty-Twelve WordPress Theme, a new Welcome Screen to make the entry into WordPress better, and some general workflow and button modifications.

For a full list of the feature changes and improvements, see WordPress Version 3.5 in the WordPress Codex.

As with all major updates to WordPress, this one is mandatory as it includes some underlying technology changes essential to protect your site and improve its functionality. Don’t wait for the dot one release. Update immediately when you see the announcement. If you don’t regularly follow the news, put it on your calendar for December 5, 2012.

---

Subscribe Via Feedburner Subscribe by Email

Copyright Lorelle VanFossen.