Improving Datafeedr Images in your Product Lists

Datafeedr is a fantastic tool right out of the box – the fact that it connects to every single affiliate network and pulls the product images directly over to your store saves so much time when building a new store.

It’s not long before you realise a major problem however – the affiliates all use different sized images.

Having some small and some large images in your product lists makes your shop look weird.

Affiliate image with lots of whitespace

This image has too much white space so it doesn’t fill the box it is placed within. This causes your store to look odd as some images fill the boxes and some don’t.

This is actually caused by two underlying problems:

1. The merchants on the affiliate networks all use different sized images, tall versus square, versus fat etc
2. The images themselves have a varying amount of whitespace contained within them – some have thin whitespace borders and some have fat whitespace

It gets worse – for many merchants, they will have different shaped or sized images depending on the type of product, or even randomly different sized images within the same product category.

To make your store and product lists look good, you need to make your images all fill the boxes.

AWD Images Plugin

My plugin AWD Images fixes the problem above and gives you complete control over your images on your datafeedr stores.

• Crop unnecessary white space from the edge of images – this immediately makes images larger and gives a much better experience for your users
• Zoom your images – you can zoom your images so they fit the entire height of the box or the entire width

Whitespace cropped – Option 1

The whitespace has been trimmed from the image so that now the actual product completely fills the container box from top to bottom.

Notice that there is still whitespace left and right. Option 2 can change that if you like.

Whitespace cropped and image zoomed – option 2

Notice how the head and tail of the image have been cut off – this option has zoomed the image so that it fills the width of the container. This means no whitespace left.

Installation

This works faster since the images are cached locally rather than from my server. It just takes a little extra effort (you need to be able to use FTP).

Download the plugin files from here:

Download AWD Images Plugin ZIP

1. Extract the files locally.
2. Upload the awd-images folder to your plugins directory using FTP.
3. Important Modify the cache folder permissions, change them to 777.

Using Hostgator? If you are using Hostgator, you will need to email them to modify your Mod_Security Rule to allow /wp-content/plugins/awd-images/cropandzoom.php to write to the cache folder within that directory.

Change the image tag to use the following code:

<img title=”&#91;product.name&#93;” src=”http://www.YOURDOMAINGOESHERE.com/wp-content/plugins/awd-images/cropandzoom.php?w=200&amp;h=200&amp;src=&lt;?php echo rawurlencode($product-&gt;image); ?&gt;” alt=”&#91;product.name&#93;” />

Domain Configuration Replace YOURDOMAINGOESHERE in the code above with your local domain name.

Configuring the different options

There are 4 parameters to use:

• w – specify the width in pixels of how big the image should be – use the width of the image container for best results
• h – specify the height in pixels of how big the image should be – use the height of the image container for best results
• src – specify the URL of the image. I just use [product.image direct=’1′ tag=’0′]
• zc – leave empty for image option 1 above or use zc=4 to zoom your images to use the full width of the container

Questions?

If you have any questions about usage or the potential of this system, post a message below.

• Author
• Recent Posts

dhilditch

Latest posts by dhilditch (see all)

• How to create a tree of categories from a custom taxonomy - September 22, 2014
• Managing postcodes and locations with WPAllImport - September 22, 2014
• Why do affiliate merchants reject your website? - August 20, 2014