TechSock

    Replacing Nibbleblog's Image Upload

    Recently, I've having some issues with the image uploader built into Nibbleblog v4.0.3. I managed to track them down, but I haven't found a solution yet. However, Nibbleblog v4.0.3 uses TinyMCE for editing posts and pages. Using that information, I set out to find a solution. I found JustBoil.me Images. JustBoil.me is a TinyMCE plugin image uploader that is fairly simple to set up. I figured I'd write a quick how-to for anyone else using Nibbleblog and having issues with the built-in image uploader.

    Note: Nibbleblog v4.0.3 uses Version 4.0.20 of TinyMCE, if you are using a different version of Nibbleblog or TinyMCE you may need to modify these instructions.

    Step 1: Pop over to JustBoil.me and click the "Download @ Github" button. Once your on Github, you'll want to find the "Download ZIP" button on the right side of the page.

    Step 2: Now that you have the zip downloaded, we can either unzip the file or upload on to the server and then unzip the file. We want to place the file or folder into the admin/js/tinymce/plugins directory of your Nibbleblog installation. *Optional: Change the name of the JustBoil.me folder to "jbimages".

    Step 3: Once you have JustBoil.me placed into your admin/js/tinymce/plugins directory, open config.php inside of the JustBoil.me folder. You'll want to make a change to line 41. Line 41 set's the directory to which JustBoil.me will upload the images. I set mine to /content/public/upload. This matches the default upload location of Nibbleblog's default image uploader.

    Step 4: Go ahead and open up content.bit located in the admin/views/post/includes/ directory. We need to make a few changes here as well. We need to add "jbimages" somewhere into the list on plugins that starts on line 35. We also need to add "jbimages" to the list of toolbar buttons that starts on line 40. *Optional: If you no longer wish to use the default image uploader, delete "nb-image" from the toolbar section and comment out or delete line 72 through line 80.

    Now login to your Nibbleblog and create or edit a post. You should now see your shiny new image uploader in your TinyMCE toolbar. If you have any issues or questions, drop me a line in the comments.


    Share this article on
    Author image
    Written by Matt Hopkins
    Ohio