Add 3rd Party Thumbnail Services into Clipper

Clipper by default uses WordPress mShots to generate and display store thumbnails. But with a little modification, you can use anyone of the following thumbnail services: thumbshots.com, screenshotmachine.com, robothumb.com, etc.

In this tutorial we will show how to change the default image of stores (which is displayed when store have no url), and how to replace the mShots thumbnails with thumbnails from PagePeeker.com – a free thumbnail service (various plans available).

IN Clipper 1.3.2 we have added two new hooks that allow us to modify store thumbnails:

• clpr_store_default_image – allow to change default image of store
• clpr_store_image – allow to change store thumbnail

Getting Started

Before starting, you need to create a child theme. This will avoid modifying any of your core files.

All the HTML/PHP code in this tutorial should be added to your child-theme functions.php file.

Replacing default store image

For this purpose we have to use the clpr_store_default_image filter which passes 2 arguments:

• $store_image_url – passes current default image url
• $width – passes requested width of an image

But before we override the Clipper default store image, please open Your favorite photo editing software and create your own default image to display when no thumbnail for a particular store.
In Clipper we use 4 sizes:

• 110×90 – coupon list pages and single coupon pages
• 150×110 – store page
• 160×120 – featured slider
• 250×190 – backend edit store page

After You create your default images, upload them to “images” folder of your child theme.

As a last step copy and paste the code below into functions.php of your child theme.

//changes default image of stores
function child_store_default_image($store_image_url, $width) {
  //choose right size
  switch( $width ) :
    case '250':
      $size = '250x190';
      break;
    case '160':
      $size = '160x120';
      break;
    case '150':
      $size = '150x110';
      break;
    default:
      $size = '110x90';
      break;
  endswitch;
 
  $store_image_url = get_stylesheet_directory_uri() . "/images/" . $size . ".jpg";
 
  return $store_image_url;
}
add_filter('clpr_store_default_image', 'child_store_default_image', 10, 2);

Use PagePeeker as web thumbnails service

For this purpose we have to use clpr_store_image filter which passes 3 arguments:

• $store_image_url – passes current store image url
• $width – passes requested width of an image
• $store_url – passes store url

PagePeeker offers predefined sizes of thumbnails (other sizes available for premium accounts):

• ‘t’ – Tiny, 90 x 68 pixels
• ‘s’ – Small, 120 x 90 pixels
• ‘m’ – Medium, 200 x 150 pixels
• ‘l’ – Large, 400 x 300 pixels
• ‘x’ – Extra large, 480 x 360 pixels

We will use then size ‘s’ on lists with coupons, and size ‘m’ in all other places – thumbnails will be resized to the size you want using CSS.

Now, copy and paste the code below into functions.php of your child theme.

//changes store thumbnail, allows to add 3-rd party services, below PagePeeker
function child_store_image($store_image_url, $width, $store_url) {
  //choose right size
  switch( $width ) :
    case '110':
      $size = 's';
      break;
    default:
      $size = 'm';
      break;
  endswitch;
 
  $store_image_url = 'http://pagepeeker.com/thumbs.php?size=' . $size . '&url=' . $store_url;
 
  return $store_image_url;
}
add_filter('clpr_store_image', 'child_store_image', 10, 3);

Save file and refresh your site to see the changes. Enjoy!

Like this tutorial? Subscribe and get the latest tutorials delivered straight to your inbox or feed reader.