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.
This is actually caused by two underlying problems:
- The merchants on the affiliate networks all use different sized images, tall versus square, versus fat etc
- 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
The service is the easiest method to use, but it’s not as fast as using the plugin locally so I recommend you use this method for testing which option looks best for your store.
Replace your existing product img tags in your Datafeedr templates with the following code:
<img src="http://www.affiliatewebdesigners.com/wp-content/plugins/awd-images/cropandzoom.php?w=240&h=240&src=[product.image direct='1' tag='0']" alt="[product.name]" title="[product.name]" />
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:
- Extract the files locally.
- Upload the awd-images folder to your plugins directory using FTP.
- 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 src="http://www.YOURDOMAINGOESHERE.com/wp-content/plugins/awd-images/cropandzoom.php?w=200&h=200&src=<?php echo rawurlencode($product->image); ?>" alt="[product.name]" title="[product.name]" />
Domain Configuration Replace YOURDOMAINGOESHERE in the code above with your local domain name.[/level-premium]
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
If you have any questions about usage or the potential of this system, post a message below.