Randomly show image + link in html newsletter template - php

Question

Let's say i have a list of 4 images and i'm trying to randomly show 2 of them each time the newsletter is loaded.
I have a file show_image.php with the following code:
$images = array(
0 => array(
'image' => 'http://example.com/img/partner1.jpg',
'link' => 'http://www.example1.com'
),
1 => array(
'image' => 'http://example.com/img/partner2.jpg',
'link' => 'http://www.example2.com'
),
2 => array(
'image' => 'http://example.com/img/partner3.jpg',
'link' => 'http://www.example3.com'
),
3 => array(
'image' => 'http://example.com/img/partner4.jpg',
'link' => 'http://www.example4.com'
)
);
$i = 0
foreach($images as $image)
{
$i++;
$zones[$i][] = $image;
if($i == 2)
$i = 0;
}
if(!empty($zones[$_GET['zone']]))
{
$zone = $zones[$_GET['zone']];
$random_index = array_rand($zone);
$partner = $zone[$random_index];
if($_GET['field'] == 'image')
{
$file = getFullPath($partner['image']);
$type = 'image/jpeg';
header('Content-Type:'.$type);
header('Content-Length: ' . filesize($file));
readfile($file);
}
elseif($_GET['field'] == 'link')
{
wp_redirect( $partner['link'], 301);
exit();
}
}
In my current situation, the images in the (html) newsletter template look like this:
<a href="http://example.com/show_image.php?zone=1&field=link">
<img src="http://example.com/show_image.php?zone=1&field=image">
</a>
<a href="http://example.com/show_image.php?zone=2&field=link">
<img src="http://example.com/show_image.php?zone=2&field=image">
</a>
As you can see, the call for a random image and link are separate, causing the php script to respond with a random link that doesn't match the random image.
Can anyone point me in the right direction how to randomly show an image with the right corresponding link?

Answer 1

First, there is a syntax error in your code. All your child arrays are missing a comma:
0 => array(
'image' => 'http://example.com/img/partner1.jpg' // <-- Error
'link' => 'http://www.example1.com'
)
Should be:
0 => array(
'image' => 'http://example.com/img/partner1.jpg', // <-- Fixed
'link' => 'http://www.example1.com'
)
You should use rand() to get an image randomly:
$images = array(
0 => array(
'image' => 'http://example.com/img/partner1.jpg',
'link' => 'http://www.example1.com'
),
1 => array(
'image' => 'http://example.com/img/partner2.jpg',
'link' => 'http://www.example2.com'
),
2 => array(
'image' => 'http://example.com/img/partner3.jpg',
'link' => 'http://www.example3.com'
),
3 => array(
'image' => 'http://example.com/img/partner4.jpg',
'link' => 'http://www.example4.com'
)
);
$total_images = count($images) - 1; // Get total number of images. Deducted one because arrays are zero-based
$random_img = rand(0, $total_images); // Get a random number between 0 and $total_images
echo $images[$random_img]['image'] . '<br />';
echo $images[$random_img]['link'] . '<br />';

Answer 2

there are could be multiple solutions, all of them have positive and negative sides:
Instead of static html file with hard-coded links, you can generate page on fly with php, so in this way you will generate random number for each zone and output html with proper links/images
1.1. You can use iframe to load image and link form php server
If you have to use static html and javascript, you can perform ajax call to php with javascript, which again will fetch image and link and use them to generate html code (document.write or innerHTML)
You can try to use cookies or session mechanism, in this case in php code you will have branch like if number for zone is not generated yet - generate and store in cookie/session; return link or image for number from cookies/session
To modify your code for #3 you need to replace
$random_index = array_rand($zone);
with something like (writing without actual php, so syntax errors are possible):
$cook = 'zone' . $_GET['zone'];
$random_index = isset($_COOKIE[$cook]) ? $_COOKIE[$cook] : array_rand($zone);
setcookie($cook, $random_index);
note - it is up to you to put proper validation for any variables from GET or COOKIE
In case of e-mail clients - majority of them restrict execution of javascript code and don't store cookies (and from user's perspective is it very good that they do that), anyway you can try something like that:
during e-mail sending generate unique id for each e-mail sent (you can use UUID for that)
include this id into links in your template, like <img src="http://.../?..&id=UUID">
in image and click handler - you need to get id from url and check in database - whether you assigned value to it and if no - generate and store in db
if value in db present - you can now serve appropriate image or redirect to appropriate url
but in this scheme - users always will be presented with the same image (though different users will see different ones), to fix that you can introduce some kind of expiration, ie put timestamp in db and invalidate (regenerate) value
note - some e-mail clients can force cache of images, ignoring http headers, thus such scheme will fail
other notes:
don't forget about no-cache http headers for serving image
don't use permanent redirects, only temporary ones for your use case
some e-mail clients will not load images which are not embedded into message, for such ones you can play with <noscript> and embedded images of some single randomly picked ad