Skip navigation

Check Out the New Media Manager in WordPress

WordPress NewsWordPress.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.

WordPress new replacement button for the Media Uploader that reads Add Media.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.

WordPress Media Manager Upload panel for selecting or uploading files.

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.

The panel for the exclusive WordPress.com Playlist Editor in the new Media Manager.

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.

Example of the new WordPress Media Manager with a drop down sort to filter images by type and those with this post.

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.

Example of editing a single image in the new WordPress Media Manager and uploader.

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.

WordPress Gallery on post preview showing multiple images in a post.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.

WordPress Media Manager panel for adding images to a gallery.

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.

Example of the gallery editor for WordPress Media Manager with several images to sort and arrange.

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.

Example of how WordPress new Media Manager inserts a graphic to represent a gallery in post or Page, not the images.

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

Example of the access link to the advanced image editor in WordPress.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.

Example of the WordPress Media Library featuring all images in a list.

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.

Example of the built-in WordPress Image Editor with the ability to crop, scale, flip, rotate, and edit image details.

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.


Feed on Lorelle on WordPress Subscribe Feedburner iconVia Feedburner Subscribe by Email

Copyright Lorelle VanFossen.

19 Comments

  1. Posted December 2, 2012 at 3:41 pm | Permalink

    Good review! Thanks!

  2. Posted December 2, 2012 at 4:20 pm | Permalink

    Great review, look forward to the updates. :)

  3. Posted December 2, 2012 at 4:24 pm | Permalink

    Hi Lorelle,

    I like this comment box and the options given the commenter. Is this a plugin? And if so what is it called? I have been looking for a plugin that would do just these things.

    I have also been wanting to move comments from my About section to the relevant post. How do I do this?

    Thanks

    Kathleen

  4. Gail
    Posted December 2, 2012 at 5:31 pm | Permalink

    Hi Lorelle! When I saw the new media manager this weekend I sort of freaked. (Don’t do well with change.) :) I tried uploading via URL (usually upload from computer), but had some problems. It may have just been first day bugs (I noticed some little things were fixed with file upload the following day), so I haven’t tried it since. But with your expert direction, I’m sure I’ll get the hang of it. Thanks, as always!

    • Posted December 2, 2012 at 6:18 pm | Permalink

      @Gail: This is the kind of change that is very welcome. There were many problems with the older clunky interface.

      Choosing “From URL” is not uploading from your computer. That is linking to an image, video, or audio file already on the web such as YouTube or Flickr. You need to choose “Upload Files.”

      Working with WordPress.com, we get to test everything before the rest of the world. :D Luckily, they listen to our feedback and things get better fast. Thanks!

  5. Posted December 3, 2012 at 12:47 am | Permalink

    Excellent look at the new Media handling, though I may quibble about the Gallery screen being a “preview” of the actual Gallery in the post, other than being able to see which thumbnail images are associated with the Gallery. But not much more.

    However, there were features that were overlooked, like sort order (drag and drop doesn’t cut it if you have lots and lots of images) and the ability to create slideshows (both being worked on, according to Staff replies in the forums). There is another feature which, like columns and attachment, could have been included in the Gallery creation screen, i.e. media size (thumb, medium, large and full). And while this has always been an issue, since we can now easily create a Gallery from previously uploaded images in the Media Library, navigation on image Attachment pages is a mess! Clicking on any Gallery thumb that’s linked to its Attachment page will bring you to the post or page where it was originally uploaded. The only way I can see to sidestep this navigation issue is to always use the Photo Carousel. (Of course this won’t be an option for standalone WordPress users unless they use jetpack.)

    I’ve mentioned all these things on my “Not The WordPress.com Gallery FAQ,” which was updated yet again on November 29th and is the 4th update since being published in July 2008.

    Don’t get me wrong, I really like the new Media handling, a lot! It’s more intuitive, is amazingly fast in Chrome (haven’t had time to try other browsers yet) and makes creating multiple Galleries and image insertion a breeze.

  6. doitwithwordpress
    Posted December 3, 2012 at 2:07 pm | Permalink

    I had the privilege of having it introduced to me in person by Mark Jaquith at WordCamp Orlando over the weekend and it looks fantastic. Such a colossal improvement over the old one, and a good well done by all.

  7. wbralex
    Posted December 3, 2012 at 4:30 pm | Permalink

    I think new media manager is more robust and more complex thing in the same time. It will bring some new learning curve for users and it’s real place for UI innovations.

    • Posted December 3, 2012 at 5:40 pm | Permalink

      I agree it is a great place for some UI innovations. I don’t think it will take too much of a curve for people to adjust to the new system as it really is more intuitive. It’s just a couple clunks in the road that may confuse people. Thanks.

  8. billmasella
    Posted December 15, 2012 at 3:11 pm | Permalink

    Gonna absolutely love it… testing 3.5 now in non production… Thanks for all you do and the insight you offer.

  9. Posted January 18, 2013 at 10:26 am | Permalink

    I am totally annoyed that they no longer has a ‘save changes’ button on the image page. I like to update all of my titles, alt text, and links to url’s for every image in a post at the same time. Like money in the bank – copy/paste my way around and then insert them into the text as needed…

    However – it does NOT save the changes to ‘custom url’ and defaults back to ‘http://’ every time. Arg!

    Please – bring back the save changes button!!

  10. Chris
    Posted February 24, 2013 at 6:36 am | Permalink

    This new wordpress uploader is terrible, its slow and crashes all the time. Anybody else having these problems?

    • Posted February 25, 2013 at 9:34 am | Permalink

      No. I find it faster than the old version. It also may depend upon the speed of your computer, Internet connection, and server speeds and capabilities.

    • Posted March 22, 2013 at 12:02 pm | Permalink

      Yes, I’m having the same problem. I think this new interface is terrible and wish I could have the old one back. It doesn’t even allow me to copy an image directly onto a page either. I had hoped I’d be streamlining my content management by recently rehosting my website using wordpress but I’m finding the graphics interface to be a real issue and time suck.

    • Posted March 22, 2013 at 12:37 pm | Permalink

      I don’t understand what problems you are having. You cannot directly “copy” an image onto a post or Page. You must upload it to your site as you have always done. The ease of uploading has been improved but I’m not sure what issues you are having.

      The time suck of the media handling process for WordPress is continuing to go back and forth to the Media Manager/Uploader to add a single image when you have many images (not in a gallery) throughout a post. The File Gallery WordPress Plugin solves that issue for self-hosted versions of WordPress. In general, I’m finding the new media interface easier to use.

  11. fsh5
    Posted April 3, 2013 at 6:52 am | Permalink

    Dear WP staff and users — I have recently set up a wordpress.com blog.

    I am having so much trouble figuring out either how to have longer descriptive captions (often requiring translation) or easily directing a viewer to a location where they can see a fuller description of the image. In that case, I would include a short caption fitting for the limited frame allowed within gallery and then easily direct a viewer to a fuller description. I’ve tried adding an instruction to click “permalink” (see Day 1 gallery), but that doesn’t take the viewer to a fuller description. But within media gallery, I can go to attachment and see the title, caption, and description. The point is to resolve this problem for the viewer within the slide show. When I figure out a solution, I will apply it to all the galleries and continue to add new ones. I went from a free university wordpress site to the paid option with wordpress.com yesterday hoping to figure out this problem. Please help me.Thank you. frances hasso

    • Posted April 4, 2013 at 1:54 pm | Permalink

      I’m sorry that you are having trouble. I am not a WordPress or Automattic employee, so your comment here will be unnoticed by the staff. Hopefully the class you are taking will help but here is the answer.

      There is some confusion with terms. “Captions” are the visual text under an image. “Alternative Text” or ALT descriptions are hidden within the HTML image tag and are required by law to be descriptive of the image, not a story or more than a few words describing the image for the visually impaired. The “title” of the image is a short title, like “The Mona Lisa,” which gives the image a name.

      To create an image that will link to a larger version of the image, set it to be an attachment. This will automatically put a link around the image. When the image is clicked, it will take the user to a larger view on a web page of your site called the attachment page.

      Images can be put into a slideshow as well.

      If you would like to tell more of the story of the image, why not write about it in the post. The image is there and the text will be above, below, or around it, helping people learn more about the story behind the image. This is the easiest way to tell the story of the picture.

      I hope this helps. Sometimes we make these things more complicated than they need to be, so keep it simple. Thanks.


