Using KC Finder Once It’s Installed

KCFinder is a great way to get images from your computer to a Wordpress post.  Well, it will work anywhere that you've implemented CKEditor.  The process for install might be different, but to the end user things are the same.  Here's how to use KCFinder on either Wordpress or with a custom CKEditor install.

October 24, 2016

So I wrote a while back about integrating KC Finder into CK Editor, and it seems ot be getting quite a bit of traffic.  What I forgot though was making sure there was a guide for using KC Finder once it's up and running.  I thought sure there were walkthroughs online, but I'm coming up dry looking for them.



You need a working instance of WordPress, with CKEditor and KCFinder installed.  WordPress and CKEditor are easy.  You can see my integrating KC Finder into CK Editor post to find out how to make that happen.

You need a picture that is oriented correctly.  Size isn't quite as important, though a 4meg picture is going to load slow.  If there are details someone MUST see in a picture, I upload it at a good size for that, then display it as a smaller picture link.  Something like


<a href="/wp-content/uploads/images/howto/using-kcfinder-1.png">
<img alt="" src="/wp-content/uploads/images/howto/using-kcfinder-1.png"
style="width: 300px; height: 225px;" /></a>


is what you'd have to do.


That said…


Upload a Picture:

First of you've got to hit the image button ( ) to bring up this window:


The next step is to browse for the image you want to insert.  I've got an arrow pointed to Browse Server button.  Click that to be brought here:

This is like lots of file browser windows.  On the left are folders (directories) and on the right are files contained in whatever folder you happen to be in.

For a blog, I tend to create a folder for every post category that I have.  On a more static type site (using WordPress as a CMS for example) you may just want to stick everything in the main folder.

Whatever folder you're in, if you see the image you need, double click it.  IF you need up upload one, then use the upload button in the top of the KC Finder window.  You'll be presented with a file browser that should look familiar.  Find your image and select it.  It will get uploaded to the current directory that you're KC Finder browser window was showing.  Remember that, because you ca't move images with this tool; you'd have to delete them (right click on an image to delete it — same goes for folders you create) and re-upload them to the right folder.

Once you get an image selected, you see this window again (with whatever picture you've selected) populating the preview pane

There are all sorts of options, butt he quick and dirty way is to just hit OK at this point and be done.  What you might want to do is resize the image, which is fairly easy using the height and width input boxes on the left.  Make sure the lock image is locked to that the new dimensions are proportionate to the original image (1024×768 becoming 800×600, or 640×480, for instance) if it's too big initially.  Like I said earlier though, you want to do a little bit of resizing in an image editor, otherwise folks will have to load the real big image even though theyre only going ot see a small one.  Waste of bandwidth.


That's prety much it.  KCFinder in a nutshell.  Let me know how you make out.


Leave a Reply

Your email address will not be published. Required fields are marked *