Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$40
add an uploader for each category

I need to add an uploader in the edit page of each category
(and need to display this image in the category page, in the front-end of course).

Without plugin it's better.

This question has been answered.

Sébastien | French WordpressDesigner | 11/29/11 at 10:46am Edit

Previous versions of this question: 11/30/11 at 8:42am | 12/02/11 at 5:26am

The experts have suggested, on average, a prize of $25 for this question.

(4) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

Last edited:
11/29/11
10:51am
John Cotton says:
Hi Sebastien

I have done this, but it's not 3 lines of code - might you up the prize a little? :)

JC
Last edited:
11/29/11
10:51am
Peter Michael says:
Category Images II

You can integrate the plugin code into the theme as well.
- 11/30/11 6:59am
  
  Sébastien | French WordpressDesigner says:
  many problems with this plugin
  -image preview in admin : not refresh (must use ctrl+F5 to view the curent image)
  -not support png correctly (black background)

Last edited:
11/29/11
3:16pm

Luis Abarca says:

I'm using a similar way to show the cities here http://ihata.com.mx

Add a custom meta and functions



function get_the_category_image_src($term_ID)

{

    $taxonomy = 'category'; // or yourtaxonomy



    return get_metadata($taxonomy, $term_ID, 'thumbnail', true);

}



function the_category_image($term)

{

    $src = get_the_category_image_src($term->ID);

    

    if (!empty($src)) {

        echo '<img class="my-category-thumb" src="' . $src . '" />';

    }

}



add_action('category_edit_form', 'mycat_extra_fields' );

// or add_action( 'yourtaxonomy_edit_form', 'mycat_extra_fields' );



function mycat_extra_fields() 

{

    $thumbnail = get_metadata('category', $_GET['tag_ID'], 'thumbnail', true);

    // or 

    // $thumbnail = get_metadata('yourtaxonomy', $_GET['tag_ID'], 'thumbnail', true);



    include 'form.php';

}



// }}}

// {{{



function my_admin_scripts() 

{

    wp_enqueue_script('media-upload');

    wp_enqueue_script('thickbox');

    

    wp_register_script('my-custom-upload', get_bloginfo('template_url') . '/custom-upload.js', array('jquery', 'media-upload', 'thickbox'));



    wp_enqueue_script('my-custom-upload');    

}



/*

 * Add thickbox

 */

function my_admin_styles() 

{

    wp_enqueue_style('thickbox');

}



// Add js to uoload file 

add_action('admin_print_scripts', 'my_admin_scripts');

add_action('admin_print_styles', 'my_admin_styles');

form.php



<table class="form-table">

<tr class="form-field">

    <th><label for="upload_url">Image</label></th>



    <td>

        <input style="width: 70%" id="upload_url" type="text" name="upload_url" value="<?php echo $thumbnail  ?>" />

        <input style="width: 20%" class="button" id="btn-upload" type="button" value="Select a image" />

        <br />

        <span class="description">

            Upload a JPG, PNG or GIF image.</span>

    </td>

</tr>

custom-upload.js





(function($)

{

    $(document).ready(function() {

        $('#btn-upload').click(function() 

        {

            formfield = $('#upload_url').attr('name');

            tb_show('', 'media-upload.php?type=image&amp;TB_iframe=true&width=640&height=480');

            return false;

        });

        

        window.send_to_editor = function(html) 

        {

            url = $(html).attr('href');

            

            if ("" == url) {

                url = $('img', html).attr('href');

            }

            

            $('#upload_url').val(url);

            tb_remove();

        }

    });

})(jQuery);

In your theme loop or forehac ($terms as $term)....



...

    the_category_image($term);

...

Previous versions of this answer: 11/29/11 at 11:26am | 11/29/11 at 11:28am | 11/29/11 at 1:33pm | 11/29/11 at 3:16pm

11/29/11 11:07am

Luis Abarca says:

If you want to use custom taxonomy, you need to change the category with



add_action( 'yourtaxonomy_edit_form', 'jab_hotel_city_extra_fields' );

and



    $thumbnail = get_metadata('yourtaxonomy', $_GET['tag_ID'], 'thumbnail', true);

11/29/11 11:10am

Luis Abarca says:

opps, i miss the save action



 

add_action( 'edited_category', 'mycategory_save_extra_fields' );

// or

//add_action( 'edited_yourtaxonomy', 'mycategory_save_extra_fields' );

 

function mycategory_save_extra_fields( $cat_id ) 

{

    // image URL

    $url = trim($_POST['upload_url']);

    

    update_metadata('category', $cat_id, 'thumbnail', $url);

    // or 

    // update_metadata('yourtaxonomy', $cat_id, 'thumbnail', $url);

}

