分类导航
PHPJavaPythonC#C&C++RubyVBasp.NetGoPerlDjangoDelphiJspSpringLuaLaravelMybatisAspGroovyThinkPHP

php – 从Metabox调用WordPress Gallery Uploader / Selector

PHP   发布时间：2022-04-01  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了php – 从Metabox调用WordPress Gallery Uploader / Selector，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
当我单击帖子/页面上的添加媒体按钮时,我可以选择添加媒体.选择媒体后,单击“插入到帖子”,然后插入图像.但是,还有另一个选项,位于左侧边栏.我可以点击创建图库.图像选择过程是相同的,但是当我单击“创建新图库”时,它会转到一个新框架,允许我编辑图像的顺序.

第二个窗口就是我追求的目标.我从metabox调用框架,我已经成功地让它抓住单个或多个图像并将ID保存为字符串,以及将缩略图直接插入预览框.我找不到任何关于调用Gallery框架的信息.

我目前的代码如下：

jQuery('#fg_SELEct').on('click',function(event){

    event.preventDefault();

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

    // Create the media frame.
    file_frame = wp.media.frame = wp.media({
        title: "SELEct Images For Gallery",button: {text: "SELEct",},library : { type : 'image'},multiple: true // Set to true to allow multiple files to be SELEcted
    });

    file_frame.on('open',function() {
        var SELEction = file_frame.state().get('SELEction');
        ids = jQuery('#fg_metadata').val().split(',');
        ids.forEach(function(id) {
            attachment = wp.media.attachment(id);
            attachment.fetch();
            SELEction.add( attachment ? [ attachment ] : [] );
        });
    });

    file_frame.on('ready',function() {
        // Here we can add a custom class to our media modal.
        // .media-modal doesn't exists before the frame is
        // completly initialised.
        $( '.media-modal' ).addClass( 'no-sidebar' );
    });

    // When an image is SELEcted,run a callBACk.
    file_frame.on('SELEct',function() {
        var imagEIDArray = [];
        var imageHTML = '';
        var metadataString = '';
        images = file_frame.state().get('SELEction');
        images.each(function(imagE) {
            imagEIDArray.push(image.attributes.id);
            imageHTML += '<li><button></button><img id="'+image.attributes.id+'" src="'+image.attributeS.Url+'"></li>';
        });
        metadataString = imagEIDArray.join(",");
        if(metadataString){
            jQuery("#fg_metadata").val(metadataString);
            jQuery("#featuredgallerydiv ul").html(imageHTML);
            jQuery('#fg_SELEct').text('Edit SELEction');
            jQuery('#fg_removeall').addClass('visible');
        }
    });

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

});

有任何想法吗？

编辑：

我已经把它直接调用了画廊,没有任何侧边栏等等.但是,它现在忽略了on(‘SELEct’)调用.我猜画廊在选择图像时会发出不同的电话？

jQuery(document).ready(function($){

// Uploading files
var file_frame;

jQuery('#fg_SELEct').on('click',reopen it.
    if ( file_frame ) {
        file_frame.open();
        return;
    }

    // Create the media frame.
    file_frame = wp.media.frame = wp.media({
        frame: "post",state: "featured-gallery",button: {text: "Edit Image Order"},multiple: true
    });

    file_frame.states.add([
        new wp.media.controller.Library({
            id:         'featured-gallery',title:      'SELEct Images for Gallery',priority:   20,toolbar:    'main-gallery',filterable: 'uploaded',library:    wp.media.query( file_frame.options.library ),multiple:   file_frame.options.multiple ? 'reset' : false,editable:   true,allowLocalEdits: true,displaySetTings: true,displayUserSetTings: true
        }),]);

    file_frame.on('open',');
        if (!empty(ids)) {
            ids.forEach(function(id) {
                attachment = wp.media.attachment(id);
                attachment.fetch();
                SELEction.add( attachment ? [ attachment ] : [] );
            });
        }
    });

    file_frame.on('ready',function() {
        // Here we can add a custom class to our media modal.
        // .media-modal doesn't exists before the frame is
        // completly initialised.
        $( '.media-modal' ).addClass( 'no-sidebar' );
    });

    file_frame.on('change',function() {
        // Here we can add a custom class to our media modal.
        // .media-modal doesn't exists before the frame is
        // completly initialised.
        setTimeout(function(){
            $('.media-menu a:first-child').text('← Edit SELEction').addClass('button').addClass('button-large').addClass('button-priMary');
        },0);
    });

    // When an image is SELEcted,run a callBACk.
    file_frame.on('set',function() {
        alert('test');
    });

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

});

