forked from Public/pics
Merge pull request 'Add gaussian blurs behind photos' (#34) from image-blur into master
Reviewed-on: Public/pics#34
This commit is contained in:
commit
5aec2f25b1
@ -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 {
|
||||||
|
@ -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);
|
||||||
|
|
||||||
|
foreach (['normal-photo', 'blur-photo'] as $className)
|
||||||
|
{
|
||||||
echo '
|
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">';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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()
|
||||||
|
@ -83,15 +83,23 @@ 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?
|
||||||
@ -100,10 +108,8 @@ class PhotosIndex extends Template
|
|||||||
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 '
|
||||||
|
Loading…
Reference in New Issue
Block a user