Adds non comitted changes for Gallery

OSGeo · May 3, 2020 · 705b577 · 705b577
1 parent 195c99d
commit 705b577
Show file tree

Hide file tree

Showing 9 changed files with 542 additions and 4 deletions.
diff --git a/content/learn/gallery.md b/content/learn/gallery.md
@@ -0,0 +1,37 @@
+---
+title: "Gallery"
+description: "GRASS GIS screenshots"
+date: 2020-05-03T11:02:05+06:00
+layout: "gallery"
+---
+
+{{< photoswipe >}}
+
+
+### User Interface
+
+{{< gallery dir="/images/gallery/gui/" />}}
+
+### Vector support
+
+{{< gallery dir="/images/gallery/vector/" />}}
+
+### Raster support
+
+{{< gallery dir="/images/gallery/raster/" />}}
+
+### 3D support
+
+{{< gallery dir="/images/gallery/3D/" />}}
+
+### Lidar support
+
+{{< gallery dir="/images/gallery/lidar/" />}}
+
+### Remote sensing
+
+{{< gallery dir="/images/gallery/remote_sensing/" />}}
+
+### Cartography
+
+{{< gallery dir="/images/gallery/cartography/" />}}
diff --git a/themes/grass/assets/css/gallery.css b/themes/grass/assets/css/gallery.css
@@ -0,0 +1,135 @@
+
+.gallery {
+    overflow: hidden;
+    margin: 10px;
+    max-width: 768px;
+}
+.gallery .box {
+    float: left;
+    position: relative;
+    width: 100%;
+    padding-bottom: 100%; 
+}
+@media only screen and (min-width : 365px) {
+    .gallery .box {
+        width: 50%;
+        padding-bottom: 50%;
+    }
+}
+@media only screen and (min-width : 480px) {
+    .gallery .box {
+        width: 33.3%;
+        padding-bottom: 33.3%;
+    }
+}
+@media only screen and (min-width : 9999px) {
+   .box {
+      width: 25%;
+      padding-bottom: 25%;
+   }
+}
+
+.gallery.hover-transition figure,
+.gallery.hover-effect-zoom .img, 
+.gallery:not(.caption-effect-appear) figcaption,
+.fancy-figure:not(.caption-effect-appear) figcaption {
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+    -o-transition: all 0.3s ease-in-out;
+    transition: all 0.3s ease-in-out;
+}
+
+figure {
+    position:relative; 
+    overflow: hidden;
+}
+.gallery figure {
+    position: absolute;
+    left: 5px;
+    right: 5px;
+    top: 5px;
+    bottom: 5px;
+}
+.gallery.hover-effect-grow figure:hover {
+    transform: scale(1.05);
+}
+.gallery.hover-effect-shrink figure:hover {
+    transform: scale(0.95);
+}
+.gallery.hover-effect-slidedown figure:hover {
+    transform: translateY(5px);
+}
+.gallery.hover-effect-slideup figure:hover {
+    transform: translateY(-5px);
+}
+
+.gallery .img {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-size: cover;
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+}
+.gallery.hover-effect-zoom figure:hover .img {
+    transform: scale(1.05);
+}
+.gallery img {
+    display: none;
+}
+figure a {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.gallery figcaption,
+.fancy-figure figcaption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: #000;
+    color: #FFF;
+    text-align: center;
+    font-size: 85%;
+    background: rgba(0, 0, 0, 0.5);
+    opacity: 1;
+    cursor: pointer;
+}
+.gallery.caption-position-none figcaption,
+.fancy-figure.caption-position-none figcaption  {
+    display: none;
+}
+.gallery.caption-position-center figcaption,
+.fancy-figure.caption-position-center figcaption {
+    top: 0;
+    padding: 40% 5px;
+}
+.gallery.caption-position-bottom figcaption,
+.fancy-figure.caption-position-bottom figcaption {
+    padding: 5px;
+}
+.gallery.caption-effect-fade figure:not(:hover) figcaption,
+.gallery.caption-effect-appear figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-fade figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-appear figure:not(:hover) figcaption {
+    background: rgba(0, 0, 0, 0);
+    opacity: 0;
+}
+.gallery.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption {
+    margin-bottom: -100%;
+}
+.gallery.caption-effect-slide.caption-position-center figure:not(:hover) figcaption,
+.fancy-figure.caption-effect-slide.caption-position-center figure:not(:hover) figcaption  {
+    top: 100%;
+}
+figcaption p {
+    margin: auto; 
+}
+
diff --git a/themes/grass/layouts/learn/gallery.html b/themes/grass/layouts/learn/gallery.html
@@ -0,0 +1,59 @@
+{{ partial "head.html" . }}
+
+
+{{ "<!-- navigation -->" | safeHTML }}
+<header class="shadow-bottom position-relative">
+  <div class="container">
+    {{ partial "navigation.html" . }}
+  </div>
+</header>
+{{ "<!-- /navigation -->" | safeHTML }}
+
+<!-- page title -->
+<section class="section bg-lgr">
+  <div class="container">
+    <div class="row">
+    <div class="col-lg-8 mx-auto text-center">      
+       <h1 class="grass-green cap">{{ .Title}}</h1>
+      </div>
+    </div>
+  </div>
+</section>
+
+  <section class="bg-white pb-0">
+   {{ partial "breadcrumb.html" . }}
+  </section>
+
+  <section class="single section bg-gray pb-0">
+    <div class="container">
+      <div class="row">
+        <div class="col-lg-4">
+          <div class="p-4 bg-lgr sticky-top">
+            <nav class="sidebar-menu">
+              <div class="list-styled">
+                <h3 class="mt-20">Categories</h3>
+              </div>
+            </nav>
+	      <ul>
+		<li><a href="#user-interface">User Interface</a></li>
+		<li><a href="#vector-support">Vector support</a></li>
+	       <li><a href="#raster-support">Raster support</a></li>
+	       <li><a href="#3d-support">3D support</a></li>
+	       <li><a href="#lidar-support">Lidar support</a></li>
+	       <li><a href="#remote-sensing">Remote sensing</a></li>
+	       <li><a href="#cartography">Cartography</a></li>
+	     </ul>
+          </div>
+        </div>
+        <div class="col-lg-8">
+          <div class="p-5 bg-white">
+	    <h2 class="page-title">{{ .Description }}</h2>
+
+	   {{ .Content }}
+          </div>
+        </div>
+      </div>
+    </div>
+    </section>
+
+  {{ partial "footer.html" . }}
diff --git a/themes/grass/layouts/partials/footer.html b/themes/grass/layouts/partials/footer.html
@@ -25,10 +25,10 @@
 
 {{ "<!-- Bootstrap JS -->" | safeHTML }}
 <script src="{{ .Site.BaseURL }}plugins/bootstrap/bootstrap.min.js"></script>
