feat(site): display filename and size in lightbox

This commit is contained in:
Jonah Lawrence 2022-01-10 12:21:02 -07:00
parent 7c41715c2b
commit 3b20c2b94f
No known key found for this signature in database
GPG Key ID: 613851A667DC08A3
1 changed files with 12 additions and 2 deletions

View File

@ -99,6 +99,7 @@ if (isset($_GET['random'])) {
.gallery img { .gallery img {
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 122px;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
@ -111,6 +112,14 @@ if (isset($_GET['random'])) {
.gallery img:hover { .gallery img:hover {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
} }
.glightbox-clean .gslide-description {
background: #1d1d1d
}
div.gslide-desc {
color: #fff;
}
</style> </style>
</head> </head>
@ -146,8 +155,9 @@ if (isset($_GET['random'])) {
<div class="gallery"> <div class="gallery">
<?php foreach ($images as $image) : ?> <?php foreach ($images as $image) : ?>
<a href="<?= $image; ?>" class="glightbox"> <?php $dimensions = getimagesize($image); ?>
<img src="<?= $imgproxy_prefix . basename($image); ?>" loading="lazy" alt="<?php echo basename($image); ?>" title="<?php echo basename($image); ?>"> <a href="<?= $image; ?>" class="glightbox" data-description="<?= basename($image); ?> • <?= $dimensions[0] . 'x' . $dimensions[1]; ?>">
<img src="<?= $imgproxy_prefix . basename($image); ?>" loading="lazy" alt="<?= basename($image); ?>" title="<?= basename($image); ?>">
</a> </a>
<?php endforeach; ?> <?php endforeach; ?>
</div> </div>