在 html 通訊模板中隨機顯示圖片 + 鏈接

Question

假設我有一個包含 4 張圖像的列表，並且每次加載時事通訊時我都嘗試隨機顯示其中的 2 張。

我有一個包含以下代碼的文件 show_image.php：

$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();
    }
}

在我目前的情況下，（html）時事通訊模板中的圖像如下所示：

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

如您所見，隨機圖像和鏈接的調用是分開的，導致 php 腳本以與隨機圖像不匹配的隨機鏈接進行響應。

誰能指出我正確的方向如何隨機顯示具有正確相應鏈接的圖像？

Answer 1

首先，您的代碼中存在語法錯誤。 您所有的子數組都缺少逗號：

0 => array(
    'image' => 'http://example.com/img/partner1.jpg' // <-- Error
    'link' => 'http://www.example1.com'
  )

應該：

0 => array(
    'image' => 'http://example.com/img/partner1.jpg', // <-- Fixed
    'link' => 'http://www.example1.com'
  )

您應該使用rand()隨機獲取圖像：

$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

可能有多種解決方案，它們都有積極和消極的一面：

1. 您可以使用 php 動態生成頁面，而不是帶有硬編碼鏈接的靜態 html 文件，這樣您將為每個區域生成隨機數並輸出帶有正確鏈接/圖像的 html

1.1. 您可以使用 iframe 加載圖像和鏈接表單 php 服務器

2. 如果您必須使用靜態 html 和 javascript，您可以使用 javascript 對 php 執行 ajax 調用，這將再次獲取圖像和鏈接並使用它們生成 html 代碼（document.write 或 innerHTML）

3. 您可以嘗試使用 cookie 或 session 機制，在這種情況下，在 php 代碼中，您將擁有分支，例如if number for zone is not generated yet - generate and store in cookie/session; return link or image for number from cookies/session if number for zone is not generated yet - generate and store in cookie/session; return link or image for number from cookies/session

要修改 #3 的代碼，您需要替換

 $random_index = array_rand($zone);

類似於（沒有實際的 php 編寫，因此可能會出現語法錯誤）：

$cook = 'zone' . $_GET['zone'];
$random_index = isset($_COOKIE[$cook]) ? $_COOKIE[$cook] : array_rand($zone);
setcookie($cook, $random_index);

注意 - 由您對來自 GET 或 COOKIE 的任何變量進行適當的驗證

4. 在電子郵件客戶端的情況下 - 他們中的大多數限制執行 javascript 代碼並且不存儲 cookie（從用戶的角度來看，他們這樣做非常好），無論如何你可以嘗試這樣的事情：

   • 在電子郵件發送期間為發送的每封電子郵件生成唯一的 ID（您可以為此使用 UUID）
   • 將此 ID 包含到模板中的鏈接中，例如<a href="http://..../?...&id=UUID"><img src="http://.../?..&id=UUID"></a>
   • 在圖像和單擊處理程序中 - 您需要從 url 獲取 id 並檢查數據庫 - 是否為其分配了值，如果沒有 - 生成並存儲在數據庫中
   • 如果 db 中的值存在 - 您現在可以提供適當的圖像或重定向到適當的 url
   • 但是在這個方案中 - 用戶總是會看到相同的圖像（盡管不同的用戶會看到不同的圖像），為了解決這個問題，你可以引入某種過期，即將時間戳放入數據庫並使（重新生成）值無效

注意 - 一些電子郵件客戶端可以強制緩存圖像，忽略 http 標頭，因此這種方案將失敗

其他注意事項：

1. 不要忘記用於提供圖像的無緩存 http 標頭
2. 不要使用永久重定向，只為您的用例使用臨時重定向
3. 一些電子郵件客戶端不會加載未嵌入到郵件中的圖像，對於這些圖像，您可以使用<noscript>和一些隨機選擇的單個廣告的嵌入圖像