Web Design and Build

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.

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.

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…

Multiple images on WP e-Commerce product pages Last updated:21 April 2014

Dismayed this morning to find that WP e-Commerce does not support multiple images on a product page unless you pay for the “gold cart” option. Since I’m basically stingy, I did it myself. Here’s how:

Original fix, WP3.5, WPEC 3.8.7.6

I replaced this code in wpsc-single_product.php:

   <?php if ( wpsc_the_product_thumbnail() ) : ?>
      <a rel="<?php echo wpsc_the_product_title(); ?>" class="<?php echo wpsc_the_product_image_link_classes(); ?>" href="<?php echo wpsc_the_product_image(); ?>">
         <img class="product_image" id="product_image_<?php echo wpsc_the_product_id(); ?>" alt="<?php echo wpsc_the_product_title(); ?>" title="<?php echo wpsc_the_product_title(); ?>" src="<?php echo wpsc_the_product_thumbnail(get_option('product_image_width'),get_option('product_image_height'),'','single'); ?>"/>
      </a>
      <?php if ( function_exists( 'gold_shpcrt_display_gallery' ) )
         echo gold_shpcrt_display_gallery( wpsc_the_product_id() );
      ?>
   <?php else: ?>

with this code:

   <?php if ( wpsc_the_product_thumbnail()) ://if the product has any images...
      if (has_post_thumbnail()): //...display the thumbnail if there is one...?>
         <a rel="lightbox[<?php echo wpsc_the_product_title(); ?>]" class="<?php echo wpsc_the_product_image_link_classes(); ?>" href="<?php echo wpsc_the_product_image(); ?>">
         <?php echo get_the_post_thumbnail(wpsc_the_product_id(),'thumbnail',array('alt' => wpsc_the_product_title(),'title' => wpsc_the_product_title() ));?>
         </a>
      <?php endif;
      sb_get_images_for_product(wpsc_the_product_id());//...and then display all the rest of the images
else: ?>

I’ve used the standard WP function get_the_post_thumbnail() instead of the WP e-commerce function wpsc_the_product_thumbnail() simply to ensure a consistent display of thumbnails. So, I’m displaying the product thumbnail and then using a custom function sb_get_images_for_product() to retrieve any other images associated with the product. This function effectively replaces the gold_shpcrt_display_gallery() function for which you have to pay. I saved sb_get_images_for_product() in the functions.php (located in the theme folder). This function retrieves all images attached to the post and then displays any which are not the thumbnail – we’ve already displayed that. Here’s the code (last tested against WP 3.5):

function sb_get_images_for_product($id){
   global $wpdb;
   $post_thumbnail = get_post_thumbnail_id();//read the thumbnail id
   $attachments = $wpdb->get_results($wpdb->prepare("SELECT * FROM $wpdb->posts WHERE post_parent = $id AND post_type = 'attachment' ORDER BY menu_order ASC",$id));
   foreach ($attachments as $attachment){
      if ($attachment->ID <> $post_thumbnail){//if we haven't already got the attachment as the post thumbnail
         $image_attributes = wp_get_attachment_image_src($attachment->ID,'thumbnail');?>
	<a rel="lightbox[<?php echo wpsc_the_product_title(); ?>]" href="<?php echo $attachment->guid; ?>" class="<?php echo wpsc_the_product_image_link_classes(); ?>">
	<img src="<?php echo $image_attributes[0]; ?>" alt="<?php echo wpsc_the_product_title(); ?>"/>
	</a>
   <?php }		
   }
}

Note that WP 3.3 changed the way images work and messed up the WP e-commerce product images on version 3.8.7.4, with the result that it's possible to have a product without a product thumbnail. This is fixed with WP e-commerce version 3.8.7.6. However, I've added the if (has_post_thumbnail()) condition in the first code snippet above to trap this. Thanks to Brian for flagging this up.

Updated 21 April 2014, tested against WP 3.9, WPSC 3.8.13.4

Somewhere along the line, in conjunction with core WP galleries, WPEC has changed the way additional images are handled, and the fix above no longer works. Now try making this replacement in wpsc-single_product.php. Change this:

<?php
if ( function_exists( 'gold_shpcrt_display_gallery' ) )
   echo gold_shpcrt_display_gallery( wpsc_the_product_id() );
?>

with this:

<?php
	sb_get_images_for_product(wpsc_the_product_id());//...and then display all the rest of the images
?>

and add this to your functions.php:

function sb_get_images_for_product($id){
   $post_thumbnail = get_post_thumbnail_id();//read the thumbnail id
   
   $atts = get_post_meta($id,'_wpsc_product_gallery');
   
   $attachments = $atts[0];
   
   foreach ($attachments as $attachment){
      if ($attachment<> $post_thumbnail){//if we haven't already got the attachment as the post thumbnail
         $image_attributes = wp_get_attachment_image_src($attachment,'post-thumbnail');
		 $full_image_attributes = wp_get_attachment_image_src($attachment,'full');
		 ?>
	<a rel="lightbox[<?php echo wpsc_the_product_title(); ?>]" href="<?php echo $full_image_attributes[0]; ?>" class="<?php echo wpsc_the_product_image_link_classes(); ?>">
	<img src="<?php echo $image_attributes[0]; ?>" alt="<?php echo wpsc_the_product_title(); ?>"/>
	</a>
   <?php }		
   }
}

jQuery UI slider on touchscreen devices Last updated:12 March 2014

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

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