WPMediaPicker

WPMediaPicker is an iOS controller that allows capture and picking of media assets. It allows:

• Allows selection of multiple media objects in one go.
• Capture of new media while inside the picker.
• Use different data sources for the media library.
• Switch between different albums.
• Filtering by media types.
• Preview of media (images and video) in full screen.
• Show the media picker inside as a keyboard input view.
• Super quick and memory optimized.
• Allows horizontal and vertical scroll of assets.
• Allows custom searching/filtering of assets.

Installation

WPMediaPicker is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod "WPMediaPicker"

Usage

To use the picker do the following:

Import header

#import <WPMediaPicker/WPMediaPicker.h>

Create and present the picker in modal mode

WPNavigationMediaPickerViewController * mediaPicker = [[WPNavigationMediaPickerViewController alloc] init];
mediaPicker.delegate = self;
[self presentViewController:mediaPicker animated:YES completion:nil];

Implement didFinishPickingAssets delegate

The delegate is responsible for dismissing the picker when the operation completes. To dismiss the picker, call the dismissViewControllerAnimated:completion: method of the presenting controller responsible for displaying the WPNavigationMediaPickerController object. Please refer to the demo app.

- (void)mediaPickerController:(WPMediaPickerViewController *)picker didFinishPickingAssets:(NSArray<WPMediaAsset> *)assets
{
  [self dismissViewControllerAnimated:YES completion:nil];    
}

Other methods to display the picker

The example above shows the recommended way to show the picker in a modal. There are currently three available controllers to show the picker depending on your application needs:

• WPMediaPickerViewController, this is the base collection view controller that displays the media. It can be used inside other view controllers using containment.
• WPInputMediaPickerViewController, a wrapper of the WPMediaPickerController to be used as an inputView of an UIControl.
• WPNavigationMediaPickerViewController, a convenience wrapper of the WPMediaPickerViewController inside a UINavigationController to show in a modal context.

How to configure the appearance of the picker

Just use the standard appearance methods from UIKit. Here is an example how to configure the main components

//Configure navigation bar background color
[[UINavigationBar appearanceWhenContainedInInstancesOfClasses:@[[WPNavigationMediaPickerViewController class]]] setBarTintColor:[UIColor colorWithRed:0/255.0f green:135/255.0f blue:190/255.0f alpha:1.0f]];
//Configure navigation bar items text color
[[UINavigationBar appearanceWhenContainedInInstancesOfClasses:@[[WPNavigationMediaPickerViewController class]]] setTintColor:[UIColor whiteColor]];
//Configure navigation bar title text color
[[UINavigationBar appearanceWhenContainedInInstancesOfClasses:@[[WPNavigationMediaPickerViewController class]]] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor whiteColor]} ];
//Configure background color for media scroll view
[[UICollectionView appearanceWhenContainedInInstancesOfClasses:@[[WPMediaCollectionViewController class]]] setBackgroundColor:[UIColor colorWithRed:233/255.0f green:239/255.0f blue:243/255.0f alpha:1.0f]];
//Configure background color for media cell while loading image.
[[WPMediaCollectionViewCell appearanceWhenContainedInInstancesOfClasses:@[[WPMediaCollectionViewController class]]] setBackgroundColor:[UIColor colorWithRed:243/255.0f green:246/255.0f blue:248/255.0f alpha:1.0f]];
//Configure color for activity indicator while loading media collection
[[UIActivityIndicatorView appearanceWhenContainedInInstancesOfClasses:@[[WPMediaCollectionViewController class]]] setColor:[UIColor grayColor]];

How to use a custom data source for the picker

If you have a custom database of media and you want to display it using the WPMediaPicker you need to implement the following protocols around your data:

• WPMediaCollectionDataSource
• WPMediaGroup
• WPMediaAsset

You can view the protocols documentation for more implementation details. After you have implemented it you can use it by simple doing the following:

self.customDataSource = [[WPCustomAssetDataSource alloc] init];
mediaPicker.dataSource = self.customDataSource;

Sample Project

To run the example project, clone the repo, and run pod install from the Example directory first.

Requirements

• ARC
• Photos, AVFoundation, ImageIO
• XCode 10 or above
• iOS 11 or above

Contributing

Read our Contributing Guide to learn about reporting issues, contributing code, and more ways to contribute.

Getting in Touch

If you have questions about getting setup or just want to say hi, join the WordPress Slack and drop a message on the #mobile channel.

Author

WordPress, [email protected]

License

WPMediaPicker is available under the GPL license. See the LICENSE file for more info.