Merge pull request #508 from wp-shortcake/attachment-gallery

Attachment Gallery

css/sass/_field-image.scss

@@ -1,110 +1,111 @@
-.edit-shortcode-form .shortcake-attachment-preview {
+.edit-shortcode-form {
 
-	width: 150px;
-	height: 150px;
-	margin: 0 10px 10px 0;
-	line-height: 150px;
-	text-align: center;
-	padding: 0;
-
-	&:before {
-		display: none;
+	.button.shortcake-attachment-select {
+		display: block;
+		clear: both;
+		margin-bottom: 15px;
 	}
 
-	.thumbnail:hover:after { 
-		background: rgba(0,0,0,0.1);
-		transition: all .3s linear;
-	 }
-
-	&:not( .has-attachment ) {
-		border: 2px dashed #DDD;
-		border-radius: 2px;
-		background: transparent;
-		box-shadow: none;
+	.shortcake-attachment-preview {
+		float: left;
+		margin: 0 20px 20px 0;
+		width: 150px;
 	}
 
-	.button.add {
-		vertical-align: middle;
-		z-index: 1;
+	.shortcode-ui-field-attachment .description {
+		margin: 10px 0;
 	}
 
-	.button.remove {
-
-		z-index: 1;
-		display: none;
-		position: absolute;
-		top: 5px;
-		right: 5px;
-		border: 1px solid #aaa;
-		box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.15 );
-		text-indent: 100%;
-		whitespace: nowrap;
-		width: 24px;
-		height: 24px;
+	.shortcake-attachment-preview-container {
+
+		width: 150px !important;
+		height: 150px !important;
+		margin: 0 10px 10px 0;
+		line-height: 150px;
+		text-align: center;
 		padding: 0;
-		overflow:hidden;
 
-		&:after {
-			content: "\00d7";
+		&:before {
+			display: none;
+		}
+
+		.button.remove {
+
+			z-index: 1;
+			display: block;
 			position: absolute;
-			top: -1px;
-			left: 5px;
-			font-size: 22px;
-			text-indent: 0;
+			top: 5px;
+			right: 5px;
+			border: 1px solid #aaa;
+			box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.15 );
+			text-indent: 100%;
+			whitespace: nowrap;
+			width: 24px;
+			height: 24px;
+			padding: 0;
+			overflow:hidden;
+
+			&:after {
+				content: "\00d7";
+				position: absolute;
+				top: -1px;
+				left: 5px;
+				font-size: 22px;
+				text-indent: 0;
+			}
 		}
-	}
 
-	.loading-indicator,
-	&.loading .button.add {
-		display: none;
-	}
+		.thumbnail img {
+			max-width: 100%;
+			max-height: 100%;
+			width: auto;
+			height: auto;
+		}
 
-	&.loading .loading-indicator {
-		display: block;
-		position: relative;
-		width: 100%;
-		height: 100%;
-	}
+		.loading-indicator,
+		&.loading .button.add {
+			display: none;
+		}
 
-	.loading-indicator {
-		.dashicons {
-			font-size: 80px;
-			height: 100px;
-			line-height: 100px;
+		&.loading .loading-indicator {
+			display: block;
+			position: relative;
 			width: 100%;
-			text-align: center;
-			vertical-align: middle;
+			height: 100%;
 		}
-		.attachment-preview-loading {
-			width: 60px;
-			height: 5px;
-			overflow: hidden;
-			background-color: transparent;
-			margin: -30px auto 0;
-
-			ins {
-				background-color: #464646;
-				margin: 0 0 0 -60px;
+
+		.loading-indicator {
+			.dashicons {
+				font-size: 80px;
+				height: 100px;
+				line-height: 100px;
+				width: 100%;
+				text-align: center;
+				vertical-align: middle;
+			}
+			.attachment-preview-loading {
 				width: 60px;
 				height: 5px;
-				display: block;
-				-webkit-animation: attachment-preview-loading 1.3s infinite 1s linear;
-				animation: attachment-preview-loading 1.3s infinite 1s linear;
+				overflow: hidden;
+				background-color: transparent;
+				margin: -30px auto 0;
+
+				ins {
+					background-color: #464646;
+					margin: 0 0 0 -60px;
+					width: 60px;
+					height: 5px;
+					display: block;
+					-webkit-animation: attachment-preview-loading 1.3s infinite 1s linear;
+					animation: attachment-preview-loading 1.3s infinite 1s linear;
+				}
 			}
 		}
-	}
 
-	.filename {
-		line-height: 1.4em
-	}
-
-	&.has-attachment  {
-		.button.add {
-			display: none;
-		}
-		.button.remove {
-			display: block;
+		.filename {
+			line-height: 1.4em
 		}
+
 	}
 
 }

dev.php

@@ -169,6 +169,16 @@ function shortcode_ui_dev_advanced_example() {
 			'addButton'   => esc_html__( 'Select Image', 'shortcode-ui-example' ),
 			'frameTitle'  => esc_html__( 'Select Image', 'shortcode-ui-example' ),
 		),
+		array(
+			'label'       => 'Gallery',
+			'attr'        => 'gallery',
+			'description' => esc_html__( 'You can select multiple images.' ),
+			'type'        => 'attachment',
+			'libraryType' => array( 'image' ),
+			'multiple'    => true,
+			'addButton'   => 'Select Images',
+			'frameTitle'  => 'Select Images',
+		),
 		array(
 			'label'  => esc_html__( 'Citation Source', 'shortcode-ui-example' ),
 			'attr'   => 'source',
@@ -298,6 +308,7 @@ function shortcode_ui_dev_shortcode( $attr, $content, $shortcode_tag ) {
 	$attr = shortcode_atts( array(
 		'source'     => '',
 		'attachment' => 0,
+		'gallery'    => '',
 		'page'       => '',
 		'term'       => '',
 		'users'      => '',
@@ -349,6 +360,14 @@ function( $user_id ) {
 			<b><?php esc_html_e( 'Image:', 'shortcode-ui-example' ); ?></b> <?php echo wp_kses_post( wp_get_attachment_image( $attr['attachment'], array( 50, 50 ) ) ); ?></br>
 			<?php endif; ?>
 
+			<?php if ( ! empty( $attr['gallery'] ) ) : ?>
+				<b><?php esc_html_e( 'Gallery:', 'shortcode-ui-example' ); ?></b>
+				<?php foreach ( explode( ',', $attr['gallery'] ) as $attachment ) : ?>
+					 <?php echo wp_kses_post( wp_get_attachment_image( $attachment, array( 50, 50 ) ) ); ?>
+				<?php endforeach; ?>
+				<br />
+			<?php endif; ?>
+
 			<?php if ( ! empty( $attr['page'] ) ) : ?>
 				<b><?php esc_html_e( 'Pages:', 'shortcode-ui-example' ); ?></b> <?php echo esc_html( implode( ', ', $attr['page'] ) ); ?></br>
 			<?php endif; ?>

inc/class-shortcode-ui.php

@@ -293,6 +293,7 @@ public function action_media_buttons( $editor_id ) {
 	 * Output required underscore.js templates in the footer
 	 */
 	public function action_admin_print_footer_scripts() {
+
 		echo $this->get_view( 'media-frame' ); // WPCS: xss ok
 		echo $this->get_view( 'list-item' ); // WPCS: xss ok
 		echo $this->get_view( 'edit-form' ); // WPCS: xss ok