Показать случайное изображение со ссылкой на сайт

Question

У меня есть сайт, на котором люди могут скачать pdf-документы. Чтобы сделать сайт более привлекательным, теперь я хотел бы показать скриншот первой страницы случайного отчета, и если пользователь нажмет на него, откройте соответствующий pdf-файл, из которого был сделан снимок экрана.

Прямо сейчас, я использую следующий код яваскрипта для достижения этой цели:

<script type="text/javascript"> 
var total_images = 3; 
var random_number = Math.floor((Math.random()*total_images)); 
var random_img = new Array(); 
random_img[0] = '<a href="documents/report1.pdf"><img src="images/report1.jpg"><\/a>'; 
random_img[1] = '<a href="documents/report2.pdf"><img src="images/report2.jpg"><\/a>'; 
random_img[2] = '<a href="documents/report3.pdf"><img src="images/report3.jpg"><\/a>'; 
document.write(random_img[random_number]); 
--></script> 

Это работает без каких-либо проблем. Тем не менее, есть новые pdf-документы, которые все время добавляются, и каждый раз редактирование кода - это боль. Я прочитал, что можно было бы заполнить массив javascript, используя php. К сожалению, я полный noob, когда дело доходит до этого, и я не уверен, как бы я это сделал и все еще имею ссылку на скриншот для правильного отчета.

Любые идеи о том, как это можно достичь?

Большое спасибо заранее!

Answer 1

Вы можете напрямую ввести php в javascript. Я имею в виду, что php будет выполняться сначала на сервере, обслуживать измененный javascript для клиента, который не будет знать, что когда-либо был php в первую очередь.

Предполагая, что у вас есть PHP массив отчетов и соглашение об именах аналогична:

<script type="text/javascript"> 
    var total_images = 3; 
    var random_number = Math.floor((Math.random()*total_images)); 
    var random_img = [ 
         <?php 
          foreach ($reports as $report) { 
           echo "'<a href="documents/$report.pdf"><img src="images/$report.jpg"><\/a>', "; 
          } 
         ?> 
        ]; 
    document.write(random_img[random_number]); 
</script> 

Edit: больше объяснений

Это создаст массив в JavaScript следующим образом:

['<a href="documents/report1.pdf"><img src="images/report1.jpg"><\/a>', 
'<a href="documents/report2.pdf"><img src="images/report2.jpg"><\/a>', 
];