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

Add gaussian blurs behind photos #34

Merged
Aaron merged 7 commits from image-blur into master 2023-11-11 12:05:01 +01:00
Conversation 0 Commits 7 Files Changed 4 +9 -12
2 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9b192aa7a6 - Show all commits

17
public/css/default.css
View File

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

4
templates/PhotoPage.php
View File

@ -73,7 +73,7 @@ class PhotoPage extends Template
if ($this->photo->isPortrait()) if ($this->photo->isPortrait())
{ {
echo ' 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, 'normal-photo'),
$this->photo->getInlineImage(null, 960, 'blur-photo'), ' $this->photo->getInlineImage(null, 960, 'blur-photo'), '
</figure>'; </figure>';
@ -82,7 +82,7 @@ class PhotoPage extends Template
{ {
$className = $this->photo->isPanorama() ? 'panorama-figure' : 'landscape-figure'; $className = $this->photo->isPanorama() ? 'panorama-figure' : 'landscape-figure';
echo ' 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, 'normal-photo'),
$this->photo->getInlineImage(1280, null, 'blur-photo'), ' $this->photo->getInlineImage(1280, null, 'blur-photo'), '
</figure>'; </figure>';