Feedback and kiosk tool in Tiger skin

I believe one of the main reasons people choose jAlbum over simpler solutions is the wide choice of interaction possibilities the skins offer. For instance, Turtle skin has offered a so-called feedback tool, through which visitors could leave feedback. When I made the new Tiger skin, my goal was to offer nearly the same functionality as Turtle did. There were some exclusions though, like the aforementioned feedback tool. The reason why Tiger did not offer this from the start was that I always planned to renew it. Passing a big chunk of data to the email client is impossible because of operating system limitations. Probably this is due to security reasons, as the mechanism is the same as opening a normal web link. And once a link is longer than 2048 characters it might get suspicious.

Finally, I gave in to user requests and implemented this feature in Tiger too. Once I was there, I tried to make it better too. The new tool is based on a template, so you can customize the user experience widely. By default, the tool offers commenting on the album and selected photos, but you can easily tweak it to let visitors order photos too. There are a lot of users who would like to avoid PayPal as the only payment method. I can see the point. PayPal is not present in every country, they have a margin and some crazy restrictions you might not want to undertake.

With this new kiosk mode, you can collect orders through email, and manage the payment by yourself. Just note, that this little tool is not nearly as sophisticated as the PayPal cart. No calculations, no discount coupons, no shipping cost, and so on. It’s just the barebones, still, it can be sufficient for simpler tasks. In the future the possibility of sending mails through the server’s mail() function might also be added.

One another field it excels Turtle is that it can be configured to provide machine-readable output. It needs some coding knowledge – I admit – but by using this option you can automate the ordering process. Just read the email as a javascript variable, and you can decode the form with the stringify() method right away.

The limitation in sending large amount of data has also been circumvented by offering the user to copy / paste the data manually to the email client if the data is too big for the OS to pass.

Sample albums

1. Feedback

This album was made with the default Feedback options (see Settings → Tiger → Sections → Feedback). I’ve only added my email address and added instructions both in the “box” and for the popup window.

2. Kiosk

This other album was made with a customized “Feedback template” (see Settings → Tiger → Sections → Feedback → Feedback template in order to offer size and quantity boxes. Here’s the code I used:

<!-- items:start -->
<form class="inline">
	<select name="type">
		<option name="9x13">9&times;13 cm (&euro; 0.2)</option>
		<option name="10x15">10&times;15 cm (&euro; 0.3)</option>
		<option name="15x21">15&times;21 cm (&euro; 0.5)</option>
		<option name="21x30">21&times;30 cm (&euro; 1)</option>
		<option name="A1">A1 poster (&euro; 10)</option> 		
		<option name="download">Download (&euro; 5)</option> 		
	</select>
	<input type="number" name="copies" min="1" max="50" value="1" title="Copies (max. 50)" /> 
</form>
<!-- items:stop -->
<div class="row">
	<div class="large-8 large-centered medium-10 medium-centered columns"> 			
		<form name="address">
			<label for="name">Name</label>
			<input name="name" type="text" placeholder="Your name"/>
			<label for="street">Street address</label>
			<input name="street" type="text" placeholder="Street address"/> 
			<label for="city">City</label> 
			<input name="city" type="text" placeholder="City" /> 
			<label for="postcode">Post code</label>
			<input name="postcode" type="text" /> 			
			<label for="contry">Country</label> 
			<input name="country" type="text" placeholder="Country" />
		</form>
	</div>
</div>

As you might have noticed, there are two special delimiter lines (marked in red). Their purpose is to mark the repeating code that should be attached to every selected item. The code part before <!-- items:start --> will appear above the items, meanwhile the code after <!-- items:stop --> will be placed below them. Only the contents of the <input>, <textarea> and <select> fields will be sent, so you can add labels, comments – those will not get into the email – only the user input. (Naturally, the file name and path will also be sent, so you can easily identify the photo.) You can also add hidden input elements if you need some special info, e.g. <input name="filesize" type="hidden" value="${fileSize}">. As you can see the skin can process image variables too.

I hope you’ll find this little tool useful. If you have any questions, please let me know in the skin’s forum – we’re glad to help!