8 Trackbacks/Pingbacks

  1. [...] Check Out the New Media Manager in WordPress is an extensive article and review I’ve published on Lorelle on WordPress. It features a step-by-step tutorial on using the new Media Manager for uploading and managing your images, video, and audio on WordPress, as well as a few of the unusual quirks in the new feature. [...]

  2. [...] Check Out the New Media Manager in WordPress – WordPress.com users were greeted with a new Media Manager over the weekend. [...]

  3. [...] The new Media Uploader and Media Library are the biggest and most anticipated features for WordPress 3.5. Now it is easier than ever to manage, arrange and add media to your posts and pages. The new drag-and-drop interface now gives you the ability to work with a group of photos or media files. It is much easier to add meta-data such as description, caption and alt text to each image, which is great for Search Engine Optimization. Also included in the new Media Manager are the options to set a featured image or insert a gallery of images. There is also improved media search capabilities for those with large media libraries and the upload experience seem much faster and cleaner. A great tutorial for the new Media Manager can be found here. [...]

  4. [...] Check Out the New Media Manager in WordPress [...]

  5. [...] Check Out the New Media Manager in WordPress 3.5 (Lorelle on WordPress) [...]

  6. [...] you would like to learn more about the WordPress Media Uploader and image handling, read “Check Out the New Media Manager in WordPress” on Lorelle on [...]

  7. […] Check Out the New Media Manager in WordPress from Lorelle on WordPress. […]

  8. […] The new Media Uploader and Media Library are the biggest and most anticipated features for WordPress 3.5. Now it is easier than ever to manage, arrange and add media to your posts and pages. The new drag-and-drop interface now gives you the ability to work with a group of photos or media files. It is much easier to add meta-data such as description, caption and alt text to each image, which is great for Search Engine Optimization. Also included in the new Media Manager are the options to set a featured image or insert a gallery of images. There is also improved media search capabilities for those with large media libraries and the upload experience seems much faster and cleaner. A great tutorial for the new Media Manager can be found here. […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 19,719 other followers

%d bloggers like this: