Wordpress custom meta box Загрузка нескольких изображений

Question

Я работаю с настраиваемым типом сообщения, в котором я добавил пользовательский мета-ящик. В пользовательском мета-окне я пытаюсь добавить медиа-загрузчик для нескольких изображений. С этим загрузчиком я хочу хранить несколько идентификаторов изображений в массиве. Проблема в том, что мне удается сохранить только один ID, даже когда я выбираю несколько изображений.

Я действительно надеюсь, что кто-то может мне помочь.

Мои JS:

jQuery(document).ready(function(){ 
    var addButton = document.getElementById('last-opp-bilde'); 
    var deleteButton = document.getElementById('fjern-bilde'); 
    var img = document.getElementById('image-tag'); 
    var hidden = document.getElementById('img-hidden-field'); 
    var imageUploader = wp.media({ 
    title: 'Velg bilde', 
    button: { 
     text: 'Bruk dette bildet' 
    }, 
    multiple: true 
    }); 

    addButton.addEventListener('click', function() { 
    if (imageUploader) { 
     imageUploader.open(); 
    } 
    }); 

    imageUploader.on('select', function() { 
    var attachment = imageUploader.state().get('selection').first().toJSON(); 
    img.setAttribute('src', attachment.url); 
    img.setAttribute('style', 'width: 50%;'); 
    hidden.setAttribute('value', JSON.stringify([ { id: attachment.id, url: attachment.url}])); 
    }); 

    deleteButton.addEventListener('click', function(){ 
    img.removeAttribute('src'); 
    hidden.removeAttribute('value'); 
    img.removeAttribute('style'); 
    }); 

    window.addEventListener('DOMContentLoaded', function(){ 
    img.setAttribute('src', imageUploads.imageData.src); 
    img.setAttribute('style', 'width: 50%;'); 
    hidden.setAttribute('value', JSON.stringify([imageUploads.imageData])); 
    }); 
}); 

Answer 1

Я на самом деле удалось решить эту проблему. Вот JS, который сделал эту работу для меня.

jQuery(document).ready(function(){ 
    var addButton = document.getElementById('last-opp-bilde'); 
    //var deleteButton = document.getElementById('fjern-bilde'); 
    var img = document.getElementById('image-tag'); 
    var hidden = document.getElementById('img-hidden-field'); 
    var imageUploader = wp.media({ 
    title: 'Velg bilde', 
    button: { 
     text: 'Velg bilde(r)' 
    }, 
    multiple: 'add' 
    }); 

    addButton.addEventListener('click', function() { 
    if (imageUploader) { 
     imageUploader.open(); 
    } 
    }); 

    imageUploader.on('open',function() { 
    var selection = imageUploader.state().get('selection'); 
    ids = jQuery('#img-hidden-field-selected').val().split(','); 
     ids.forEach(function(id) { 
    attachment = wp.media.attachment(id); 
    attachment.fetch(); 
    selection.add(attachment ? [ attachment ] : []); 
    }); 
    }); 

    imageUploader.on('close', function() { 
    //var attachment = imageUploader.state().get('selection').first().toJSON(); 
    var attachment = imageUploader.state().get('selection'); 
    var ids = attachment.map(function (attachment) { 
     return attachment.id; 
    }); 
    hidden.setAttribute('value', ids.join(',')); 
    }); 

    imageUploader.on('select', function() { 
    //var attachment = imageUploader.state().get('selection').first().toJSON(); 
    var attachment = imageUploader.state().get('selection'); 
    var ids = attachment.map(function (attachment) { 
     return attachment.id; 
    }); 
    hidden.setAttribute('value', ids.join(',')); 
    }); 
});