Uso de upload de mídia avançada do WordPress

Oi,

Atualmente, estou construindo um tema WordPress para um diretório de negócios online e preciso ter uma página de perfil de usuários que possa ser editada no front end do site.

De acordo com esta situação, comecei a usar o Media Uploader, a fim de permitir que o usuário final insira uma imagem de perfil.

Eu sei, atualmente existem muitos sites que mostram a forma de usar o novo Media Uploader 3.5, mas apenas em um local encontrei a forma de pré-selecionar a imagem usada pelo usuário até agora.

Este é o código completo:

HTML

<a href="javascript:void(0);" id="profile_picture" data-picture="350">
    <img src="http://www.image.to/display.jpg" />
</a>

JavaScript

var $profile_picture    =   $('#profile_picture');
var $media_dialog       =   null;

if($profile_picture.length > 0)
{
    $media_dialog   =   wp.media.frames.file_frame  =   wp.media(
        {
            title    : 'Choose a picture',
            button   : {
                text : 'Insert picture'
            },
            multiple : false
        }
    );

    $media_dialog.on(
        'open',
        function()
        {
            var selection   =   $media_dialog.state().get('selection');
            var image_id    =   $profile_picture.attr('data-picture');

            attachment  =   wp.media.attachment(image_id);
            attachment.fetch();
            selection.add(attachment ? [attachment] : []);
        }
    );

    $media_dialog.on(
        'select',
        function()
        {
            attachment  =   $media_dialog.state().get('selection').first().toJSON();
            $('#upload_image').val(attachment.url);
            $profile_picture.attr('data-picture', attachment.id).find('img').attr('scr', attachment.url);
        }
    );

    $profile_picture.on(
        'click',
        function(e)
        {
            // This is our link - make sure the browser doesn't handle it
            e.preventDefault();

            // Ignore right-clicks
            if(e.button == 2)
            {
                return;
            }

            if($media_dialog)
            {
                $media_dialog.open();
                return;
            }
        }
    );
}

Observe também que, se você tiver mais de uma imagem para selecionar, modifique o seguinte código:

$media_dialog.on(
    'open',
    function()
    {
        var selection   =   $media_dialog.state().get('selection');
        var image_id    =   $profile_picture.attr('data-picture');

        attachment  =   wp.media.attachment(image_id);
        attachment.fetch();
        selection.add(attachment ? [attachment] : []);
    }
);

Com isso:

$media_dialog.on(
    'open',
    function()
    {
        var selection   =   $media_dialog.state().get('selection');
        var ids  = '1,3,14,325,613,36';

        ids = ids.split(',');

        ids.forEach(
            function(id)
            {
                attachment  =   wp.media.attachment(id);
                attachment.fetch();
                selection.add(attachment ? [attachment] : []);
            }
        );
    }
);

NOTA: A solução para este problema que encontrei pode ser encontrada aqui .

Claro, você pode modificar o código para atender às suas necessidades. Coloquei aqui apenas o código para fins de demonstração.