Support » Developing with WordPress » Add new icon to media libary

  • Resolved Hans

    (@hmobron)


    Hello,

    I creating a plugin where admin users ca upload and import a .ged file (gedcom). I manage to add the .ged to the allowed mime type’s, open the media browser and show only the .ged files.

    what i can’t figure out is how to add the family tree icon to the .ged file. Now it is show as default text file in the media library.

    I did multiple searches, but al the times i gat back on how to allow i an extension or plugin’s to manage icons.

    This is what mine latest trail is, but not working. In the images dit is a icon named, ged,png.

    function mobgen_myme_types($mime_types){
        $mime_types['ged'] = 'text/ged'; //Adding ged extension
    
        return $mime_types;
    }
    add_filter('upload_mimes', 'mobgen_myme_types', 1, 1);
    
    apply_filters( 'wp_mime_type_icon', PLUGIN_DIR.'/images/', 'text/ged' );
Viewing 11 replies - 1 through 11 (of 11 total)
  • Moderator bcworkz

    (@bcworkz)

    You are using the “wp_mime_type_icon” incorrectly.

    The second argument should be the function name of your callback. The third 10, and the fourth 3. Your callback is passed an icon file path, the MIME type, and the attachment ID. Be sure your callback function collects all three. If the MIME type passed is ‘text/ged’, return the file path to the icon file you want to use. Otherwise just return the original file path unchanged.

    All icons pass through this filter, so you must be sure the call is for your MIME type before altering what is returned.

    Oke thanks, That’s a big step forward. I also noticed that i used apply_filters instead off add_filter. Now it’s working ad my custom upload Media Library.

    But at de main Media Library now noting is showing, net even the text icon.

    function mobgen_myme_types($mime_types){
        $mime_types['ged'] = 'text/ged'; //Adding ged extension
    
        return $mime_types;
    }
    add_filter('upload_mimes', 'mobgen_myme_types', 1, 1);
    
    function mobgen_myme_icon($path, $mime, $id =0){
     
      if($mime == 'text/ged'){
        $path = PLUGIN_URL.'images/ged.png';
      }
      return $path;
    }
    add_filter( 'wp_mime_type_icon','mobgen_myme_icon', 10,3 );
    Moderator bcworkz

    (@bcworkz)

    Yeah, add_filter! How did I miss that?? I’m glad you noticed 🙂

    No icons showing at all? From the code you posted I cannot imagine how that can be. I tried your icon code on my own site and it did not cause any problems. Now, I don’t have any .ged files and I didn’t even add the MIME type for them. I don’t even have many non-image files in media, but the few I have still show the correct icons, even after flushing the browser cache.

    Try commenting out the add_filter line to take the code out of play. Do the icons reappear? I’m thinking not, which would tell us something else is causing the problem. If the icons do reappear, I’m at a loss to explain it, for non-ged files the code should have no effect at all.

    Hello BCworks,

    Sorry but my explanation was n’t clear. The other files has icon’s, only not the .ged file.

    When i dig into the page code, the other media file’s has a tag whit class “has-media-icon”. The .ged file is missing that.

    A .ged file is a simple text file whit export information from a family tree program.

    Moderator bcworkz

    (@bcworkz)

    OK then. Good clue, the missing class! That tells me the function getting the icon or image HTML isn’t getting proper data from wp_get_attachment_image_src(), which also gets icon src URLs as well, where the “wp_mime_type_icon” filter is eventually used.

    What I discovered, the problem is WP expects ALL icon files to reside in /wp-includes/images/media. By not having your file there, wp_get_attachment_image_src() returns false for no image available 🙁 An easy fix would be to store your icon file there, updating the URL returned in the “wp_mime_type_icon” filter accordingly. It ought to be safe there provided the WP core code never uses the same filename for anything. That would be a poor practice though, especially since there is a workaround.

    In your “wp_mime_type_icon” callback, only when the .ged file’s MIME is passed, add a filter callback to “icon_dir”. In that callback, return the full absolute path (path, not URL) to the directory containing your icon file. Just the directory, not file. No terminal slash on the path. For plugins, you can start with plugin_dir_path( __FILE__ ), whose return does have a terminal slash, to which you concatenate the plugin’s subdirectory path to the icon file.

    Before returning though, have your callback remove itself from the “icon_dir” filter stack, otherwise all the other icons will not be found!

    It isn’t working

    function mobgen_myme_icon($path, $mime='', $id =0){
     // echo '<script>console.log("'.$mime.'")</script>';
      if($mime == 'text/ged'){
    
        $path = PLUGIN_URL.'images/ged.png';
    
      }
     apply_filters( 'icon_dir',plugin_dir_path( __FILE__ ).'images/icons');
      return $path;
    }
    add_filter( 'wp_mime_type_icon','mobgen_myme_icon', 10,3 );

    results white a icon .txt file
    Warning: opendir(/xx/wptest.mobron.nl/wp-includes/images/media): failed to open dir: No such file or directory in /xx/wptest.mobron.nl/wp-includes/post.php on line 5308

    Notice: Undefined variable: icon in /xx/wptest.mobron.nl/wp-includes/post.php on line 5365

    and the .ged only white
    Notice: Undefined variable: icon in /xx/wptest.mobron.nl/wp-includes/post.php on line 5365

    Moderator bcworkz

    (@bcworkz)

    Not apply_filters() — add_filter()! Caught it this time 🙂

    You’ll want to add a named function and not use an anonymous function for this. Named functions are much easier to remove than anonymous. Put the add_filter() call within the conditional, you do not want to change the path for other icons.

    In that named callback, the last thing it should do (besides returning a path) is call remove_filter() to remove itself, again so other icon paths are not altered.

    Hello Bbcorks, the code here is working with out the remove_filter action. In the normal media library all icon’s are showing including the .ged. In my Media library also. Thank you very much.

    function mobgen_set_incon( $icon_dir ){
                      return   plugin_dir_path( __FILE__ ).'images/icons';
    }
    function mobgen_myme_icon($path, $mime='', $id =0){
     // echo '<script>console.log("'.$mime.'")</script>';
      if($mime == 'text/ged'){
    
        $path = PLUGIN_URL.'images/ged.png';
         add_filter( 'icon_dir','mobgen_set_incon',10,3);
         //remove_filter('icon_dir','mobgen_set_incon');
      }
    
      return $path;
    }
    add_filter( 'wp_mime_type_icon','mobgen_myme_icon', 10,3 );
    Moderator bcworkz

    (@bcworkz)

    Great news!

    FWIW, the remove filter call would have gone in mobgen_set_incon() just before the return line. If you happen to notice missing icons in the future this is why. Depending on how things are loaded you may never see this happen, or it may be your browser already had the icons cached.

    🙂 totally right. browser cache!

    Moderator bcworkz

    (@bcworkz)

    Hehe, I told you so! Never mind, that would be a childish response. 🙂

    I’m just glad we figured out the path part. That’s an odd setup!

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Add new icon to media libary’ is closed to new replies.