Solution 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 />';

Solution 2 :

there are could be multiple solutions, all of them have positive and negative sides:

  1. 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

  1. 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)

  2. 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

  1. 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 <a href="http://..../?...&id=UUID"><img src="http://.../?..&id=UUID"></a>
    • 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:

  1. don’t forget about no-cache http headers for serving image
  2. don’t use permanent redirects, only temporary ones for your use case
  3. 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

Problem :

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?

Comments

Comment posted by Ali Sheikhpour

What is your logic to get a random one? It is enough to generate one random number between 0 and 3 and get both image and link with that numebr.

Comment posted by Timss

It is not possible to generate random number in the HTML template since i can’t use PHP in there.

Comment posted by Ali Sheikhpour

So the only choice is to generate random number using javascript and ajax load the content from PHP page by passing that number to PHP page.

Comment posted by Timss

Thanks for your answer. Maybe i was not clear enough, but i can’t use php and javascript in the html template. The template is pure HTML. The php coding has to be done in show_image.php.

Comment posted by Timss

Thanks for your answer. Could you elaborate solutions 3 a bit more? I have edited my question with some more information/code.

Comment posted by Iłya Bursov

@Timss I’ve put some sample code to help with understanding

Comment posted by Timss

I’ve implemented your code with the cookie successfully, however it seems to only work in browsers, and not in email clients like Outlook for Mac. I don’t know why, maybe because these applications don’t support cookies? Any idea how to fix this problem?

Comment posted by Iłya Bursov

@Timss it is tough situation and I’m feeling bad for giving you idea how to add spam to e-mail messages, anyway I’ve updated post with some thoughts

Comment posted by Timss

Hmm.. so there is no solutions that will work for 100%? Then maybe it’s better if i quit trying to fix this and make it more simple like swapping the images each time the newsletter get sent.. Thanks for your help anyways! Really appreciatie it.

By