11/29/11 1:29pm

Sébastien | French WordpressDesigner says:

i have replace

wp_register_script('my-custom-upload', YOUR_PLUGIN_URL . '/custom-upload.js', array('jquery', 'media-upload', 'thickbox'));

wp_register_script('my-custom-upload', get_bloginfo('template_url').'/custom-upload.js', array('jquery', 'media-upload', 'thickbox'));

i have a button in my edit page of category
but when i click on the button nothing happened

11/29/11 1:34pm

Luis Abarca says:

i updated my first answer, the highlighted line was wrong,



wp_register_script('my-custom-upload', get_bloginfo('template_url') . '/custom-upload.js', array('jquery', 'media-upload', 'thickbox'));



 wp_enqueue_script('my-custom-upload');

11/29/11 1:43pm

Sébastien | French WordpressDesigner says:
ok, now the window of media-uploader appears.
the url of the image is in the field
i submit
but when i come back in the edit page of the category, the field "url of the image" is empty

11/29/11 1:54pm

Luis Abarca says:

opps :(, please update the form.php with this code



<table class="form-table">

<tr class="form-field">

    <th><label for="upload_url">Image</label></th>

    <td>

        <input style="width: 70%" id="upload_url" type="text" name="upload_url" value="<?php echo $thumbnail ?>" />

        <input style="width: 20%" class="button" id="btn-upload" type="button" value="Select a image" />

        <br />

        <span class="description">

            Upload a JPG, PNG or GIF image.</span>

    </td>

</tr>

</table>

11/29/11 1:58pm

Sébastien | French WordpressDesigner says:
nothing has changed :(
11/29/11 3:18pm

Luis Abarca says:
OK, Are you using the category or a custom taxonomy ?

Can you give me login or ftp to check was wrong ??, im using this code, but i edited because it contains a map and some other custom fields
11/29/11 4:21pm

Sébastien | French WordpressDesigner says:
i send you the login
11/29/11 4:38pm

Luis Abarca says:
OK, i'll check it in about 15 mins, meal time :D
11/29/11 5:33pm

Luis Abarca says:
OK, i'm working on it amigo
11/29/11 5:59pm

Luis Abarca says:
Its OK Sébastien, i almost forget to add the table for the custom meta data :(

But i added to your site in a new plugin, category-thumbs

11/29/11 6:02pm

Luis Abarca says:

For the record, you need to create a table for store the custom terms metadata



global $wpdb;

// table for custom metadata

$wpdb->categorymeta = $wpdb->prefix . 'categorymeta';



my_create_metadata_table('category'); 



/** 

 * create tables for taxonomies

 * Inspired by http://shibashake.com/wordpress-theme/add-term-or-taxonomy-meta-data

 */

function my_create_metadata_table($type) 

{

    global $wpdb;

    

    $table_name = $wpdb->prefix . $type . 'meta';

 

	if (!empty ($wpdb->charset)) {

		$charset_collate = "DEFAULT CHARACTER SET {$wpdb->charset}";

    }

    

	if (!empty ($wpdb->collate)) {

		$charset_collate .= " COLLATE {$wpdb->collate}";

    }

    

   $sql = "CREATE TABLE IF NOT EXISTS {$table_name} (

	  	    meta_id bigint(20) NOT NULL AUTO_INCREMENT,

	  	    {$type}_id bigint(20) NOT NULL default 0,

	  	    meta_key varchar(255) DEFAULT NULL,

	  	    meta_value longtext DEFAULT NULL,

	  	    UNIQUE KEY meta_id (meta_id)

	) {$charset_collate};";



	require_once(ABSPATH . 'wp-admin/includes/upgrade.php');

	dbDelta($sql);	



}

11/30/11 6:07am

Sébastien | French WordpressDesigner says:

Luis, it's really perfect !!
Thanx

I need just another advice :
do you know why the value change in the upload file, the event "change" seems not work

i use this code to display a preview

 <script type="text/javascript" charset="utf-8">

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

  

  

  $('#upload_url').change(function() {



  var url = $('#upload_url').val();

  var image = $('#image').attr('src', url);

 

image=url; 



    });    

  

  });

 </script>

11/30/11 6:09am

Sébastien | French WordpressDesigner says:

in form.php
i have add this code

    <?php if($thumbnail) { ?>

    <td><img id="image" src="<?php echo $thumbnail ?>" style="max-width:125px;">

    </td>

    <?php } ?>

11/30/11 6:46am

Sébastien | French WordpressDesigner says:
euh... how can i delete an icone ?

11/30/11 8:31am

Luis Abarca says:

Ummm, i have no delete, let me add it, to show a previw i use this



