TOTAL Theme: Create Image Gallery Meta Box for Custom Post Types

/**
	 * Add meta boxes to selected post types
	 *
	 * @since 1.0
	 */
function easy_image_gallery_2_add_meta_box() {

	$post_types = array('ausstellung');//easy_image_gallery_2_allowed_post_types();

	if ( ! $post_types ) {
		return;
	}

	foreach ( $post_types as $post_type => $status ) {
		add_meta_box( 
			'easy_image_gallery_2', 
			esc_html__( 'Exponate', 'total-theme-core' ),
			'easy_image_gallery_2_metabox', 
			$post_types, 
			'side',
			'default'
		); 
	}

}
add_action( 'add_meta_boxes', 'easy_image_gallery_2_add_meta_box' );


/**
	 * Render gallery metabox
	 *
	 * @since 1.0
	 */
function easy_image_gallery_2_metabox() {

	global $post;
	//$this->load_scripts();

?>
<div id="wpex_gallery_2_images_container">
	<ul class="wpex_gallery_2_images">
		<?php
	$image_gallery = get_post_meta( $post->ID, '_easy_image_gallery_2', true );
	$attachments = array_filter( explode( ',', $image_gallery ) );
	if ( $attachments ) {
		foreach ( $attachments as $attachment_id ) {
			if ( wp_attachment_is_image ( $attachment_id  ) ) {
				echo '<li class="image" data-attachment_id="' . absint( $attachment_id ) . '"><div class="attachment-preview"><div class="thumbnail">
													' . wp_get_attachment_image( $attachment_id, 'thumbnail' ) . '</div>
													<a href="#" class="wpex-gmb-remove">' . esc_html__( 'Remove image', 'total-theme-core' ) . '</a>
												</div></li>';
			}
		}
	} ?>
	</ul>
	<input type="hidden" id="wpex_image_gallery_2_field" name="wpex_image_gallery_2" value="<?php echo esc_attr( $image_gallery ); ?>">
	<?php wp_nonce_field( 'wpex_gallery_2_metabox_nonce', 'wpex_gallery_2_metabox_nonce' ); ?>
</div>

<!-- TRIGGER CLASS -->	
<p class="add_wpex_gallery_2_images hide-if-no-js">
	<a href="#" class="button-primary"><?php esc_html_e( 'Add/Edit Images', 'total-theme-core' ); ?></a>
</p>

<p>
	<label for="easy_image_gallery_2_link_images">
		<input type="checkbox" id="easy_image_gallery_2_link_images" value="on" name="easy_image_gallery_2_link_images"<?php echo checked( get_post_meta( get_the_ID(), '_easy_image_gallery_2_link_images', true ), 'on', false ); ?>> <?php esc_html_e( 'Single post lightbox?', 'total-theme-core' )?>
	</label>
</p>

<script type="text/javascript">

	jQuery(function($, l10n) {

		$( document ).ready(function() {



			// Uploading files.
			var image_gallery_frame;
			var $image_gallery_2_ids = $( '#wpex_image_gallery_2_field' );
			var $wpex_gallery_2_images = $( '#wpex_gallery_2_images_container ul.wpex_gallery_2_images' );

			jQuery( '.add_wpex_gallery_2_images' ).on( 'click', 'a', function( event ) {
				//alert("clicked");
				event.preventDefault();

				var attachment_ids = $image_gallery_2_ids.val();

				// If the media frame already exists, reopen it.
				if ( image_gallery_frame ) {
					image_gallery_frame.open();
					return;
				}

				// Create the media frame.
				image_gallery_frame = wp.media.frames.image_gallery_frame = wp.media( {
					frame: 'post',
					title: 'Titel', //l10n.title,
					button: {
						text: 'Speichern', //l10n.button,
					},
					library: {
						type: 'image'
					},
					multiple: true,
					filterable: 'all'
				} );

				// When an image is selected, run a callback.
				image_gallery_frame.on( 'insert', function() {
					var selection = image_gallery_frame.state().get('selection');
					selection.map( function( attachment ) {
						attachment = attachment.toJSON();
						if ( attachment.id ) {
							attachment_ids = attachment_ids ? attachment_ids + "," + attachment.id : attachment.id;
							$wpex_gallery_2_images.append('<li class="image" data-attachment_id="' + attachment.id + '">' +
														  '<div class="attachment-preview">' +
														  '<div class="thumbnail">' +
														  '<img src="' + attachment.url + '" />' +
														  '</div>' +
														  '<a href="#" class="wpex-gmb-remove">Enternen</a>' + //' + l10n.remove + '
														  '</div>' +
														  '</li>'
														 );
						}
					} );
					$image_gallery_2_ids.val( attachment_ids );

				} );

				// Finally, open the modal.
				image_gallery_frame.open();

			} );

			// Image ordering
			$wpex_gallery_2_images.sortable( {
				items: 'li.image',
				cursor: 'move',
				scrollSensitivity: 40,
				forcePlaceholderSize: true,
				forceHelperSize: false,
				helper: 'clone',
				opacity: 0.65,
				placeholder: 'wpex-metabox-sortable-placeholder',
				start: function( event,ui ) {
					ui.item.css( 'background-color', '#f6f6f6' );
				},
				stop: function( event,ui ) {
					ui.item.removeAttr( 'style' );
				},
				update: function( event, ui ) {
					var attachment_ids = '';
					$( '#wpex_gallery_2_images_container ul li.image' ).css( 'cursor', 'default' ).each( function() {
						var attachment_id = jQuery(this).attr( 'data-attachment_id' );
						attachment_ids = attachment_ids + attachment_id + ',';
					} );
					$image_gallery_2_ids.val( attachment_ids );
				}
			} );

			// Remove images.
			$( '#wpex_gallery_2_images_container' ).on( 'click', 'a.wpex-gmb-remove', function() {
				$( this ).closest( 'li.image' ).remove();
				var attachment_ids = '';
				$( '#wpex_gallery_2_images_container ul li.image' ).css( 'cursor', 'default' ).each( function() {
					var attachment_id = jQuery( this ).attr( 'data-attachment_id' );
					attachment_ids = attachment_ids + attachment_id + ',';
				} );
				$image_gallery_2_ids.val( attachment_ids );
				return false;
			} );


		});

	}(jQuery));

</script>

<style>
	.wpex_gallery_2_images .details.attachment {
		box-shadow: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none
	}

	.wpex_gallery_2_images .image>div {
		width: 75px;
		height: 75px;
		box-shadow: none;
		-moz-box-shadow: none;
		-webkit-box-shadow: none
	}

	.wpex_gallery_2_images .attachment-preview {
		position: relative
	}

	.wpex_gallery_2_images .attachment-preview .thumbnail {
		cursor: move
	}

	.wpex_gallery_2_images .wpex-metabox-sortable-placeholder {
		width: 75px;
		height: 75px;
		border: 4px dashed #ddd;
		background: #f7f7f7;
		box-sizing: border-box
	}

	.wpex_gallery_2_images .wpex-gmb-remove {
		position: absolute;
		top: -8px;
		right: -8px;
		padding: 2px;
		display: none;
		height: 1em;
		width: 1em;
		text-indent: -9999px;
		font-size: 1.4em
	}

	.wpex_gallery_2_images .wpex-gmb-remove::before {
		font-family: Dashicons;
		speak: none;
		font-weight: 400;
		text-transform: none;
		-webkit-font-smoothing: antialiased;
		text-indent: 0px;
		position: absolute;
		top: 0px;
		left: 0px;
		text-align: center;
		content: "\f153";
		color: #999;
		height: 1em;
		width: 1em;
		line-height: 1em;
		font-variant: normal;
		margin: 0px;
		background: #fff;
		border-radius: 50%
	}

	.wpex_gallery_2_images .wpex-gmb-remove:hover::before {
		color: #a00
	}

	body.rtl .wpex_gallery_2_images .wpex-gmb-remove {
		right: auto;
		right: -8px
	}

	.wpex_gallery_2_images .image div:hover .wpex-gmb-remove {
		display: block
	}

	.wpex_gallery_2_images>li {
		float: left;
		cursor: move;
		margin: 9px 9px 0 0;
		border: 1px solid #d5d5d5;
		width: 75px;
		height: 75px;
		border-radius: 2px;
		box-sizing: border-box
	}

	body.rtl .wpex_gallery_2_images>li {
		float: right;
		margin: 9px 0 0 9px
	}

	.wpex_gallery_2_images li.image img {
		width: 75px;
		height: 75px
	}

	.wpex_gallery_2_images .attachment-preview:before {
		display: none !important
	}

	.wpex_gallery_2_images:after,#wpex_gallery_2_images_container:after {
		content: "";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
		zoom:1}

	#wpex_gallery_2_images_container ul {
		margin: 0 0 9px !important
	}

