Permalink
Browse files

Add photo "lightbox"

Simple and does not do multi image well
  • Loading branch information...
TheBiggerGuy committed Sep 2, 2018
1 parent 3e97090 commit bb32ad4b480c33465706b5f0f379b59bf8a695a2
Showing with 59 additions and 6 deletions.
  1. +7 −0 site/assets/scss/bootstrap.scss
  2. +25 −0 site/assets/scss/main.scss
  3. +27 −6 site/layouts/photography/single.html
@@ -5,7 +5,14 @@
$body-bg: color("gray-dark");
$body-color: color("white"); /* TODO: Use color("gray-light") to tone down some areas */

$border-color: color("gray");

/* Defaults: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; */
$font-family-sans-serif: Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;


$modal-content-bg: $body-bg;
$modal-content-border-color: $border-color;
$modal-header-border-color: $border-color;

@import "../../../bootstrap/scss/bootstrap";
@@ -43,3 +43,28 @@
padding-top: 3.5rem;
}

/*
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
) !default;
$modal-lg: 800px !default;
$modal-md: 500px !default;
$modal-sm: 300px !default;
*/


$modal-xl: 1200px !default;

@include media-breakpoint-up(sm) {
.modal-xl { max-width: $modal-xl; }
}
@@ -4,19 +4,40 @@
<h1>{{ .Title }}</h1>
<div class="mx-auto">

{{ $photo_id := -1 }}
{{ range $photo := .Params.Photos }}
{{ $photo_id = add $photo_id 1 }}

{{ with $photo_resource := $.Resources.GetMatch $photo.File }}
{{ if ne $photo_resource.ResourceType "image" }}{{ errorf "Image ResourceType not jpg: %s" $photo_resource.ResourceType }}{{ end }}
{{ $photo_resized_425 := $photo_resource.Fit "425x500" }}
{{ $photo_resized_1024 := $photo_resource.Fit "1024x500" }}
<picture>
<source srcset="{{ $photo_resized_1024.Permalink }}" media="(min-width: 640px)">
<img src="{{ $photo_resized_425.Permalink }}" alt="{{ $.Page.Description }}" class="img-fluid">
</picture>
{{ end }}
{{ $photo_resized_1200 := $photo_resource.Fit "1200x768" }}
<a href="#" data-toggle="modal" data-target="#picture-modal-dialog-{{ $photo_id }}">
<picture>
<source srcset="{{ $photo_resized_1024.Permalink }}" media="(min-width: 640px)">
<img src="{{ $photo_resized_425.Permalink }}" alt="{{ $.Page.Description }}" class="img-fluid">
</picture>
</a>
<p class="text-muted">Captured on {{ dateFormat "2006-01-02" $photo.Date }} and finished on {{ dateFormat "2006-01-02" $.Page.Date }}</p>

<p class="text-muted">Captured on {{ dateFormat "2006-01-02" $photo.Date }} and finished on {{ dateFormat "2006-01-02" $.Page.Date }}</p>
<div id="picture-modal-dialog-{{ $photo_id }}" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{{ $.Title }}</h5>
</div>
<div class="modal-body">
<picture>
<source srcset="{{ $photo_resized_1200.Permalink }}" media="(min-width: 1024px)">
<source srcset="{{ $photo_resized_1024.Permalink }}" media="(min-width: 640px)">
<img src="{{ $photo_resized_425.Permalink }}" alt="{{ $.Page.Description }}" class="img-fluid">
</picture>
</div>
</div>
</div>
</div>
{{ end }}

{{ end }}
<p class="lead">{{ .Description }}</p>

0 comments on commit bb32ad4

Please sign in to comment.