Wiz CMS Tutorials

Working With the Image Picker

The Image Picker

The Wiz CMS Image Picker is tool that allows you to make an image editable. The user can enter an "image picker" CMS instance and upload new images, delete old ones, rename them, and select one to show in the front end for the specific place where the developer intends.

Planning

First you're going to need to determine two things. What URL do you want the user to go to for the image picker, and what folder in the website do you want it to manipulate and select an image from? I'd recommend a folder that is dedicated to whatever purpose you're using the image picker for (i.e. doesn't contain a bunch of website files that shouldn't be renamed/deleted/replaced). For our example I'm going to set it up so that the image picker is accessed via mysite.com/chooseimage/ and the folder it's going to be editing is also going to be in the website root, at mysite.com/editable-assets/.

Step 1

First we're going to grab the image picker itself. Inside the EXTRA folder in your download you'll find a folder named wiz-image-picker. Copy that whole folder to the root of your website, then rename it to chooseimage to get the URL we want. Also make sure to make an editable-assets folder in the root for our files. And add a few image files to it for the image picker to manipulate to test it's reading everything right later on.

Step 2

Inside what we have now named the chooseimage folder you'll find an index.php file. At the top of that file there will be places for you to set the username and password (similar to how we've done it in other tutorials, it's hard to mess up, they're right at the top).

Step 3

Next we'll go into the image-picker.js file (right in the same chooseimage folder). At the top of it you'll find a managerPathToAssets variable. That variable needs to be set to a path from your instance of the image picker to the folder to pick images from. In this case that would be up one level (../) to leave the chooseimage folder and then the editable-assets folder. Also include the trailing slash. Once you change that it'll look like this:

// a relative path from the image-picker folder to the folder it's managing assets in
var managerPathToAssets = '../editable-assets/';

Step 4

Now we go inside the chooseimage/scripts/ folder and find the settings.php file. Open it up and you'll find a $folderToManage variable right at the top. That needs to point to our editable-assets folder as well, relative from this file. That means up two levels (since we're in chooseimage/scripts/) and then the editable-assets folder. Once you edit that it'll look something like this:

// the folder to manage, relative from this file, include the trailing slash
$folderToManage = "../../editable-assets/";

Note: steps 1 through 4 are virtually identical to setting up a file manager instance. You can view the video on that tutorial page to familiarize yourself with it.

Step 5

Now we need to set up the website to draw in the image file that the image picker picks! Like other Wiz editing this is done through the simple PHP snippet in your PASTE-IN-HTML-SNIPPET.txt file. The only difference is that you point it to the folder of the image picker editing (in this case chooseimage folder) plus image-filename.txt. And keep in mind that it only outputs the filename itself...so keep the path to the folder hard coded. Our example would start looking something like this:

<h1>My Page Title!</h1>
<img src="editable-assets/my-image.png"/>
<footer>that's all...</footer>

and end up looking like this:

<h1>My Page Title!</h1>
<img src="editable-assets/<?php echo file_get_contents('chooseimage/image-filename.txt'); ?>"/>
<footer>that's all...</footer>

Now optionally you can copy/paste the filename of the current intended file into the chooseimage/image-filename.txt file to set it as the starting image the CMS uses until edited.

Editing Multiple Images from One Editor Instance

If you've got a lot of images to deal with then setting up an editing instance for every single one might be quite a bit of work. Check out this tutorial to see how to do them all while only actually setting up 1 intance of the image picker.

Done!

That's all! Now you can go to mysite.com/image-picker/ and log in to pick an image for that location in your pae! There were a few files to edit, and going through the steps 1 at a time is a bit slow. But once you've done it once and get what's going on there's a quickie way.

The Shortcut

For each of the files the variables you need to edit are at the top and well commented. So the quickie process is to just write down what files need editing, open them up, and follow the comments at the top. Those files (relative from the file managing folder) are index.php (for username/password), scripts/settings.php and image-picker.js (to set paths to the folder where images will be stored), and then use the PHP snippet in your website where you want the selected filename to output. When it's summed up like that, it can actually be a pretty quick process!

Note:

Note that this editor is intended to allow end users to easily switch out an image in their site. However, the code snippet just outputs the filename, so there is nothing forcing you to use it in an img tag's source attribute. Likewise there is nothing in the editor restricting its use to only image files, and the title of the CMS instance is editable. So there's nothing stopping you from also using this editor to allow users to swap out a PDF link, or a zip download, or whatever else you can think to use it for. It's named "image picker" because that's its biggest function, but it is quite flexible.

Tutorial Menu