Wiz CMS Tutorials

Working With Multiple Images from the Image Picker

The (Multi)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.

Normally you set up the image picker to be able to pick an image for a certain spot on your site. However, it can also be set up so that you can edit multiple image placements on your site while only having to implement one instance of the image picker (choosing which image to pick for via a URL variable). On the front end the user is still going to 1 URL to edit 1 image (so still just as simple), but on the back end it cuts a lot of setup time out by using only 1 instance of the actual image picker. This does require a basic understanding of how to edit an XML file (nothing advanced though).

Set Up Like Normal

Setup is mostly same as the singular image picker (you should read that first if you haven't already, this tut assumes you already have that knowledge), with only a few differences to make it work for multiple images.

1: Use the XML File

Instead of the image-filename.txt file, you're going to use the image-filenames-multi.xml file. In there you'll see it looks something like this:

<images>
	<imageone>your-image-filename1.png</imageone>
	<anotherimage>your-image-filename2.png</anotherimage>
</images>

Make a new node for each image filename you want to be editable. You decide the name of the tag (which I'll explain why that's important later). For example, to make the picker able to edit a third image you'd add a third node, possibly named <yetanotherimage>third-image.png</yetanotherimage>

2: Use URL Variables

Which image the editor is "picking" for at the moment is determined by the URL. Simply add a img url variable referencing the name of the node in XML you want to edit, such as ?img=imageone at the end of your URL editing the first XML node, and ?img=anotherimage editing the second one.

3: Using in Your Site

Of course, the different format of the file storing the data means you won't use the same snippet for your website as the normal image picker. You'll have to use a snippet that points to the XML file, and also determines which node in the XML file you want printed out. For example, if you set up your editing instance in a folder chooseimage to output the first image in the XML into code that likes this:

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

You'd use a snippet like this:

<h1>My Page Title!</h1>
<img src="editable-assets/<?php echo simplexml_load_file('chooseimage/image-filenames-multi.xml')->imageone; ?>"/>
<footer>that's all...</footer>

Notice that instead of file_get_contents it's simplexml_load_file, and that at the end there's ->imageone which is where you determine which node of the XML you want to pull in for this part of your site.

Also note that, just like the normal usage image picker, the snippet only prints out the file name of the image. You still need to have the appropriate path to the image before the snippet.

Done!

That's it! That should cut a lot of time out if you've got a bunch of images to set up editing for.

Notes:

1) If you don't include a img URL variable in your URL when going to the image picker it will just act like a normal image picker instance, using the image-filename.txt file, even if you have the image-filenames-multi.xml file set up for use. Using the URL variable tells the editor that you intend to use it to pick for multiple images!

2) This feature is part of v1.0.2 onward. If you downloaded from Dec. 12, 2015 onward you're good. Otherwise, go download the newest version.

Tutorial Menu