function my_manage_thumb(element)

{

        var url = element.val();



        thumb = $('#image');



        if (url != '') {            

            thumb.show();

            thumb.attr('src', url);

        } else {

            thumb.hide();

        }

}



$(document).ready(function() 

    {   

        $('#upload_url').change(function()

        {

            my_manage_thumb( $(this) );

        });

    });

11/30/11 8:41am

Sébastien | French WordpressDesigner says:
could you integrate this code please ?
and, please : how can i change the folder of the uploaded images (only for this plugin)

PS : i increase my fee :-)
11/30/11 2:19pm

Sébastien | French WordpressDesigner says:
Luis, have you read my last message please ? :-)

11/30/11 2:29pm

Luis Abarca says:

Hi Sébastien, sorry i just read your message.

If you left blank the input, it will delete it from the metadata. You can also add un "Delete" button to clear the text input.

I made this changes to your code.



add_action('edited_category', 'mycategory_save_extra_fields' );



function mycategory_save_extra_fields( $cat_id ) 

{

    // image URL

    $url = trim($_POST['upload_url']);

    

    if ( !empty($url) ) {

        update_metadata('category', $cat_id, 'thumbnail', $url);

    } else {

        delete_metadata('category', $cat_id, 'thumbnail');

    }

}

11/30/11 2:34pm

Sébastien | French WordpressDesigner says:
nothing happens when i click on the button

& please : how can i change the folder of the uploaded images (only for this plugin)
11/30/11 3:03pm

Luis Abarca says:
OK, i changed the JS file, now it works with custom-upload.js inside the plugin.
11/30/11 4:35pm

Luis Abarca says:
I'm testing the custom upload folder, i'll be right back after the meal time, in about 30 mins.

12/02/11 3:43am

Luis Abarca says:

Hey amigo, i finally cracked, now you have custom upload folder to that screen.

And for the record:



add_filter( 'swfupload_post_params',  'add_flash_upload_url_vars');



// add params to flash uploader

function add_flash_upload_url_vars( $params )

{

    if ( isset($_GET['customdir']) ) {

        $params['customdir'] = trim($_GET['customdir']);

    }

    

    return $params;

}



// add a custom upload folder to categories

add_filter('upload_dir', 'my_upload_dir', 10, 2);



// add a custom upload folder to categories

add_filter('upload_dir', 'my_upload_dir', 10, 2);



// Normal uploads uses the usual folders

if ( !isset($_REQUEST['customdir']) ) {

    remove_filter('upload_dir', 'my_upload_dir');

}



function my_upload_dir( $upload ) 

{

    $customdir = trim($_REQUEST['customdir']);

    

    if ( !empty($customdir) )  {        

        $upload['subdir']   = '/' . $customdir . $upload['subdir'];

        $upload['path']     = $upload['basedir'] . $upload['subdir'];

        $upload['url']      = $upload['baseurl'] . $upload['subdir'];

    }



    return $upload;

}

12/02/11 3:47am

Luis Abarca says:
Thanks for your comment Julio, regards !
12/02/11 5:31am

Sébastien | French WordpressDesigner says:
This is a very good work luis. I increase my fee. That's normal :-)

Last edited:
12/02/11
1:39am
Julio Potier says:
I think Luis deserves the price, all is ok Seb ? Or can i help more ?
- 12/02/11 5:26am
  
  Sébastien | French WordpressDesigner says:
  Tu as complètement raison Julio, Luis a largement mérité son prix. C'est du très beau boulot.
  Merci pour ta proposition d'aide :-)
  
  Tu es français je crois. ça fait plaisir de voir un compatriote ici :-)
  
  ----
  
  You're right Julio. Luis deserves the price. It's a very great work, and a very good plugin.
- 12/02/11 5:32am
  
  Julio Potier says:
  Oui et "Gregory Viguier" aussi est français, je l'ai amené, on est au moins 3 comme ça, haha.
  A bientôt !
  ps : julio.boiteaweb si tu veux skyper WordPress tout ça.
- 12/02/11 5:34am
  
  Sébastien | French WordpressDesigner says:
  Cool ! Quand on sera assez nombreux, on pensera à créer un wpquestions en français ;-)
  A+
  
  Je garde ton contact au cas où. On aura peut-être l'occasion de bosser ensemble 1 de ces 4

This question has expired.

Gabriel Reguly, Jerson Baguio, Sébastien | French WordpressDesigner, Julio Potier, Francisco Javier Carazo Gil voted on this question.

Current status of this question: Completed

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

Ask your WordPress questions! Pay money and get answers fast! (more info)

$40 add an uploader for each category

(4) Possible Answers Submitted...

$40
add an uploader for each category