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

PhotoPage: trying out blur on the photo page

Browse Source
This commit is contained in:
Aaron van Geffen 2023-11-10 22:50:51 +01:00
parent 66478c5922
commit aa82efe03e
2 changed files with 65 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
public/css/default.css
View File

@ -390,22 +390,60 @@ 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-figure {
position: relative;
} }
#photo_frame a img { #photo-figure img.normal-photo {
border: none; border: none;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
cursor: -moz-zoom-in; cursor: -moz-zoom-in;
display: inline-block; display: inline-block;
height: 97vh;
max-width: 100%; max-width: 100%;
object-fit: contain; object-fit: contain;
width: auto; width: auto;
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;
width: auto;
z-index: 0;
}
#photo_frame {
padding-top: 1.5vh;
text-align: center;
height: 97vh;
}
figure.portrait-figure,
figure.landscape-figure {
height: 97vh;
margin: 0 auto;
}
figure.panorama-figure {
width: 90vw;
object-fit: cover;
margin: 0 auto;
}
figure.portrait-figure img.normal-photo,
figure.portrait-figure img.blur-photo,
figure.landscape-figure img.normal-photo,
figure.landscape-figure img.blur-photo {
height: 100%;
width: 100%;
}
figure.panorama-figure img.normal-photo,
figure.panorama-figure img.blur-photo {
width: 100%;
height: auto;
} }
#previous_photo, #next_photo { #previous_photo, #next_photo {

26
templates/PhotoPage.php
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" style="aspect-ratio: ', $this->photo->ratio(), '">',
$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, '" style="aspect-ratio: ', $this->photo->ratio(), '">',
$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()