How-to
Creating your own sorts can be relatively straightforward...or complicated, depending on the amount of redesigning you wish to undertake. At the simplest level, just use our template layout and modify the text, graphic identity banners, etc. to meet your needs.
To modify a template for your own needs, you will need to: (1) Copy your images (both thumbnails and large files) into the requisite image folder, (2) modify some text in an xml file, (3) modify some text in a javascript file, and (4) modify some text in an html file. We'll walk through all this below.
Nuts and bolts
Before getting too deep into what needs to be modified where, it is useful to understand the basic directory structure of our templates. We will use the two category sorts shown in the tutorial for our example. You can download the entire directory as a zip file here. The same structure is maintained for all of our download templates:
The two html pages in the directory (i.e., sort_hexastylis_EXAMPLE.html and sort_hexastylis_no_names_EXAMPLE.html) are the main pages for each of the two category sorts. The stylesheet that governs the general layout of these pages is stylesheetcss.css. The stylesheet that governs the layout of the sorts is sort_2_cat_style.css and is found in the sort_stylesheets folder (highlighted in blue below). This style sheet controls the size of the instruction text, size of the box that contains the unsorted thumbnails, size of the boxes into which the thumbnails are sorted, the input buttons, etc.).
Images to be sorted must exist as thumbnails and as larger versions. As shown below, both are kept in a subfolder of the folder sort_images (in this particular example in subfolder Hexastylis_leaf_sort). For the script to work properly, the thumbnails and larger versions must be named identically except that the larger versions must also include "_l" at the end (highlighted in figure below). If you want to use your own images, just replace the ones in this subfolder with your own, but make sure you follow the naming convention. Also, please note that you must have an equal number of images for each category.
A simple xml file is used as a sort of flat file database. Xml files are kept in the sort_XML folder, as shown below. Each sort requires its own xml file. Thus, we have two xml files in our sample file directory, because we have two sorts: one without regard to names and one with regard to names.
An xml file uses start and end tags similar to html.
For each image, a variety of information is captured in the xml file. Information for each image begins with the <IMAGE> tag and ends with the terminating tag </IMAGE>. For the sort to work, you will need to change the contents of the <ID>, <NAME>, <CATEGORY>, and <LOCATION> fields. Do not change the name of the fields themselves. Thus:
Step 1: Images must be numbered sequentially. Thus, if you have six images to sort, they should appear in the xml file <ID> field as IMG_1, IMG_2, IMG_3, IMG_4, IMG_5, and IMG_6. Please note that these aren't replacement names for your images. Just think of it as numbering your images. You will use the actual file names of the images in Step 2 below.
Step 2: In the <NAME> field, write the name of the thumbnail version of each image (thus, there should be no image names terminating in "_l" in this xml file).
Step 3: In the <CATEGORY> field, write the name that entitles the box into which this image should be correctly sorted. Remember this name! You will need to use it exactly as spelled in the xml file, when you later modify the javascript file.
When finished, save and close the xml file.
Next we will modify the javascript file. Each sort requires its own javascript file. As we have two sorts in our example, we have two javascript files in our directory (see below).
Fortunately, you need to only modify the javascript in three places. The first is Line 38 of the code. Here you need to make sure that the path highlighted in the screenshot below matches the location of your xml file.
The only other places the javascript needs to be modified are Line 153 and Line 160. Here you need to write the titles of your search boxes. Remember, they need to exactly match the spelling of the <CATEGORY> field in the xml file.
When finished with the three modifications, save and close the javascript file.
Now we move to our last modification. Open your html sort page (in our example, it will be sort_hexastylis_EXAMPLE.html) and scroll to Line 109. Here you just need to make sure the correct path is given to your javascript file, then save, and close.
That's it! You are ready to run your sort. Just open the html sort page in a browser to begin.
Advanced
Modifications of three and four category sorts follow the same principles as discussed above. Although the line numbers will of course not be the same (as there is more code involved), scroll to the pertinent sections to make your modifications.
xml file: No matter how many sort boxes you end up creating, the process outlined above remains the same for naming thumbnails and creating the respective xml file. However, when you have more than two boxes, you of course must make sure that they are titled correctly in the pertinent xml file. Thus, for a three box sort, you should have three different <CATEGORY> titles in your xml file (note in contrast that for a two box sort you only had two <CATEGORY> titles, as shown in Step 3 above). For a four box sort, you will have four different <CATEGORY> titles, and so on.
Javascript file: No matter how many sort boxes you end up creating, the xml file is referenced only once in the javascript file. In the discussion above, this reference was in Line 38 of the code. For sorts with more than two boxes, this reference will appear farther down in the code as shown in red below (Line 47). This is because additional code is necessary preceding this reference for the search to function. An example of such an additional code block is shown below in purple.
Recall from the earlier discussion, that the only other javascript file modifications necessary are the titles for your boxes. Again, because more code is necessary for any sort larger than two boxes, the lines on which the code for the titles appears will be further down. An example for a three box sort is shown below. The titles for each of the three boxes are highlighted in red. These will need to be modified with your own titles, but make sure they are spelled exactly the same as in your xml file.
html file: The modification for the html to run the sort are the same as discussed above. You need only scroll to the bottom of the page to find and modify the path. For the three box Lindera example used here, the html would be:<script src="sort_scripts/imgSort_Lindera.js"></script>. This line usually appears just above the footer div.
Advanced+
Creating more more boxes can be a bit more tricky, as code modifications will be needed in a few more places.
xml file: To create more boxes, no additional changes are needed to the xml file beyond those discussed above. Just make sure that you have as many <CATEGORY> titles in the xml file, as you have boxes.
javascript file: A number of changes are needed to your javascript file to allow for more boxes. The example below will walk you through the process of creating a three box sort. Although you can download a three box template in our downloads section, we use the creation of a three box sort here to show how to create any number of boxes, as the principles are the same.
Step 1. Create a new box. The example below shows the insertion of code for a new box (on right) and the original two box sort code (left). Don't write the code from scratch. Just copy the existing code from the box code block and paste where shown. Then modify the pasted code to finalize. What should be modified? First, take a look at the blue highlights. This is the "name" of the block. It appears in two places (both highlighted in blue). In your code block for the third box, just change #art_Cat_2 to #art_Cat 3 in both places. Then, look at the green highlighted text. This determines from which other boxes thumbnails can be accepted from. Modify these in your pasted code block for box 3 and the preceding code blocks so that each box can accept images from the others. Note that for a two box sort (code on left), box 1 (#artCat_1) can accept images only from the unsorted box (#divUnsortImages) and box 2 (#artCat_2), but for a three box sort (code on right), box 1 (#artCat_1) can accept images from the unsorted box (#divUnsortImages), box 2 (#artCat_2), and box 3 (#artCat3).
Step 2. Allow the box of unsorted thumbnails to accept thumbnails from your new box. Just add the code #artCat_3 > a where indicated in red.
Step 3. As before, make sure you provide the correct path to your xml file.
Step 4. Add a reference to the box. Just add the code $('#lblCat_3').text(arrCat[2]); where shown.
Step 5. Add code for reading xml ends. Again, don't write the code yourself, just copy the block for #artCat_2 already in the code (highlighted in purple below) and paste where shown in red. Then, just change #artCat_2 to #art_Cat3 in the pasted block.
Step 6. Add code to title new box. Again just paste the existing text (highlighted in blue below) to where highlighted in red and make sure to change the box name to #artCat_3 (highlighted in yellow below). Then make sure the titles for each box (highlighted in green below) are spelled the same as in your xml file. Save and you're done with modifying the javascript file!
html file: The modification for the html to run the sort are the same as discussed above. You need only scroll to the bottom of the page to find and modify the path. For the three box Lindera example used here, the html would be:<script src="sort_scripts/imgSort_Lindera.js"></script>. This line usually appears just above the footer div.
stylesheet: When you create more boxes, you may have to adapt your corresponding stylesheet, so that the boxes will fit nicely on the page. Our template stylesheets are commented to hopefully make it easier for you. The example below shows where you might modify the dimensions of the boxes for a three category sort. Remember, the style and dimensions of the boxes are controlled only in the sort stylesheet, not in your html file.
To make even more boxes, just duplicate the steps outlined in this section, adding more blocks of code as indicated in each step. That's it! Have fun!