Merge pull request 'Add gaussian blurs behind photos' (#34) from image-blur into master

Reviewed-on: Public/pics#34
This commit is contained in:
Aaron van Geffen 2023-11-11 12:05:00 +01:00
commit 5aec2f25b1
4 changed files with 118 additions and 38 deletions

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
@ -366,22 +390,53 @@ footer a {
/* Styling for the photo pages /* Styling for the photo pages
--------------------------------*/ --------------------------------*/
#photo_frame {
padding-top: 1.5vh;
text-align: center;
}
#photo_frame a {
#photo_frame {
padding: 3.5vh 0;
text-align: center;
height: 95vh;
} }
#photo_frame a img {
border: none; #photo-figure {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); position: relative;
cursor: -moz-zoom-in;
display: inline-block;
height: 97vh;
max-width: 100%;
object-fit: contain; object-fit: contain;
width: auto; height: 93vh;
object-position: center center;
}
#photo-figure img {
object-position: center center;
}
#photo-figure img.normal-photo {
border: none;
cursor: -moz-zoom-in;
object-fit: contain;
z-index: 20;
position: absolute;
left: 0;
top: 0;
}
#photo-figure img.blur-photo {
filter: blur(50px);
left: 0;
object-fit: contain;
position: absolute;
top: 0;
z-index: 0;
}
figure.portrait-figure,
figure.landscape-figure {
height: 93vh;
margin: 0 auto;
}
figure.panorama-figure {
object-fit: cover;
margin: 0 auto;
}
figure#photo-figure img.normal-photo,
figure#photo-figure img.blur-photo {
height: 100%;
width: 100%;
} }
#previous_photo, #next_photo { #previous_photo, #next_photo {

View File

@ -42,7 +42,7 @@ class AlbumIndex extends Template
{ {
echo ' echo '
<div class="col-md-6 col-xl-4"> <div class="col-md-6 col-xl-4">
<div class="polaroid landscape">'; <div class="polaroid landscape" style="aspect-ratio: 1.12">';
if ($this->show_edit_buttons) if ($this->show_edit_buttons)
echo ' echo '
@ -58,15 +58,20 @@ class AlbumIndex extends Template
$thumbs[$factor] = $album['thumbnail']->getThumbnailUrl( $thumbs[$factor] = $album['thumbnail']->getThumbnailUrl(
static::TILE_WIDTH * $factor, static::TILE_HEIGHT * $factor, true, true); static::TILE_WIDTH * $factor, static::TILE_HEIGHT * $factor, true, true);
echo ' foreach (['normal-photo', 'blur-photo'] as $className)
{
echo '
<img alt="" src="', $thumbs[1], '"' . (isset($thumbs[2]) ? <img alt="" src="', $thumbs[1], '"' . (isset($thumbs[2]) ?
' srcset="' . $thumbs[2] . ' 2x"' : '') . ' srcset="' . $thumbs[2] . ' 2x"' : '') .
' class="', $className, '"' .
' alt="" style="aspect-ratio: ', self::TILE_RATIO, '">'; ' alt="" style="aspect-ratio: ', self::TILE_RATIO, '">';
}
} }
else else
{ {
echo ' echo '
<img alt="" src="', BASEURL, '/images/nothumb.svg"', <img alt="" src="', BASEURL, '/images/nothumb.svg"',
' class="placeholder-image"',
' style="aspect-ratio: ', self::TILE_RATIO, '; object-fit: unset">'; ' style="aspect-ratio: ', self::TILE_RATIO, '; object-fit: unset">';
} }

View File

@ -67,17 +67,31 @@ class PhotoPage extends Template
protected function photo() protected function photo()
{ {
echo ' echo '
<div id="photo_frame"> <a href="', $this->photo->getUrl(), '">
<a href="', $this->photo->getUrl(), '">'; <div id="photo_frame">';
if ($this->photo->isPortrait()) if ($this->photo->isPortrait())
echo $this->photo->getInlineImage(null, 960); {
echo '
<figure id="photo-figure" class="portrait-figure">',
$this->photo->getInlineImage(null, 960, 'normal-photo'),
$this->photo->getInlineImage(null, 960, 'blur-photo'), '
</figure>';
}
else else
echo $this->photo->getInlineImage(1280, null); {
$className = $this->photo->isPanorama() ? 'panorama-figure' : 'landscape-figure';
echo '
<figure id="photo-figure" class="', $className, '">',
$this->photo->getInlineImage(1280, null, 'normal-photo'),
$this->photo->getInlineImage(1280, null, 'blur-photo'), '
</figure>';
}
echo ' echo '
</a> </figure>
</div>'; </div>
</a>';
} }
private function photoNav() private function photoNav()

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 '