</style>
<?php
}





/**
 * Save function
 *
 * @since 1.0
 */
function easy_image_gallery_2_save_post( $post_id ) {

	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
		return;
	}

	$post_types = array('ausstellung');//easy_image_gallery_allowed_post_types();

	// check user permissions
	if ( isset( $_POST['post_type'] ) && ! array_key_exists( $_POST['post_type'], $post_types ) ) {
		if ( ! current_user_can( 'edit_page', $post_id ) ) {
			return;
		}
	} else {
		if ( ! current_user_can( 'edit_post', $post_id ) ) {
			return;
		}
	}

	// Update post meta.
	if ( ! empty( $_POST[ 'wpex_image_gallery_2' ] ) ) {
		$attachment_ids = sanitize_text_field( $_POST['wpex_image_gallery_2'] );
		$attachment_ids = explode( ',', $attachment_ids );
		$attachment_ids = array_filter( $attachment_ids );
		$attachment_ids =  implode( ',', $attachment_ids );
		update_post_meta( $post_id, '_easy_image_gallery_2', wp_strip_all_tags( $attachment_ids ) );
	}

	// Delete gallery, but make sure the gallery is actually enabled, we don't want to potentially delete items if the form
	// isn't even on the page.
	elseif( isset( $_POST[ 'wpex_image_gallery_2' ] ) ) {
		delete_post_meta( $post_id, '_easy_image_gallery_2' );
	}

	if ( isset( $_POST[ 'easy_image_gallery_2_link_images' ] ) ) {
		update_post_meta( $post_id, '_easy_image_gallery_2_link_images', wp_strip_all_tags( $_POST[ 'easy_image_gallery_2_link_images' ] ) );
	} else {
		update_post_meta( $post_id, '_easy_image_gallery_2_link_images', 'off' );
	}

	do_action( 'wpex_save_gallery_metabox', $post_id );

}
add_action( 'save_post', 'easy_image_gallery_2_save_post' );



/*
 		// hook into theme filters.
		\add_filter( 'wpex_main_metaboxes_post_types', [ self::class, 'metabox_main' ] );
		\add_filter( 'wpex_card_metabox_post_types', [ self::class, 'metabox_card' ] );
		\add_filter( 'wpex_metabox_array', [ self::class, 'metabox_media' ] );
		\add_filter( 'wpex_image_sizes_tabs', [ self::class, 'wpex_image_sizes_tabs' ], 50 );
		\add_filter( 'wpex_gallery_metabox_post_types', [ self::class, 'wpex_gallery_metabox_post_types' ] );
		\add_filter( 'wpex_dashboard_thumbnails_post_types', [ self::class, 'wpex_dashboard_thumbnails_post_types' ] );
	}
* */