Public
/
pics
2
2
Fork 2
Code Issues 6 Pull Requests Releases Wiki Activity

PhotoPage: fix position and size of blurred photo

This commit is contained in:
Aaron van Geffen 2023-11-10 23:22:09 +01:00
parent aa82efe03e
commit 9b192aa7a6
2 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
public/css/default.css
View File

@ -391,17 +391,21 @@ footer a {
/* Styling for the photo pages
--------------------------------*/
#photo_frame {
padding-top: 1.5vh;
text-align: center;
height: 97vh;
}
#photo-figure {
position: relative;
object-fit: contain;
}
#photo-figure img.normal-photo {
border: none;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
cursor: -moz-zoom-in;
display: inline-block;
max-width: 100%;
object-fit: contain;
width: auto;
z-index: 20;
position: absolute;
left: 0;
@ -413,15 +417,9 @@ footer a {
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 {
@ -429,7 +427,6 @@ figure.landscape-figure {
margin: 0 auto;
}
figure.panorama-figure {
width: 90vw;
object-fit: cover;
margin: 0 auto;
}

4
templates/PhotoPage.php
View File

@ -73,7 +73,7 @@ class PhotoPage extends Template
if ($this->photo->isPortrait())
{
echo '
<figure id="photo-figure" class="portrait-figure" style="aspect-ratio: ', $this->photo->ratio(), '">',
<figure id="photo-figure" class="portrait-figure">',
$this->photo->getInlineImage(null, 960, 'normal-photo'),
$this->photo->getInlineImage(null, 960, 'blur-photo'), '
</figure>';
@ -82,7 +82,7 @@ class PhotoPage extends Template
{
$className = $this->photo->isPanorama() ? 'panorama-figure' : 'landscape-figure';
echo '
<figure id="photo-figure" class="', $className, '" style="aspect-ratio: ', $this->photo->ratio(), '">',
<figure id="photo-figure" class="', $className, '">',
$this->photo->getInlineImage(1280, null, 'normal-photo'),
$this->photo->getInlineImage(1280, null, 'blur-photo'), '
</figure>';