编辑2：

好的,所以我已经把所有东西都正确地解雇了.但我无法破译输出的图库代码.

// When an image is SELEcted,run a callBACk.
    file_frame.on('update',");
        if (metadataString) {
            jQuery("#fg_metadata").val(metadataString);
            jQuery("#featuredgallerydiv ul").html(imageHTML);
            jQuery('#fg_SELEct').text('Edit SELEction');
            jQuery('#fg_removeall').addClass('visible');
        }
    });

$imageArray或$imageHTML没有任何结果. $image是东西,它是[对象对象].

编辑3：如下面评论中所述,编辑2中的代码的主要问题是,当使用Gallery时,您必须调用“库”而不是“选择”.

// Uploading files
var file_frame;

jQuery('#fg_SELEct').on('click',state: "gallery",multiple: true
    });

    file_frame.on('open',function() {
        var SELEction = file_frame.state().get('SELEction');
        var ids = jQuery('#fg_metadata').val();
        if (ids) {
            idsArray = ids.split(',');
            idsArray.forEach(function(id) {
                attachment = wp.media.attachment(id);
                attachment.fetch();
                SELEction.add( attachment ? [ attachment ] : [] );
            });
        }
    });

    // When an image is SELEcted,function() {
        var imagEIDArray = [];
        var imageHTML = '';
        var metadataString = '';
        images = file_frame.state().get('library');
        images.each(function(attachment) {
            imagEIDArray.push(attachment.attributes.id);
            imageHTML += '<li><button></button><img id="'+attachment.attributes.id+'" src="'+attachment.attributeS.Url+'"></li>';
        });
        metadataString = imagEIDArray.join(",");
        if (metadataString) {
            jQuery("#fg_metadata").val(metadataString);
            jQuery("#featuredgallerydiv ul").html(imageHTML);
            jQuery('#fg_SELEct').text('Edit SELEction');
            jQuery('#fg_removeall').addClass('visible');
        }
    });

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

});

我现在遇到的主要问题是我无法通过选择打开图库编辑.我可以把它打开,但没有选择图像.我在调查那个.我也在考虑重新开放而不是创建新视图并发送预选.如果我进入选择窗口,然后是订单窗口,但是单击X关闭,我可以重新打开订单窗口.所以应该有办法.

编辑4

根据下面的答案中的代码,我已将预选代码更改为：

file_frame.on('open',function() {
        var library = file_frame.state().get('library');
        var ids = jQuery('#fg_perm_metadata').val();
        if (ids) {
            idsArray = ids.split(',');
            idsArray.forEach(function(id) {
                attachment = wp.media.attachment(id);
                attachment.fetch();
                library.add( attachment ? [ attachment ] : [] );
            });
        }
    });

这允许我直接重新打开图库编辑状态并预先选择图像.但是,当我直接打开这个状态时,我无法点击取消图库(返回图像选择状态).单击该按钮/链接只会关闭框架.我尝试预填充库和选择,但这也不起作用.以下是来自media-views.js,似乎是控制该按钮的内容.它不是将状态更改为特定状态,而是将其更改为先前的状态.由于我们直接打开gallery-edit,因此没有过去的状态.我想知道是否可以打开图库,然后打开,更改为图库编辑.立即执行以便用户看不到,但是它会将过去的状态带入系统.

