Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Wordpress old style thickbox on the page front end WordPress

  • SOLVED

Hello,

Can anyone please help me with a really simple function to put the old style thickbox onto the front end. To show/upload to the specified post id.

For example can the media uploader function call could look like this..

<?php frontend_media_uploader($post->ID); ?>


Then I will use a conditional statement to pull in the data.

<?php if ( $role == 'administrator' || $role == 'editor' ) { ?>

<div class="page-header">

<h4>Upload media</h4>

<?php frontend_media_uploader($post->ID); ?>

</div>

<?php } ?>


See screenshot: [[LINK href="http://i.imgur.com/k7ifqWH.png"]]http://i.imgur.com/k7ifqWH.png[[/LINK]]

Can someone please provide me a full working function for this.

Person who supply best solution will get full prize amount.


Many Thanks
Josh

2013-04-02 by Josh Cranwell

Answers (3)

2013-04-03

Daniel Yoen answers:

Hello,

Please try this :

frontend_media_uploader($post_id)
{ ?>

<input type="button" id="upload" value="Upload">

<script type="text/javascript">
jQuery(document).ready(function($) {
$('#upload').click(function() {
tb_show('Upload a Images', '<?php echo admin_url(); ?>media-upload.php?referer=uploads&type=image&TB_iframe=true&post_id=<?php echo $post_id; ?>', false);
return false;
});
});
</script>

<?php }

add_action('wp_enqueue_scripts', 'node_enqueue_scripts');
function node_enqueue_scripts()
{
wp_enqueue_style('thickbox', false);
wp_enqueue_script('jquery', false);
wp_enqueue_script('thickbox', false);
wp_enqueue_script('media-upload', false);
}

hope this help :-)

Josh Cranwell comments:

Hi Daniel,

This looks promising but I am getting a server error. Cant work it.

Can you help?

Thanks so much.
Josh

Daniel Yoen comments:

Sorry, remove ; in function

frontend_media_uploader($post_id);

to

frontend_media_uploader($post_id)

Josh Cranwell comments:

Hi Dan,

I just figured it out thanks.

But should post media appear, all I am seeing is...

http://i.imgur.com/r0RK0v7.png

Which is weird when I have media attached to this post already.

I double checked that my post ID is actually echo-ing. Could it be because I am using this on multisite?


I also added the word <strong>function</strong> infront of the first line of your code as I was still getting server error.


Thanks for your help.

Daniel Yoen comments:

Complete code :

function frontend_media_uploader($post_id)

{ ?>

<input type="button" id="upload" value="Upload">

<script type="text/javascript">

jQuery(document).ready(function($) {

$('#upload').click(function() {

tb_show('Upload a Images', '<?php echo admin_url(); ?>media-upload.php?referer=uploads&type=image&TB_iframe=true&post_id=<?php echo $post_id; ?>', false);

return false;

});

});

</script>



<?php }



add_action('wp_enqueue_scripts', 'node_enqueue_scripts');
function node_enqueue_scripts()

{

wp_enqueue_style('thickbox', false);
wp_enqueue_script('jquery', false);
wp_enqueue_script('thickbox', false);
wp_enqueue_script('media-upload', false);

}

Sorry, am not understand about this part :

<blockquote>But should post media appear, all I am seeing is...

http://i.imgur.com/r0RK0v7.png

Which is weird when I have media attached to this post already.

I double checked that my post ID is actually echo-ing. Could it be because I am using this on multisite?</blockquote>

Best,
Daniel

Josh Cranwell comments:

Hi Daniel.

Thanks. I have the code working. But it does not seem to be displaying attachments.

For example...

In the backend, I am seeing this... [[LINK href="http://i.imgur.com/qDtdH5N.png"]]http://i.imgur.com/qDtdH5N.png[[/LINK]]

On the frontend, I am seeing this... [[LINK href="http://i.imgur.com/GUzXeXd.png"]]http://i.imgur.com/GUzXeXd.png[[/LINK]]


They are the same post - so technically should be seeing the same thing content right?


I have tested the $post->id it definitely echo's my post ID which is <strong>87</strong>


Any ideas?


Thanks
Josh

Daniel Yoen comments:

Try this :

function frontend_media_uploader($post_id)
{ ?>

<input type="button" id="upload" value="Upload">

<script type="text/javascript">

jQuery(document).ready(function($) {

$('#upload').click(function() {

tb_show('Upload a Images', '<?php echo admin_url(); ?>media-upload.php?post_id=<?php echo $post_id; ?>&amp;type=image&amp;TB_iframe=true');
return false;

});

});

</script>

<?php }


add_action('wp_enqueue_scripts', 'node_enqueue_scripts');
function node_enqueue_scripts()
{

wp_enqueue_style('thickbox', false);
wp_enqueue_script('jquery', false);
wp_enqueue_script('thickbox', false);
wp_enqueue_script('media-upload', false);

}

hope this help :-)

Daniel

Josh Cranwell comments:

You are genius!!!!

Thank you so much for your help.


Josh

Daniel Yoen comments:

Glad to help :-)

Best,
Daniel

2013-04-02

Arnav Joy answers:

why you do not try this plugin

http://wordpress.org/extend/plugins/frontend-uploader/

Josh Cranwell comments:

Hi Arnav.

How are you.

I am ideally after a slighty rawer function using my method of insertion in my template files.



Thanks

2013-04-02

Francisco Javier Carazo Gil answers:

If you use it: http://wordpress.org/extend/plugins/frontend-uploader/

Then you can call, if you have activated the plugin, this function: upload_form( $atts, $content = null ) which is defined in frontend-uploader.php in line 549.