Ordnance Survey maps in WordPress Last updated:16 June 2014

We’ve just finished another site which embeds OS Openspace maps into WordPress pages: Dartefacts. This uses a custom post type to record the grid reference of an object, which is then displayed on a home page map showing all the items, custom taxonomy pages and search results. This works really well with several hundred items (so far) displaying on the home page, and is fully responsive as well.

OS map showing multiple points and a pop up balloon linking to a page

We’re really pleased with this site (and so is the client!). This builds on our earlier site Rombalds Riding which displays gpx routes as well as points.

Tags:
Posted in Web Design and Build | No Comments

Getting the lowest level category (or custom taxonomy) for a WordPress post Last updated:6 June 2014

Working on a client project which applies a hierarchical custom taxonomy to a custom post type I needed to find the lowest level set for the post. Assuming that there is only one hierarchy applied to the post the following does the trick, for categories (running on the single post page):

$categories = get_categories();
$parents = array();
if($categories){
	foreach ($categories as $category){
		$ids[] = $category->term_id;//read the category ids into an array
		if ($category->parent) $parents[] = $category->parent;//read the parent ids into an array
	}
}		
$low_categories =  array_diff ($ids,$parents);//get the ids which are not parents
$lowest_category = array_shift($low_categories);//read the first id (just in case there's more than one)

If you’re working with a custom taxonomy called, say, ‘classification’ then this becomes:

$post_classifications = get_the_terms($get_the_ID,'classification');
if($post_classifications){
	foreach ($post_classifications as $post_classification){
		$ids[] = $post_classification->term_id;
		if ($post_classification->parent) $parents[] = $post_classification->parent;
	}
}		
$low_class =  array_diff ($ids,$parents);
$classification = array_shift($low_class);

Hope this helps someone else…

Tags:
Posted in Web Design and Build | 1 Comment

Making this site responsive Last updated:21 June 2014

I’ve been thinking about making this site responsive for some time, but never quite got round to it, in part because only about 1% of the traffic is from mobile devices, but I have finally got around to it. Now this site has grown up over the last, errr, five or six years, and I was expecting it be a bit of a nightmare.

Not so! The css file is pretty large anyway, but to date I have added only 94 css statements to media queries for small screens, and I think I’m nearly there, the only major challenge left is the photography slideshows. I have done this backwards according to conventional wisdom, in that I’ve started with a desktop site and reverse-engineered a mobile site. I can’t quite get my mind around why that piece of wisdom anyway… Just for comparison, bootstrap.css has more than 5000 entries.

Posted in Web Design and Build | No Comments

jQuery UI slider on touchscreen devices Last updated:13 May 2015

I’ve been meaning to have a look at updating my vertical scrollbar code so it works on a touchscreen. Finally found time this weekend to have a look…with rather limited results. I created three versions of the page, one using touchpunch, one with touchpunch improved, and one with a basic mapping of touch events to mouse events.

Device OS Browser TP TP improved Mapping
Versus tablet Android 4.0.4 Android browser Fails Fails Fails
Samsung Galaxy Ace Android 2.3.6 Android browser Fails Fails Fails
Apple iPhone 3G iOS 4.2.1 Safari Works Works Works
Samsung Galaxy Ace 2 Android 4.1.2 Android browser Works Works Works
Apple iPad Mini 1 iOS 8 Safari Works Works Works
Nokia Lumia 635 Windows 8.1 IE11 Works Works but with errors Works

Conclusion so far…Touchpunch works on newer devices only. If you have access to a different device, test the different pages and let me know the result.

Tags: ,
Posted in Web Design and Build | No Comments

Opencart SSL issues with reverse proxy Last updated:28 February 2014

I got involved sorting out an interesting problem this week. A user (not one of my clients) had implemented SSL on his server, but his Opencart secure pages (Login, My Account etc) were displaying without any css being applied. This manifested in part because the href attribute on the secure page was displayed as http:// not https://.

Now, this value is controlled within Opencart by checking the value of $_SERVER['HTTPS'], set by the server. If this value is set, then Opencart sets the href as https://. If it isn’t it doesn’t.

All well and good, but in this case (123-reg) the server is set up with SSL Reversed Proxy & Load Balanced SSL Proxy, and this results in the server setting $_SERVER['HTTP_X_FORWARDED_SSL'] instead of $_SERVER['HTTPS'] – which is why the problem manifests.

The fix is relatively straightforward in that the checks need to be repointed at the new $_SERVER index. This can be fixed by changing /catalog/controller/common/header.php, catalog/model/tool/image.php for basic stores, more files dependent on the payment gateways. However, it’s simpler I think to make a modification to /system/library/request.php. This is straightforward since Opencart creates its own server variable (accessed through $this->request->server, so this can be changed independently of $_SERVER. Here’s a vQmod example:

<modification>
	<id>Reverse Proxy Handler</id>
	<version>for OC 1.5.6</version>
	<vqmver>2.2.1</vqmver>
	<author>Simon Battersby www.simonbattersby.com</author>
	<file name="/system/library/request.php">
		<operation>
			<search position="replace" ><![CDATA[$this->server = $_SERVER;]]></search>
			<add><![CDATA[
				if(isset($_SERVER['HTTP_X_FORWARDED_SSL']) && !isset($_SERVER['HTTPS'])){
					$https = array('HTTPS'=>$_SERVER['HTTP_X_FORWARDED_SSL']);
				} else {
					$https = array();
				}
				$this->server = array_merge($_SERVER,$https);
			]]></add>
		</operation>
	</file>
</modification>

All this is doing is checking if $_SERVER['HTTP_X_FORWARDED_SSL'] is set instead of $_SERVER['HTTPS'], and if it is set, adding the value ‘HTTPS’ to Opencart’s local server setting. If you use this, let me know if it works throughout, as I don’t have access to a reverse proxy SSL server.

Tags: ,
Posted in Web Design and Build | 1 Comment

Older Entries Newer Entries