Base Directory:
/home/ecedu/public_html/cce/Views/layouts
View File: list-pdf-layout.php
<!-- بداية الجزء الخاص بالعرض -->
<main id="content">
<div class="container">
<div class="row">
<!--breadcrumb-->
<div class="col-12">
<div class="breadcrumb u-breadcrumb pt-0 px-0 mb-0 bg-transparent small" style="margin-top:-5px;">
<a class="breadcrumb-item" href="index.php?lang=<?= $lang ?>"><?= $L['home'] ?></a>
» <?= $L['archive']; ?>
</div>
</div>
<div class="col-md-8">
<article class="post-397 page type-page status-publish hentry" id="post-397">
<header class="entry-header post-title">
<h1 class="entry-title h1 text-center display-4-md display-3-lg mt-2"><?= $L['archive']; ?></h1>
<hr class="hr-after mx-auto">
</header>
<div class="entry-content post-content post-page inside-text">
<div class="gap-2"></div>
<?php
$folder = 'service/images/pdf';
$files = glob("$folder/*.pdf");
rsort($files);
$perPage = 16;
$total = count($files);
$totalPages = ceil($total / $perPage);
$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$page = max(1, min($totalPages, $page));
$start = ($page - 1) * $perPage;
$filesPage = array_slice($files, $start, $perPage);
echo '<div class="row">';
foreach ($filesPage as $file) {
$filename = basename($file, '.pdf');
$pdf_url = "$folder/$filename.pdf";
$img_url = "$folder/$filename.jpg";
echo <<<HTML
<div class="col-md-4 col-sm-5 col-6 mb-4">
<div class="card h-100 shadow-sm position-relative overflow-hidden">
<a href="$pdf_url" target="_blank" class="d-block">
<div class="card-img-container">
HTML;
if (file_exists($img_url)) {
echo "<img src='$img_url' loading='lazy' class='w-100 h-100' style='object-fit:cover;' alt='العدد $filename'>";
} else {
echo "<canvas class='pdf-canvas w-100 h-100' data-pdf='$pdf_url' style='background:#f4f4f4;'></canvas>";
}
echo <<<HTML
<div class="overlay-title">العدد $filename</div>
</div>
</a>
</div>
</div>
HTML;
}
echo '</div>';
echo '<nav aria-label="Page navigation"><ul class="pagination justify-content-center">';
for ($i = 1; $i <= $totalPages; $i++) {
$active = ($i == $page) ? 'active' : '';
echo "<li class='page-item $active'><a class='page-link' href='?page=$i'>$i</a></li>";
}
echo '</ul></nav>';
?>
<hr class="my-4" />
<div class="gap-1"></div>
</div>
</article>
</div>
<?php include('right_sidebar.php'); ?>
</div>
</div>
</main>
<!-- تحسين تصميم العنوان فوق الصورة وتحسين الاستجابة -->
<style>
.overlay-title {
position: absolute;
bottom: 0;
width: 100%;
background: rgba(0, 0, 0, 0.4);
color: #fff;
padding: 5px 6px;
font-size: 0.85rem;
font-weight: bold;
text-align: center;
text-shadow: 0 0 3px #000;
}
/* الحاوية الخاصة بالصورة أو الـ canvas */
.card-img-container {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4; /* ارتفاع نسبي جيد للموبايل */
}
/* لأجهزة التابلت والديسكتوب */
@media (min-width: 768px) {
.card-img-container {
height: 340px;
aspect-ratio: auto;
}
}
</style>