Sometimes you want to use your affiliate images on your WordPress site. Sometimes you have no choice but to use affiliate served images. But what happens if your affiliate does not have the image size that you need to fit inside your overall WordPress theme or site?
Do you have to go through making up your own image to fit and then building custom links for the image? What if you want to use a selection of banners , it can be quite time consuming to build individual images and set them all up when you can serve them all directly from your affiliate.
Use CSS to resize affiliate served banners.
A little bit of judicial css coding can solve your problems – if it’s still there take a look at the 3mobile 250pixel by 225 pixel banner on the top of the side bar. That banner is served directly by 3 mobile but the original banner size is actually 300 pixel by 250 pixel.
Sadly 3 mobile do not provide the images that I want in the size that I want which is 250 pixel width – that’s the size of my sidebar. I could serve the banner at original sizes but then a slice of the ad will be lost and it will not look so good.
Wrap the affiliate code in a div tag.
The answer was very simple. I wrapped the affiliate script in a div tag – div class=”timage” – I’m serving the script in a basic and simple text widget box.
Then it was simply a case of declaring the size that I wanted in my css file as:
.timage img {width: 250px; height: 225px;}
This sets the size of all images within the timage class as 250 pixels by 225 pixels. It also means that any other banner I decide to use will automatically reset to that size – I don’t need to host my own adapted images and I don’t need to set up my own custom links to the site – I just use the standard code provided by 3 mobile.
At some stage in the future I will test this on some of the other affiliate programmes I run on some other sites. I’m particularly keen to see if this technique will work with banners groups with affiliate sites such as tradedoubler and affiliate window. I see no reason why it should not work. As long as the affiliate code includes the img tag then it can be assigned to a div tag.
CSS is a great tool for affiliate marketeers.
Learning and understand css is probably one of the most powerful skills that any web site owner can learn. It frees you from a lot of standard sizes and banners and allows you to fit affiliate banners into any situation.
The only thing to remember is to keep the scaling right or you could end up with some strange looking banners.
