Skip to content

Instantly share code, notes, and snippets.

@purethemes
Last active December 16, 2015 05:08
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save purethemes/5381815 to your computer and use it in GitHub Desktop.
Save purethemes/5381815 to your computer and use it in GitHub Desktop.
Using new Media Uploader in Option Tree for gallery. Credits for idea how to handle it to shibashake.com. Thanks!
<?php
function ot_type_puregallery( $args = array() ) {
/* turns arguments array into variables */
extract( $args );
global $post;
$current_post_id = $post->ID;
/* verify a description */
$has_desc = $field_desc ? true : false;
/* format setting outer wrapper */
echo '<div class="format-setting type-post_attachments_checkbox type-checkbox ' . ( $has_desc ? 'has-desc' : 'no-desc' ) . '">';
/* description */
echo $has_desc ? '<div class="description">' . htmlspecialchars_decode( $field_desc ) . ' <br/><a href="#" class="delete-gallery">Delete gallery</a></div>' : '';
/* format setting inner wrapper */
echo '<div class="format-setting-inner">';
/* setup the post types */
$post_type = isset( $field_post_type ) ? explode( ',', $field_post_type ) : array( 'post' );
global $pagenow;
if($pagenow == 'themes.php' ) {
$args = array(
'post_type' => 'attachment',
'post_status' => 'inherit',
'post_mime_type' => 'image',
'post__in' => explode( ",", $field_value),
'posts_per_page' => '-1',
'orderby' => 'post__in'
);
} else {
$args = array(
'post_type' => 'attachment',
'post_status' => 'inherit',
'post__in' => explode( ",", $field_value),
'post_mime_type' => 'image',
'posts_per_page' => '-1',
'orderby' => 'post__in'
);
}
/* query posts array */
$query = new WP_Query( $args );
/* has posts */ echo '<input type="hidden" name="' . esc_attr( $field_name ) . '" id="' . esc_attr( $field_id ) . '" value="' . esc_attr( $field_value ) . '" class="widefat option-tree-ui-input ' . esc_attr( $field_class ) . '" />';
if ( $query->have_posts() ) {
echo '<ul style="margin:0px" id="option-tree-gallery-list">';
while ( $query->have_posts() ) {
$query->the_post();
echo '<li>';
$thumbnail = wp_get_attachment_image_src( $query->post->ID, 'thumbnail');
echo '<img src="' . $thumbnail[0] . '" width="60" height="60" />';
echo '</li>';
}
echo "</ul>";
echo '<a title="Add images" class="option-tree-attachments-update option-tree-ui-button blue right hug-right addgallery" href="#">Edit Slider Gallery</a>';
} else {
echo '<ul style="margin:0px" id="option-tree-gallery-list"></ul><p>' . __( 'No Gallery', 'option-tree' ) . '</p>';
echo '<a title="Add images" class="option-tree-attachments-update option-tree-ui-button blue right hug-right addgallery" href="#">Create Slider Gallery</a>';
}
echo '</div>';
echo '</div>';
}
//fake and dirty shortcode for stupid media uploader
function media_view_settings($settings, $post ) {
if (!is_object($post)) return $settings;
$shortcode = '[gallery ';
$ids = get_post_meta($post->ID, 'pp_gallery_slider', TRUE);
$ids = explode(",", $ids);
if (is_array($ids))
$shortcode .= 'ids = "' . implode(',',$ids) . '"]';
else
$shortcode .= "id = \"{$post->ID}\"]";
$settings['neviagallery'] = array('shortcode' => $shortcode);
return $settings;
}
add_filter( 'media_view_settings','media_view_settings', 10, 2 );
function ot_type_attachments_ajax_update() {
if ( !empty( $_POST['ids'] ) ) {
$args = array(
'post_type' => 'attachment',
'post_status' => 'inherit',
'post__in' => $_POST['ids'],
'post_mime_type' => 'image',
'posts_per_page' => '-1',
'orderby' => 'post__in'
);
$return = '';
/* query posts array */
$query = new WP_Query( $args );
$post_type = isset( $field_post_type ) ? explode( ',', $field_post_type ) : array( 'post' );
/* has posts */
if ( $query->have_posts() ) {
while ( $query->have_posts() ) {
$query->the_post();
$return .= '<li>';
$thumbnail = wp_get_attachment_image_src( $query->post->ID, 'thumbnail');
$return .= '<img src="' . $thumbnail[0] . '" width="60" height="60" />';
$return .= '</li>';
}
} else {
$return .= '<p>' . __( 'No Posts Found', 'option-tree' ) . '</p>';
}
echo $return;
exit();
}
}
add_action( 'wp_ajax_attachments_update', 'ot_type_attachments_ajax_update' );
?>
<?php
$gallerymb = array(
'id' => 'incr_metabox_featue',
'title' => 'Post options',
'desc' => 'Select post display options.',
'pages' => array( 'post' ),
'context' => 'normal',
'priority' => 'high',
'fields' => array(
array(
'label' => 'Gallery slider (use when Post Type is set to Gallery)',
'id' => 'pp_gallery_slider',
'type' => 'puregallery',
'desc' => 'Click Create Slider to create your gallery for slider.',
'post_type' => 'post',
),
)
);
ot_register_meta_box( $gallerymb );
?>
(function($){
$(document).ready(function(){
$('a.delete-gallery').click(function(e){
e.preventDefault();
$("#pp_gallery_slider").val('');
$('#option-tree-gallery-list').html(' ')
})
wp.media.neviagallery = {
frame: function() {
if ( this._frame )
return this._frame;
var selection = this.select();
this._frame = wp.media({
id: 'my-frame',
frame: 'post',
state: 'gallery-edit',
title: wp.media.view.l10n.editGalleryTitle,
editing: true,
multiple: true,
selection: selection
});
this._frame.on( 'update',
function() {
var controller = wp.media.neviagallery._frame.states.get('gallery-edit');
var library = controller.get('library');
// Need to get all the attachment ids for gallery
var ids = library.pluck('id');
$('#pp_gallery_slider').val(ids);
//update gallery list
$('#option-tree-gallery-list').slideUp();
$.ajax({
type: 'POST',
url: ajaxurl,
dataType:'html',
data: {
action: 'attachments_update',
ids: ids
},
success:function(res) {
$('#option-tree-gallery-list').html(res).slideDown();
$('#option-tree-gallery-list').next('p').hide();
}
});
});
return this._frame;
},
// Gets initial gallery-edit images. Function modified from wp.media.gallery.edit
// in wp-includes/js/media-editor.js.source.html
select: function() {
var shortcode = wp.shortcode.next( 'gallery', wp.media.view.settings.neviagallery.shortcode ),
defaultPostId = wp.media.gallery.defaults.id,
attachments, selection;
// Bail if we didn't match the shortcode or all of the content.
if ( ! shortcode )
return;
// Ignore the rest of the match object.
shortcode = shortcode.shortcode;
if ( _.isUndefined( shortcode.get('id') ) && ! _.isUndefined( defaultPostId ) )
shortcode.set( 'id', defaultPostId );
attachments = wp.media.gallery.attachments( shortcode );
selection = new wp.media.model.Selection( attachments.models, {
props: attachments.props.toJSON(),
multiple: true
});
selection.gallery = attachments.gallery;
// Fetch the query's attachments, and then break ties from the
// query to allow for sorting.
selection.more().done( function() {
// Break ties with the query.
selection.props.set({ query: false });
selection.unmirror();
selection.props.unset('orderby');
});
return selection;
},
init: function() {
$('.addgallery').live('click', function( event ){
event.preventDefault();
wp.media.neviagallery.frame().open();
});
}
};
wp.media.neviagallery.init();
});
})(this.jQuery);
#option-tree-gallery-list li {
float:left;
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
padding: 5px;
margin:5px
}
#option-tree-gallery-list li img {
display: block
}
#option-tree-attachments-list { overflow: auto; max-height: 350px}
#post .format-setting-inner p{
width: auto !important;
padding-right: 15px;
}
@valendesigns
Copy link

Hey I'm not clear on what the shortcode does. Could you explain that code above?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment