Merge pull request #159 from xwp/feature/image-details

Feature/image details

.env.dist

@@ -1,7 +1,7 @@
 # Unsplash
-UNSPLASH_ACCESS_KEY=
-UNSPLASH_SECRET_KEY=
-UNSPLASH_UTM_SOURCE=
+UNSPLASH_ACCESS_KEY=${UNSPLASH_ACCESS_KEY:=}
+UNSPLASH_SECRET_KEY=${UNSPLASH_SECRET_KEY:=}
+UNSPLASH_UTM_SOURCE=${UNSPLASH_UTM_SOURCE:=}
 
 # MySQL
 MYSQL_ROOT_PASSWORD=root

assets/src/media-library/index.js

@@ -0,0 +1,20 @@
+/**
+ * Internal dependencies
+ */
+import { withUnsplashAttachmentDetails } from './views';
+
+// Override media frames in the media library.
+if ( wp.media && wp.media.view ) {
+	/**
+	 * 	Override two-column frame in the media library.
+	 */
+	if (
+		wp.media.view.Attachment &&
+		wp.media.view.Attachment.Details &&
+		wp.media.view.Attachment.Details.TwoColumn
+	) {
+		wp.media.view.Attachment.Details.TwoColumn = withUnsplashAttachmentDetails(
+			wp.media.view.Attachment.Details.TwoColumn
+		);
+	}
+}

assets/src/media-library/views/index.js

@@ -0,0 +1 @@
+export { default as withUnsplashAttachmentDetails } from './with-unsplash-attachment-details';

assets/src/media-library/views/with-unsplash-attachment-details.js

@@ -0,0 +1,6 @@
+export default View => {
+	return View.extend( {
+		// Use the custom Unsplash template.
+		template: wp.template( 'unsplash-attachment-details-two-column' ),
+	} );
+};

assets/src/media-selector/style.css

@@ -244,3 +244,7 @@
 		top: 50px;
 	}
 }
+
+.attachment-info .filename {
+	font-weight: normal;
+}

assets/src/media-selector/views/details.js

@@ -0,0 +1,6 @@
+const Details = wp.media.view.Attachment.Details.extend( {
+	className: 'attachment-details unsplash-attachment-details',
+	template: wp.template( 'unsplash-attachment-details' ),
+} );
+
+export default Details;

assets/src/media-selector/views/images-browser.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { ImageViews } from './';
+import { ImageViews, Details } from './';
 import { getConfig } from '../helpers';
 
 const ImagesBrowser = wp.media.view.AttachmentsBrowser.extend( {
@@ -89,7 +89,7 @@ const ImagesBrowser = wp.media.view.AttachmentsBrowser.extend( {
 
 		sidebar.set(
 			'details',
-			new wp.media.view.Attachment.Details( {
+			new Details( {
 				controller: this.controller,
 				model: single,
 				priority: 80,

assets/src/media-selector/views/index.js

@@ -1,4 +1,5 @@
 export { default as Button } from './button';
+export { default as Details } from './details';
 export { default as ImagesBrowser } from './images-browser';
 export { default as ImageView } from './image-view';
 export { default as ImageViews } from './image-views';

php/class-image.php

@@ -93,9 +93,13 @@ public function process_fields() {
 		$this->process_data['user']              = $this->get_image_field(
 			'user',
 			[
-				'name' => '',
-				'id'   => '',
-				'bio'  => '',
+				'name'     => '',
+				'id'       => '',
+				'bio'      => '',
+				'username' => '',
+				'links'    => [
+					'html' => '',
+				],
 			]
 		);
 		$this->process_data['file']              = sanitize_title_with_dashes(