0

I have created a Wordpress (meta) function in which you can add another feautured image. The workflow is pretty much the same as the featured image: The media library gets opened, you select 1 image and click "insert". As a result the chosen image will be displayed, exactly like the usual feauted image. Now I want the ability to click on the chosen image, open the media library and make the chosen image selected. So you can easily change the ALT tag (for exmple) for THAT image.

So: How can I open the Media Library in Wordpress and open (select) that specific image by ID? See the code below. So I want to create a click function ON the selected image, to open the library.

<? add_action('add_meta_boxes', 'mm_add_custom_page_image_metaboxes');
function mm_add_custom_page_image_metaboxes() {
add_meta_box(
    'mm_page_image_meta',
    'Extra featured image',
    'mm_page_image_meta',
    array('page', 'post'),
    'side',
    'default'
);
} 

function mm_page_image_meta() {
global $post;
wp_nonce_field( basename( __FILE__ ), 'page_extra_image_fields' );
$page_extra_image = get_post_meta( $post->ID, 'page_extra_image', true );
wp_enqueue_media(); ?>

<div class="image-and-buttons">
    <span class='image-preview-wrapper'>
        <? if(!empty($page_extra_image)):?>
            <? $extraImageUrl = wp_get_attachment_image_src( $page_extra_image, array('700', '600'), "", array( "class" => "image-preview_first img-responsive" ) );  ?>
            <img src="<?= $extraImageUrl[0];?>" class="image-preview_first" style="width: 100%; height: auto;">
        <? endif;?>
    </span>
    <? if(!empty($page_extra_image)):?>
        <input type="button" class="remove_image_button_first button" value="<?php _e( 'Delete image' ); ?>" />
    <? endif;?>
    <input type="button" class="upload_image_button_first button" value="<?php _e( 'Upload image' ); ?>" />
    <input type='hidden' name='page_extra_image' class='page_extra_image' value='<?php echo $page_extra_image; ?>'>
</div>
<?php
}
add_action( 'admin_footer', 'media_selector_print_scripts' );
function media_selector_print_scripts() {
$my_saved_attachment_post_id = get_option( 'page_extra_image', 0 );
?><script type='text/javascript'>
    jQuery( document ).ready( function( $ ) {
        var file_frame;
        var wp_media_post_id = wp.media.model.settings.post.id; // Store the old id
        var set_to_post_id = "<?= !empty($my_saved_attachment_post_id) ? $my_saved_attachment_post_id : ""; ?>"; // Set this jQuery('.upload_image_button_first').on('click', function( event ){
            event.preventDefault();
            if ( file_frame ) {
                file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
                file_frame.open();
                return;
            } else {
                wp.media.model.settings.post.id = set_to_post_id;
            }
            file_frame = wp.media.frames.file_frame = wp.media({
                title: 'Select an image to upload',
                button: {
                    text: 'Use this image',
                },
                multiple: false
            });
            file_frame.on( 'select', function() {
                attachment = file_frame.state().get('selection').first().toJSON();
                $( '.image-preview_first' ).attr( 'src', attachment.url ).css( 'width', 'auto' );
                $( '.page_extra_image' ).val( attachment.id );

                wp.media.model.settings.post.id = wp_media_post_id;
            });
            file_frame.open();
        });
        jQuery( 'a.add_media' ).on( 'click', function() {
            wp.media.model.settings.post.id = wp_media_post_id;
        });

        jQuery('.remove_image_button_first').on( 'click', function() {
            $( '.image-preview_first' ).attr( 'src', "" ).css( 'width', 'auto' );
            $( '.page_extra_image' ).val("");
            $('.remove_image_button_first').hide();
        });
    });
</script><?php
}
function mm_save_page_image_meta( $post_id, $post ) {
if ( ! current_user_can( 'edit_post', $post_id ) ) {
    return $post_id;
}
if ( ! isset( $_POST['page_extra_image'] ) || ! wp_verify_nonce( $_POST['page_extra_image_fields'], basename(__FILE__) ) ) {
    return $post_id;
}

$page_meta['page_extra_image'] = ( $_POST['page_extra_image'] );

foreach ( $page_meta as $key => $value ) :
    if ( 'revision' === $post->post_type ) {
        return;
    }
    if ( get_post_meta( $post_id, $key, false ) ) {
        update_post_meta( $post_id, $key, $value );
    } else {
        add_post_meta( $post_id, $key, $value);
    }
    if ( ! $value ) {
        delete_post_meta( $post_id, $key );
    }
endforeach;
}
add_action( 'save_post', 'mm_save_page_image_meta', 1, 2 );
  • Anybody who can help me out? Thanks a lot in advance. – user137519 Mar 4 at 7:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.