Joost/pics
1
0
Fork 0
forked from Public/pics
Code Issues Pull Requests Projects Releases Wiki Activity

PhotosIndex: add blurred versions of thumbnails for added coolness

Browse Source
This commit is contained in:
Aaron van Geffen 2023-11-10 21:57:23 +01:00
parent 238dc1d6e7
commit a69c987510
2 changed files with 47 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
public/css/default.css
View File

@ -199,33 +199,57 @@ i.space-invader.alt-7::before {
div.polaroid { div.polaroid {
background: #fff; background: #fff;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
line-height: 0; line-height: 0;
position: relative; position: relative;
transition: 0.25s;
} }
div.polaroid img { div.polaroid:hover {
background: url('../images/nothumb.svg') center no-repeat; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
div.polaroid img.normal-photo {
background: #fff url('../images/nothumb.svg') center no-repeat;
border: none; border: none;
left: 0;
object-fit: cover; object-fit: cover;
position: absolute;
top: 0;
width: 100%; width: 100%;
z-index: 20;
}
div.polaroid img.blur-photo {
filter: blur(50px);
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
div.polaroid img.placeholder-image {
background: #fff;
z-index: 20;
} }
div.polaroid h4 { div.polaroid h4 {
background: #fff;
bottom: 0;
color: #000; color: #000;
margin: 0; margin: 0;
font: 400 18px 'Coda', sans-serif; font: 400 18px 'Coda', sans-serif;
padding: 15px 5px; padding: 15px 5px;
position: absolute;
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center; text-align: center;
width: 100%;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
z-index: 20;
} }
div.polaroid a { div.polaroid a {
display: block; display: block;
text-decoration: none; text-decoration: none;
} }
div.polaroid:hover {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
/* Album title boxes /* Album title boxes

28
templates/PhotosIndex.php
View File

@ -83,27 +83,33 @@ class PhotosIndex extends Template
protected function photo(Image $image, $className, $width, $height, $crop = true, $fit = true) protected function photo(Image $image, $className, $width, $height, $crop = true, $fit = true)
{ {
// Prefer thumbnail aspect ratio if available, otherwise use image aspect ratio.
$aspectRatio = isset($width, $height) ? $width / $height : $image->ratio();
echo ' echo '
<div class="polaroid ', $className, '">'; <div class="polaroid ', $className, '" style="aspect-ratio: ', $aspectRatio, '">';
if ($this->show_edit_buttons) if ($this->show_edit_buttons)
echo ' echo '
<a class="edit" href="', BASEURL, '/editasset/?id=', $image->getId(), '">Edit</a>'; <a class="edit" href="', BASEURL, '/editasset/?id=', $image->getId(), '">Edit</a>';
echo ' echo '
<a href="', $image->getPageUrl(), $this->url_suffix, '#photo_frame"> <a href="', $image->getPageUrl(), $this->url_suffix, '#photo_frame">';
foreach (['normal-photo', 'blur-photo'] as $className)
{
echo '
<img src="', $image->getThumbnailUrl($width, $height, $crop, $fit), '"'; <img src="', $image->getThumbnailUrl($width, $height, $crop, $fit), '"';
// Can we offer double-density thumbs? // Can we offer double-density thumbs?
if ($image->width() >= $width * 2 && $image->height() >= $height * 2) if ($image->width() >= $width * 2 && $image->height() >= $height * 2)
echo ' srcset="', $image->getThumbnailUrl($width * 2, $height * 2, $crop, $fit), ' 2x"'; echo ' srcset="', $image->getThumbnailUrl($width * 2, $height * 2, $crop, $fit), ' 2x"';
else else
echo ' srcset="', $image->getThumbnailUrl($image->width(), $image->height(), true), ' 2x"'; echo ' srcset="', $image->getThumbnailUrl($image->width(), $image->height(), true), ' 2x"';
// Prefer thumbnail aspect ratio if available, otherwise use image aspect ratio. echo ' alt="" title="', $image->getTitle(), '" class="', $className, '" style="aspect-ratio: ', $aspectRatio, '">';
$aspectRatio = isset($width, $height) ? $width / $height : $image->ratio(); }
echo ' alt="" title="', $image->getTitle(), '" style="aspect-ratio: ', $aspectRatio, '">';
if ($this->show_labels) if ($this->show_labels)
echo ' echo '