Merge pull request 'Add gaussian blurs behind photos' (#34) from image-blur into master
Reviewed-on: #34
This commit is contained in:
commit
5aec2f25b1
|
|
@ -199,33 +199,57 @@ i.space-invader.alt-7::before {
|
|||
|
||||
div.polaroid {
|
||||
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;
|
||||
position: relative;
|
||||
transition: 0.25s;
|
||||
}
|
||||
div.polaroid img {
|
||||
background: url('../images/nothumb.svg') center no-repeat;
|
||||
div.polaroid:hover {
|
||||
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;
|
||||
left: 0;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
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 {
|
||||
background: #fff;
|
||||
bottom: 0;
|
||||
color: #000;
|
||||
margin: 0;
|
||||
font: 400 18px 'Coda', sans-serif;
|
||||
padding: 15px 5px;
|
||||
position: absolute;
|
||||
text-overflow: ellipsis;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
z-index: 20;
|
||||
}
|
||||
div.polaroid a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
div.polaroid:hover {
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Album title boxes
|
||||
|
|
@ -366,22 +390,53 @@ footer a {
|
|||
|
||||
/* 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;
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
cursor: -moz-zoom-in;
|
||||
display: inline-block;
|
||||
height: 97vh;
|
||||
max-width: 100%;
|
||||
|
||||
#photo-figure {
|
||||
position: relative;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ class AlbumIndex extends Template
|
|||
{
|
||||
echo '
|
||||
<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)
|
||||
echo '
|
||||
|
|
@ -58,15 +58,20 @@ class AlbumIndex extends Template
|
|||
$thumbs[$factor] = $album['thumbnail']->getThumbnailUrl(
|
||||
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]) ?
|
||||
' srcset="' . $thumbs[2] . ' 2x"' : '') .
|
||||
' class="', $className, '"' .
|
||||
' alt="" style="aspect-ratio: ', self::TILE_RATIO, '">';
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
echo '
|
||||
<img alt="" src="', BASEURL, '/images/nothumb.svg"',
|
||||
' class="placeholder-image"',
|
||||
' style="aspect-ratio: ', self::TILE_RATIO, '; object-fit: unset">';
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -67,17 +67,31 @@ class PhotoPage extends Template
|
|||
protected function photo()
|
||||
{
|
||||
echo '
|
||||
<div id="photo_frame">
|
||||
<a href="', $this->photo->getUrl(), '">';
|
||||
<a href="', $this->photo->getUrl(), '">
|
||||
<div id="photo_frame">';
|
||||
|
||||
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
|
||||
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 '
|
||||
</a>
|
||||
</div>';
|
||||
</figure>
|
||||
</div>
|
||||
</a>';
|
||||
}
|
||||
|
||||
private function photoNav()
|
||||
|
|
|
|||
|
|
@ -83,27 +83,33 @@ class PhotosIndex extends Template
|
|||
|
||||
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 '
|
||||
<div class="polaroid ', $className, '">';
|
||||
<div class="polaroid ', $className, '" style="aspect-ratio: ', $aspectRatio, '">';
|
||||
|
||||
if ($this->show_edit_buttons)
|
||||
echo '
|
||||
<a class="edit" href="', BASEURL, '/editasset/?id=', $image->getId(), '">Edit</a>';
|
||||
|
||||
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), '"';
|
||||
|
||||
// Can we offer double-density thumbs?
|
||||
if ($image->width() >= $width * 2 && $image->height() >= $height * 2)
|
||||
echo ' srcset="', $image->getThumbnailUrl($width * 2, $height * 2, $crop, $fit), ' 2x"';
|
||||
else
|
||||
echo ' srcset="', $image->getThumbnailUrl($image->width(), $image->height(), true), ' 2x"';
|
||||
// Can we offer double-density thumbs?
|
||||
if ($image->width() >= $width * 2 && $image->height() >= $height * 2)
|
||||
echo ' srcset="', $image->getThumbnailUrl($width * 2, $height * 2, $crop, $fit), ' 2x"';
|
||||
else
|
||||
echo ' srcset="', $image->getThumbnailUrl($image->width(), $image->height(), true), ' 2x"';
|
||||
|
||||
// Prefer thumbnail aspect ratio if available, otherwise use image aspect ratio.
|
||||
$aspectRatio = isset($width, $height) ? $width / $height : $image->ratio();
|
||||
|
||||
echo ' alt="" title="', $image->getTitle(), '" style="aspect-ratio: ', $aspectRatio, '">';
|
||||
echo ' alt="" title="', $image->getTitle(), '" class="', $className, '" style="aspect-ratio: ', $aspectRatio, '">';
|
||||
}
|
||||
|
||||
if ($this->show_labels)
|
||||
echo '
|
||||
|
|
|
|||
Loading…
Reference in New Issue