gallerymenu: function( view ) {
    var lastState = this.lastState(),previous = lastState && lastState.id,frame = this;

编辑5：

终于想通了.我根本无法完成上述任务,我不知道为什么.因此,可能有更好的方法来执行此操作,涉及该代码.如果是这样,我很想知道.

file_frame.on('open',function() {
        var SELEction = file_frame.state().get('SELEction');
        var library = file_frame.state('gallery-edit').get('library');
        var ids = jQuery('#fg_perm_metadata').val();
        if (ids) {
            idsArray = ids.split(',');
            idsArray.forEach(function(id) {
                attachment = wp.media.attachment(id);
                attachment.fetch();
                SELEction.add( attachment ? [ attachment ] : [] );
            });
            file_frame.setState('gallery-edit');
            idsArray.forEach(function(id) {
                attachment = wp.media.attachment(id);
                attachment.fetch();
                library.add( attachment ? [ attachment ] : [] );
            });
        }
    });

最终编辑

我的代码现在完全正常工作,我很感激帮助！如果您想看到它的实际效果,请查看http://wordpress.org/plugins/featured-galleries/

解决方法

我对WP比较陌生.事实上,我正在构建我的第一个WP主题,我和你一样陷入了同样的问题.感谢您的代码,我可以访问Gallery页面.幸运的是,我已经保存了图像.这是我的代码： 
// when click Insert Gallery,run callBACk
wp_media_frame.on('update',function(){
    var library = wp_media_frame.state().get('library');
    var images  = [];
    var image_ids = [];
    thumb_wraper.html('');

    library.map( function( image ) {
        image = image.toJSON();
        images.push(image.url);
        image_ids.push(image.id);
        thumb_wraper.append('<img src="' + image.url + '" alt="" />');
    });
});

我发现你应该得到’图书馆’而不是’选择’.

编辑：
我已经想出如何回到画廊编辑.这是我的完整代码：

$( '#btn_upload' ).on( 'click',function( event ) {
    event.preventDefault();

    var images = $( '#image_ids' ).val();
    var gallery_state = images ? 'gallery-edit' : 'gallery-library';

    // create new media frame
    // You have to create new frame every time to control the Library state as well as SELEcted images
    var wp_media_frame = wp.media.frames.wp_media_frame = wp.media( {
        title: 'My Gallery',// it has no effect but I really want to change the title
        frame: "post",toolbar: 'main-gallery',state: gallery_state,library: {
            type: 'image'
        },multiple: true
    } );

    // when open media frame,add the SELEcted image to Gallery
    wp_media_frame.on( 'open',function() {
        var images = $( '#image_ids' ).val();
        if ( !images )
            return;

        var image_ids = images.split( ',' );
        var library = wp_media_frame.state().get( 'library' );
        image_ids.forEach( function( id ) {
            attachment = wp.media.attachment( id );
            attachment.fetch();
            library.add( attachment ? [ attachment ] : [] );
        } );
    } );

    // when click Insert Gallery,run callBACk
    wp_media_frame.on( 'update',function() {

        var thumb_wrapper = $( '#thumb-wrapper' );
        thumb_wraper.html( '' );
        var image_urls = [];
        var image_ids = [];

        var library = wp_media_frame.state().get( 'library' );

        library.map( function( image ) {
            image = image.toJSON();
            image_urls.push( image.url );
            image_ids.push( image.id );
            thumb_wrapper.append( '<img src="' + image.url + '" alt="" />' );
        } );
    } );
} );

我想如果你重新打开现有的框架,它将始终保持初始状态,在你的情况下它是’画廊’.你必须每次都创建一个新的框架并检查是否有图像打开’gallery-edit’此外,我更喜欢’gallery-library’而不是’gallery’,因为我希望用户专注于我的画廊.

大佬总结

以上是大佬教程为你收集整理的php – 从Metabox调用WordPress Gallery Uploader / Selector全部内容，希望文章能够帮你解决php – 从Metabox调用WordPress Gallery Uploader / Selector所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：gallerymetaboxphpselectoruploader调用
猜你在找的PHP相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap