Controlling which iOS keyboard is shown
One of my pet hates (there are many), is being presented with the incorrect keyboard, or having auto capitalisation forced upon me, when entering information into web forms on my iPhone or iPad. This is something that’s very easy to control and can be done so with a little sprinkle of HTML5. You don’t even have to worry about old browsers - I’ve tested this to work perfectly well even in IE6.
The screenshots used in this post are from a UK based iPhone 4 running iOS4; previous versions of iPhone OS and the iPad will differ.
Your standard text input field code will look something like this:
<input type="text"></input>
Telephone keyboard
In order to display the telephone keyboard, use this:
<input type="tel"></input>
Tester:
URL keyboard
For URLs you want this:
<input type="url"></input>
Tester:
Email keyboard
For email addresses, you want this:
<input type="email"></input>
Tester:
Numerical keyboard
And finally, for a simple numerical keyboard (similar to the telephone one but with no +, * and # key:
<input type="text" pattern="[0-9]<em>"></input>
Tester:
Other options
It’s also possible to control auto correct with the use of the following paramater:
autocorrect="off"
Last, but by no means least, turning on or off auto capitalisation:
autocapitalize="off"
So the next time you’re creating a login field that takes an email address, use something like this:
<input type="email" autocorrect="off" autocapitalize="off"></input>
Tester:
Using phpThumb() in ExpressionEngine (Part 2)
Due to a recent new release of phpThumb() and other mentioned software, some of this information is slightly out of date. I’m writing a new blog post which should be available shortly.
For this next step I’m going to explore practical uses for phpThumb() within ExpressionEngine.
Since writing Part 1 of this I’ve added a gallery feature to this site that allows photos or images to be uploaded with each blog post. These appear as small thumbnails in rows under each post and are integrated with a JS lightbox script so they can be clicked on to view at a larger size. This functionality will form the basis for the following post.
If you want to follow along at home in true Blue Peter fashion, you’ll need the following:
- An ExpressionEngine 2 site
- Pixel and Tonic Maxtrix fieldtype
- Pixel and Tonic Field Pack fieldtypes (Dropdown)
- Colorbox
- Sticky backed plastic (no, not really)
Before continuing I’d like to say that I’m completely open to suggestions for improvements to any of this, and will update in future posts with any suggestions that I feel are worth mentioning.
Setting Up The Custom Fields
The first thing to do is start setting up the custom fields to hold our photos and set some options.
For this I’ve added a custom field to my blog field group called “post_gallery” and set it as a Matrix field type. In the Matrix field settings I’ve added two columns, the first is a file fieldtype called “image” and the second is a Dropdown fieldtype called “cropping”.
The “cropping” box offers a quick and easy way to tell phpThumb() how to crop the image, e.g. centre, bottom left, right, etc. In the Dropdown Options field, I’ve added the following:
1 : Centre
T : Top
R : Right
B : Bottom
L : Left
TL : Top Left
TR : Top Right
BL : Bottom Left
BR : Bottom Right
These options can be changed, of course, to suit your needs, as you may only require a much simpler list. If you do change these options, remember to change the code below too.
Setting Up Colorbox
At this point it’s wise to go ahead and set up Colorbox. This is a little beyond the scope of this article, and the documentation over at the official website is excellent (as are the examples).
The Template Code
We’ll start by opening the Matrix field in the usual fashion:
{post_gallery}
We only want to open the gallery div once and only if at least one image has been uploaded, so we’ll check that with a conditional that triggers only for the first Matrix row:
{if image AND row_count=="1"}<div class="gallery clearfix">{/if}
Then we open a div for each thumbnail, making use of the switch variable if necessary for row end styling. Again, a conditional checks that at least one image has been uploaded:
{if image}<div class="thumb{switch="||||| lastthumb"}">
Now we open the A tag that will wrap the thumbnail. The HREF for this tag references the larger file that will appear in the Lightbox window (not the thumbnail that’s displayed on the website). This uses the same code from Part 1, specifying a width and height, and also a REL that enables the Lightbox functionality. I’m also passing the current entry ID to Lightbox so it groups all the attachments for this post together:
<a href="/scripts/img/img.php?src={image}
&w=800&h=600" rel="gallery">
After opening the A tag, we can now output the thumbnail image. Firstly, the IMG tag and phpThumb() code to create the thumbnail sized image:
<img src="/scripts/img/img.php?src={image}
&w=75&h=75&zc={cropping}" /></a>
Close the thumbnail DIV and the conditional:
</div><!--.thumb-->{/if}
Conditional to check if this is the last row so we can close the gallery DIV:
{if image AND row_count==total_rows}</div><!--.gallery-->{/if}
And finally, we close the Matrix field:
{/post_gallery}
If that all made sense (and I didn’t typo!) you should now have a functioning basic gallery.
Until Next Time
Once again, I hope this has been of some help to someone out there, and if so, please pass it along. In the next post I intend to continue where Part 1 left off, and cover some of the more advanced parameters for phpThumb() such as watermarking.
DPI Doesn’t Matter
OK, so I should probably clarify the rather misleading title with “for web use”.
I frequently have to ask for photos or images at a certain size, and because I’m one of those web types I use pixels as my measurement of choice. Invariably one of the first questions I get asked is “What DPI?”. When I explain that the DPI doesn’t matter for the web I get looked at like I’m from another planet. So for those that are already thinking I’m a little green man, let me show you an example.
Here we have a 500x200px photo at 72 DPI:
Here we have the same image, this time at 300 DPI:
And finally, here we have the image again, now at 1 DPI:
All three are identical in file size, at around 40Kb and all are exactly the same quality. Feel free to download and check them in Fireworks, or your image editor of choice, to make sure I’m not lying to you.
DPI, standing for Dots Per Inch, clearly has no affect on web images since an inch isn’t a unit of measurement that has any bearing on-screen.
A 20x20px image is a 20x20px image at 1 DPI or at a 1000 DPI.
Using phpThumb() in ExpressionEngine (Part 1)
Due to a recent new release of phpThumb() and other mentioned software, some of this information is slightly out of date. I’m writing a new blog post which should be available shortly.
One of the things that is most often misunderstood and feared by end users is the manipulation of images for website use. There are addons available for ExpressionEngine to help with this, allowing the end user to upload virtually any size of image and have it resized automatically to suit. The huge advantage of this kind of method of working with files is that should the design of the website change there’s no need to go back and resize a load of images, a simple parameter change and it’s all done.
I’ve used these addons on and off for sites I’ve developed over the years, but quite often I’ve hit various limitations such as the need to create rounded corners, or cropping images to the top rather than the centre. What I’ve continually fallen back on is an extremely useful collection of scripts called phpThumb() which I’ve always managed to crowbar into doing what I’ve needed.
I’ve decided to pull this post together to help others that have always relied on the available ExpressionEngine addons and maybe don’t realise that there are alternatives out there. The added bonus of phpThumb() is that because it’s a standalone script, it doesn’t matter which version of ExpressionEngine you’re using, it will work in exactly the same way with no code changes regardless of platform.
Installation and setup
The first thing to do is grab the latest version, 1.7.9 at the time of writing, and unzip it onto your computer. You’ll end up with a folder called phpThumb_1.7.9 or similar, depending on what version you downloaded. Inside will be a collection of PHP scripts and folders, most of which you can ignore.
You are clearly welcome to make any changes you see fit, but what follows are my recommendations which I’ll explain as I go.
The next step is to rename the folder and one of the files to help make links and code shorter. I’d recommend renaming the whole phpThumb() folder to something like img, and likewise rename phpThumb.php to img.php.
Next we need to delve into the configuration file called phpThumb.config.php.default, and the first thing we need to do is rename it to remove the .default.
Now go ahead and open the phpThumb.config in your favourite editor so we can make a couple of config changes.
By default phpThumb() uses a rather ludicrous cache structure, but one small config change will fix that. Somewhere round about line 47 you’ll find:
$PHPTHUMB_CONFIG['cache_directory_depth'] = 4;
Change that to:
$PHPTHUMB_CONFIG['cache_directory_depth'] = 0;
Finally, to ensure the most flexibility we want to make sure that phpThumb() will allow us to process files referenced using the full URL (i.e. http://yourdomain.com/images/sample.jpg rather than just /images/sample.jpg). On or around line 222 you’ll find:
$PHPTHUMB_CONFIG['allow_local_http_src'] = false;
Change that to:
$PHPTHUMB_CONFIG['allow_local_http_src'] = true;
Finally, save that file and upload the whole folder to somewhere in your document root.
If required, you will need to set the cache folder to world writeable (777), not all hosts require this to be done, but having installed ExpressionEngine you’ll know if this is needed.
The last step is to check that phpThumb() is working correctly and has access to all the right files - to do this browse to the phpThumb.demo.check.php file in the demo folder - something like http://yourdomain.com/path/to/img/demo/phpThumb.demo.check.php.
This script will check that phpThumb() can write to the cache folder and that all required server modules are available. Troubleshooting the output of this file is beyond the realm of this post, but any issues should be fairly easy to solve by either yourself or your host.
The basics
Having got this far, the rest is really pretty simple. I’m going to start by uploading a photo straight from my camera, in this case a dusk shot of the London Eye.
Here’s the original, unedited photo, it’s 2592x1936px weighing in at around 1.6Mb.
So, let’s now display that sample image using phpThumb(). For the above example file, you’d use an IMG tag like this:
<img src="/scripts/img/img.php?src={filedir_1}london-eye.jpg" />
Not a particularly useful example, because what you’ll end up with is once again the full size image, completely untouched. It does however prove that the script is running properly and that your paths and photo locations are correct. Let’s display the same image, but this time we’ll make it fit within this column of text by making it 500px wide. To do that we make use of the “w” parameter to specify the width in pixels.
<img src="/scripts/img/img.php?src={filedir_1}london-eye.jpg&w=500" />
This should result in the following - much more useful!
As you can see, this is now down to 500x373px and around 22Kb.
Let’s say you wanted to show the photo in a square and a little smaller, you use make use of the “w” and “h” (height) parameters, along with “zc” (zoom-crop), as follows.
...&w=100&h=100&zc=1
Specificing “zc=1” means the resized photo will be exactly the size you specify with the “h” and “w” paramaters with any extra height or width cropped off based on the centre of the image. The same code but with “zc=0” results in the following.
Now let’s display this image in a more awkward shape, 500px wide, but only 100px high, and we’ll re-enable zoom-crop.
...&w=500&h=100&zc=1
As you can see, the top and bottom of the photo have been cropped off, and a strip from the centre of the photo is being shown. Let’s say though that you wanted to show the top of the image, rather than the centre - this is particularly useful if you’re creating thumbnails of people shots - you don’t want to see a lot of heads cut off! We change the paramaters to the following…
...&w=500&h=100&zc=T
Now let’s try something a little different, rounded corners. Speficially in this case, a 10px rounded corner on all four corners.
...&w=200&h=200&zc=1&fltr[]=ric|10|10
Finally, let’s take a look at image quality and file size - this can be controlled using the “q” parameter, taking values from 1 to 100.
...&w=200&q=10
This has been set to a quality of 10 and produces a rather poor quality image, but the file size is only around 1.5Kb.
Here the same code has been used, but this time the quality has been changed to 100. The result is a much higher quality file, but this time the size is now around 20Kb.
This how-to has been thrown together very quickly, however I hope it’s been of some help to someone out there - and if so, pass the link on!
I’ll try and expand on this with more practical examples based on ExpressionEngine template code in the near future. In the meanwhile if there’s anything in particular you’d like to see in the next part, make use of the comment system to let me know.
Prevent iPhone auto adjusting web font sizes
When viewing websites on the iPhone it will auto adjust font sizes at will to improve readability - this can be especially useful when switching from landscape to portrait, for example.
However, on certain web layouts this can cause problems and may result in an undesired layout.
To prevent this, simply add the following to any element in your CSS:
-webkit-text-size-adjust:none;
Safari will now no longer auto adjust the font size.
Creating an Apple Touch Icon
Something worth remembering when signing off the finishing touches to a website is to create the Apple Touch Icon. This is the icon that shows on your iPhone, iPod Touch or iPad home screen if you chose that option when bookmarking a website.
Up until now I’ve always created these as a 59x59px PNG (named “apple-touch-icon.png” and placed in the web root), however on the iPhone 4 and to a certain extent the iPad, these always looked fuzzy and low res.
The fix is quite simple - create the same file at 129x129px and Bob’s your uncle!
- August 2010
- July 2010