Saturday, August 27, 2022
HomeWordPress Developmentcode - Is there a method to programmatically cross a class to...

code – Is there a method to programmatically cross a class to the Media Library selector?


Within the admin panel of my plugin I’m able to make a kind that uploads a picture to the media library. The shape’s motion web page redirects to a submit processing file that will get an $attachment_id, after which efficiently provides a class to the newly uploaded picture. So as to add a class to the newly uploaded picture, I take advantage of this WP perform:

wp_set_object_terms($attachment_id, 'lede-image', 'class', true);

However now I need to advance the shape to permit the admin to pick already current photos from the Media Library, utilizing the window that pops up with all of the media library information you possibly can select from. I need my consumer to have the ability to choose a kind of, then click on “Use this picture” and have it routinely assigned my customized class.

Sure, I do know that within the Media Library panel you’ve gotten choices in the best sidebar, and I do have classes enabled. Nonetheless, I require a means of including the class programmatically, relatively than anticipating my consumer to sort it in each time he uploads a picture (he will not).

Ideally, by the point the Media Library choice window pops up, or by the point the consumer clicks on a picture he likes, there’ll already be the best class inserted within the class discipline.

Is there php or javascript that may make this occur? Do I’ve to cross a property or worth someplace? I’ve some relatively prolonged code I discovered elsewhere that does the Media Library popup simply nice, if it is vital to this dialogue, right here it’s:

        <?php
if ( isset( $_POST['submit_image_selector'] ) && isset( 
$_POST['image_attachment_id'] ) ) :
        update_option( 'media_selector_attachment_id', absint( 
$_POST['image_attachment_id'] ) );
    endif;
    wp_enqueue_media();
    ?><kind technique='submit'>
        <div class="image-preview-wrapper">
            <img id='image-preview' src="https://wordpress.stackexchange.com/questions/409018/<?php echo 
wp_get_attachment_url( get_option("media_selector_attachment_id' ) 
); ?>' width="200">
        </div>
        <enter id="upload_image_button" sort="button" 
class="button" worth="<?php _e( 'Add picture' ); ?>" />
        <enter sort="hidden" title="image_attachment_id" 
id='image_attachment_id' worth="<?php echo get_option( 
"media_selector_attachment_id' ); ?>'>
        <enter sort="submit" title="submit_image_selector" 
worth="Save" class="button-primary">
    </kind>
    <?php
    $my_saved_attachment_post_id = get_option( 
'media_selector_attachment_id', 0 );
        ?><script sort="textual content/javascript">
            jQuery( doc ).prepared( perform( $ ) {
                // Importing information
                var file_frame;
                var wp_media_post_id = 
wp.media.mannequin.settings.submit.id; // Retailer the previous id
                var set_to_post_id = <?php echo 
$my_saved_attachment_post_id; ?>; // Set this
                jQuery('#upload_image_button').on('click on', perform( occasion ){
                occasion.preventDefault();
                // If the media body already exists, reopen it.
                if ( file_frame ) {
                    // Set the submit ID to what we wish
                    file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
                    // Open body
                    file_frame.open();
                    return;
                } else {
                    // Set the wp.media submit id so the uploader grabs the ID we wish when initialised
                    wp.media.mannequin.settings.submit.id = set_to_post_id;
                }
                // Create the media body.
                file_frame = wp.media.frames.file_frame = wp.media({
                    title: 'Choose picture to add',
                    button: {
                        textual content: 'Use this picture',
                    },
                    a number of: false // Set to true to permit a number of information to be chosen
                });
                // When a picture is chosen, run a callback.
                file_frame.on( 'choose', perform() {
                    // We set a number of to false so solely get one picture from the uploader
                    attachment = file_frame.state().get('choice').first().toJSON();
                    // Do one thing with attachment.id and/or attachment.url right here
                    $( '#image-preview' ).attr( 'src', attachment.url ).css( 'width', 'auto' );
                    $( '#image_attachment_id' ).val( attachment.id );
                    // Restore the principle submit ID
                    wp.media.mannequin.settings.submit.id = wp_media_post_id;
                });
                    // Lastly, open the modal
                    file_frame.open();
            });
            // Restore the principle ID when the add media button is pressed
            jQuery( 'a.add_media' ).on( 'click on', perform() {
                wp.media.mannequin.settings.submit.id = wp_media_post_id;
            });
        });
    </script>

enter image description here

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments