native-gallery-slideshow/native-gallery-slideshow.php at master · isabisa/native-gallery-slideshow · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<?php
/**
* Plugin Name: Native Gallery Slideshow
* Plugin URI: https://github.com/isabisa/native-gallery-slideshow
* Description: Adds a select box to the native WordPress gallery screen, which allows you to choose between the default grid style gallery or slideshow. Uses Cycle2 for the slideshow functionality.
* Version: 1.0
* Author: Alisa R. Herr
* Author URI: http://www.cuberis.com
* License: GPL2
*/

/**
 *	Custom shortcode for gallery
 */

include( plugin_dir_path(__FILE__) . 'custom-gallery-shortcode.php' );

/**
 *	Enqueue styles & scripts
 */

add_action('wp_enqueue_scripts', 'ngs_enqueue_scripts');

function ngs_enqueue_scripts() {
	wp_enqueue_style( 'ngs-style', plugins_url( 'css/style.css', __FILE__ ) );
	wp_enqueue_script( 'cycle2', plugins_url( 'js/jquery.cycle2.js', __FILE__ ), array( 'jquery' ), '2.1.5', true );
	wp_enqueue_script( 'cycle2-swipe', plugins_url( 'js/jquery.cycle2.swipe.min.js', __FILE__ ), array( 'jquery', 'cycle2' ), '20140128', true );
	wp_enqueue_script( 'ngs-scripts', plugins_url( 'js/custom.js', __FILE__ ), array( 'jquery', 'cycle2' ), '1.0', true );
}

/**
 *	Add the options to the gallery screen in the WordPress media manager
 *	Code courtesy onetrickpony: http://wordpress.stackexchange.com/a/90443/35628
 */

add_action( 'print_media_templates', 'ngs_add_gallery_options' );

function ngs_add_gallery_options() {

	// define your backbone template
	?>
	<script type="text/html" id="tmpl-ngs-custom-gallery-options">
		<label class="setting">
		<span><?php _e('Type'); ?></span>
		<select data-setting="type">
		<option value="grid">Grid</option>
		<option value="slideshow">Slideshow</option>
		</select>
		</label>
		<label class="setting">
		<span><?php _e('Size'); ?></span>
		<select data-setting="size">
		<option value="thumbnail">Thumbnail</option>
		<option value="medium">Medium</option>
		<option value="large">Large</option>
		<option value="full">Full</option>
		</select>
		</label>
	</script>

	<script>
		jQuery(document).ready(function(){

			// add your shortcode attribute and its default value to the gallery settings list;
			_.extend(wp.media.gallery.defaults, {
				size: 'thumbnail',
				type: 'slideshow',
				link: 'file'
			});

			// merge default gallery settings template with yours
			wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
				template: function(view){
					return wp.media.template('gallery-settings')(view)
						+ wp.media.template('ngs-custom-gallery-options')(view);
				}
			});

		});
	</script>
	<?php

	// TODO: Look at: http://shibashake.com/wordpress-theme/how-to-expand-the-wordpress-media-manager-interface
	// Figure out how to make size only appear if type is grid. Maybe this will help: http://phpxref.ftwr.co.uk/wordpress/nav.html?wp-includes/js/media-views.js.source.html line 6139

}