WordPress Shortcode – Add Media Modal

0 Views

I’m creating a custom shortcode in WordPress and I’d like to allow the user select or upload some media using the media modal window as part of the process.

What is the best method to invoke the add media modal?

function CheesyEmbed_func($atts){

  $atts = shortcode_atts(array(
            'type' => '',
            'source' => ''
        ), $atts);

  if($atts['type'] == 'youtube'){
    $output = "<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/" . $atts['source'] . "?modestbranding=1&rel=0&showinfo=0&color=white&iv_load_policy=3' frameborder='0' allowfullscreen></iframe></div>";
    return $output;
  }

  if($atts['type'] == 'image'){
    $output = "<img src='" . $atts['source'] . "' class='img-responsive'>";
    return $output;
  }
}
add_shortcode('CheesyEmbed','CheesyEmbed_func');
Post Views: 0

Related posts

1 comment 

  1. function CheesyEmbed_func($atts){

    $atts = shortcode_atts(array(
        'type' => '',
        'source' => ''
    ), $atts);

    ob_start(); ?>
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Media</button>
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
    <?php
    $output = ob_get_clean();

    if($atts['type'] == 'youtube'){
        $output .= "<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/" . $atts['source'] . "?modestbranding=1&rel=0&showinfo=0&color=white&iv_load_policy=3' frameborder='0' allowfullscreen></iframe></div>";
    }

    if($atts['type'] == 'image'){
        $output .= "<img src='" . $atts['source'] . "' class='img-responsive'>";
    }

    else{
        $output .= 'No Content Here';
    }

    $output .= '</div></div></div></div>';

    return $output;

}

add_shortcode('CheesyEmbed','CheesyEmbed_func');

    If you are using Bootstrap the above code should work. If not you can use other methods to fire modal window, and edit the html by using same logic.

    You can Add Upload button with type attribute like so:

    if($atts['type'] == 'upload'){
    $output .= "<form action='somewhere.php'><input id='upload' type='file'><input type='submit' value='Upload'></form>";
}

    You can handle user’s selection with jquery like this:

    $("#myModal").on("click", "img, iframe", function () {
    //Append this somewhere else in the page.
    //Or upload $atts['source'] value to server. etc
});
$( "#myModal form" ).submit(function(e) {
    //Do something
});

    Hope that helps. If not feel free to ask!

Comments are closed.