-{{ "<!-- highlight -->" | safeHTML }}
-<script src="{{ .Site.BaseURL }}plugins/highlight/highlight.pack.js"></script>
-<script>hljs.initHighlightingOnLoad();</script>
-
+  {{ "<!-- highlight -->" | safeHTML }}
+  <script src="{{ .Site.BaseURL }}plugins/highlight/highlight.pack.js"></script>
+  <script>hljs.initHighlightingOnLoad();</script>
+  <script src="{{ .Site.BaseURL }}plugins/gallery/photoswipe.js"></script>
 {{ "<!-- Main Script -->" | safeHTML }}
 {{ $script := resources.Get "js/script.js" | minify}}
 <script src="{{ $script.Permalink }}"></script>

diff --git a/themes/grass/layouts/shortcodes/figure.html b/themes/grass/layouts/shortcodes/figure.html
@@ -0,0 +1,23 @@
+
+{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href="/css/gallery.css" />{{ end }}
+{{- $.Page.Scratch.Add "figurecount" 1 -}}
+{{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
+<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
+  <figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+    <div class="img"{{ if .Parent }} style="background-image: url('{{ $thumb | relURL }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
+      <img itemprop="thumbnail" src="{{ $thumb | relURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><
+    </div>
+    {{ with .Get "link" | default (.Get "src") }}<a href="{{.}}" itemprop="contentUrl"></a>{{ end }}
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
+      <figcaption>
+        {{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
+        {{- if or (.Get "caption") (.Get "attr")}}
+          <p>
+            {{- .Get "caption" -}}
+            {{- with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end -}}
+          </p>
+        {{- end }}
+      </figcaption>
+    {{- end }}
+  </figure>
+</div>
diff --git a/themes/grass/layouts/shortcodes/gallery.html b/themes/grass/layouts/shortcodes/gallery.html
@@ -0,0 +1,34 @@
+
+{{- if not ($.Page.Scratch.Get "figurecount") }}  <link rel="stylesheet" href="{{ .Site.BaseURL }}plugins/gallery/gallery.css">{{ end }}
+{{- $.Page.Scratch.Add "figurecount" 1 }}
+{{ $baseURL := .Site.BaseURL }}
+<div class="gallery caption-position-{{ with .Get "caption-position" | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .Get "caption-effect" | default "slide" }}{{.}}{{end}} hover-effect-{{ with .Get "hover-effect" | default "zoom" }}{{.}}{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
+	{{- with (.Get "dir") -}}
+		{{- $files := readDir (print "/static/" .) }}
+		{{- range $files -}}
+			{{- $thumbext := $.Get "thumb" | default "-thumb" }}
+			{{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }}
+			{{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp)" }}
+			{{- if and $isimg (not $isthumb) }}
+				{{- $caption :=  .Name | replaceRE "\\..*" "" | humanize }}
+				{{- $linkURL := print $baseURL ($.Get "dir") "/" .Name | absURL }}
+				{{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}
+				{{- $thumbexists := where $files "Name" $thumb }}
+				{{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }}
+				<div class="box">
+				  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
+				    <div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" >
+				      <img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" />
+				    </div>
+			      <figcaption>
+		          <p>{{ $caption }}</p>
+			      </figcaption>
+				    <a href="{{ $linkURL }}" itemprop="contentUrl"></a>
+				  </figure>
+				</div>
+			{{- end }}
+		{{- end }}
+	{{- else -}}
+	  {{ .Inner }}
+	{{- end }}
+</div>
diff --git a/themes/grass/layouts/shortcodes/photoswipe.html b/themes/grass/layouts/shortcodes/photoswipe.html
@@ -0,0 +1,46 @@
+
+{{ if not ($.Page.Scratch.Get "photoswipeloaded") }}
+  {{ $.Page.Scratch.Set "photoswipeloaded" 1 }}
+
+<link rel="stylesheet" href="{{ .Site.BaseURL }}plugins/gallery/photoswipe.min.css"/>
+<link rel="stylesheet" href="{{ .Site.BaseURL }}plugins/gallery/default-skin.min.css"/>
+<script src="{{ .Site.BaseURL }}plugins/gallery/photoswipe.min.js"></script>
+<script src="{{ .Site.BaseURL }}plugins/gallery/photoswipe-ui-default.min.js"></script>
+
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="pswp__bg"></div>
+<div class="pswp__scroll-wrap">
+    <div class="pswp__container">
+      <div class="pswp__item"></div>
+      <div class="pswp__item"></div>
+      <div class="pswp__item"></div>
+    </div>
+    <div class="pswp__ui pswp__ui--hidden">
+    <div class="pswp__top-bar">
+      <div class="pswp__counter"></div>
+      <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+      <button class="pswp__button pswp__button--share" title="Share"></button>
+      <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
+      <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+      <div class="pswp__preloader">
+        <div class="pswp__preloader__icn">
+          <div class="pswp__preloader__cut">
+            <div class="pswp__preloader__donut"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+      <div class="pswp__share-tooltip"></div>
+    </div>
+    <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+    </button>
+    <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+    </button>
+    <div class="pswp__caption">
+      <div class="pswp__caption__center"></div>
+    </div>
+    </div>
+    </div>
+</div>
+{{ end }}