Merge pull request #52 from victoriadotdev/update-galleryv3.1

Update gallery template (fix #46, close #35)

46 files changed, 326 insertions, 88 deletions

diff --git a/README.md b/README.md
index 9c6624a..719023d 100755
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
 <h1><a href="https://hugo-sam.netlify.com/" target="_blank" rel="noopener">Call me Sam: a theme for Hugo</a></h1>

 

+[![Netlify Status](https://api.netlify.com/api/v1/badges/b069f23f-06c5-4af6-b1aa-6304d986f9b0/deploy-status)](https://app.netlify.com/sites/hugo-sam/deploys)

 [![Build Status](https://travis-ci.com/victoriadotdev/hugo-theme-sam.svg?branch=master)](https://travis-ci.com/victoriadotdev/hugo-theme-sam)

 ![Latest Release](https://img.shields.io/github/tag/victoriadotdev/hugo-theme-sam.svg)

 

@@ -15,7 +16,7 @@ Focused on content and typography, the stylized index page is really just a list
 

 - Showcase content

     - Content-focused page templates for list pages, single pages, and posts

-    - A responsive CSS grid gallery page that renders from a folder of images

+    - A responsive CSS grid gallery page that renders from images in your [Page Bundle](https://gohugo.io/content-management/organization/#page-bundles)

 - Customize

     - Custom navigation menu set via `config.toml`

     - Custom footer text

@@ -91,65 +92,56 @@ $ hugo new posts/your-post-title.md
 

 ## Image gallery

 

-To create an image gallery, place all the files you want included in a folder called "images" (you can change the name of the "images" folder in `config.toml` if you wish). Place your "images" folder in a subfolder of `content/` with any name. The directory structure then looks like this:

+To create an image gallery, place all the files you want included in your [Page Bundle](https://gohugo.io/content-management/organization/#page-bundles). The directory structure might then look like this:

 

 ```

 content/

  └── gallery/

-    └── images/

-    |   ├── file_1.jpg

-    |   ├── file_2.jpg

-    |   └── file_3.jpg

-    └── _index.md

+     └── _index.md

+     └── images/

+         ├── file_1.jpg

+         ├── file_2.jpg

+         └── file_3.jpg

 ```

 

-To automagically generate a gallery from the images, set `type: "gallery"` in the front-matter of `_index.md`. The gallery title is defined in the front-matter as well. You can also optionally define the page URL using `url`. Here is an example of a gallery's `_index.md`:

+To automagically generate a gallery from the images, set `type: "gallery"` in the front-matter of `_index.md`. You can also set other options for the gallery:

 

-```

+* The gallery `title`

+* The page link with `url`

+* The `maxWidth` of the resized images

+* Whether you want the images to link to the full size files, with `clickablePhotos`

+

+Here is an example of a gallery's `_index.md`:

+

+```yaml

 ---

 title: "Portraits"

 type: "gallery"

 url: "/portrait-gallery"

+maxWidth: "800x"

+clickablePhotos: true

 ---

 ```

 

-In order to create more than one gallery, create multiple subfolders in `content/` with this file structure and `type: "gallery"` defined in the `_index.md` front matter. For example:

-

+In order to create more than one gallery, create multiple Page Bundles with images and `type: "gallery"` defined in the `_index.md` front matter. For example:

 

 ```

 content/

  | └── gallery/

- |    └── images/

- |    |   ├── file_1.jpg

- |    |   ├── file_2.jpg

- |    |   └── file_3.jpg

- |    └── _index.md

+ |     └── _index.md

+ |     └── images/

+ |         ├── file_1.jpg

+ |         ├── file_2.jpg

+ |         └── file_3.jpg

  |

  └── portfolio/

-    └── images/

-    |   ├── file_1.jpg

-    |   ├── file_2.jpg

-    |   └── file_3.jpg

-    └── _index.md

+     └── _index.md

+     └── images/

+         ├── file_1.jpg

+         ├── file_2.jpg

+         └── file_3.jpg

 ```

 

-In `config.toml`, you can set `smallPreviewImages` to `true` in order to use small sized thumbnails. Include those thumbnail files in your gallery image folder. In exampleSite, this looks like:

-

-```

-content/

- └── gallery/

-    └── images/

-        │   └── small/

-        |       ├── file_1.jpg

-        |       ├── file_2.jpg

-        |       └── file_3.jpg

-        ├── file_1.jpg

-        ├── file_2.jpg

-        └── file_3.jpg

-```

-

-The thumbnails need to have the same filenames as the larger images they represent.

-

 That's it! Sam's gallery layout template will automagically build the page from your images.

 

 

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 0cbb71a..f61cb86 100755
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -13,12 +13,6 @@ pygmentsCodefences       = true
     dateformfull         = "Mon Jan 2 2006 15:04:05 EST"
     favicon              = "sam.ico"
     homepage             = "main"                           # What to call the home page link
-    galleryFolder        = "images/"                        # Where you've put your images, after "/content/gallery/"
-    clickablePhotos      = false                            # Allow links to the full size images
-    smallPreviewImages   = true                             # Show small images from the subfolder instead of the big versions in the gallery
-                                                            # Note: This will only become active if clickablePhotos is also true.
-    smallImagesSubfolder = "small/"                         # The subfolder for the small versions of the images under the gallery (with trailing slash)
-                                                            # For each image the small version has to have the same filename as the big version.
     footerText           = "Call me Sam, a theme for Hugo."
 
 # Metadata for Open Graph and Twitter
@@ -41,3 +35,6 @@ pygmentsCodefences       = true
 [[params.mainMenu]]
     link = "/about"
     text = "who is sam?"
+
+[imaging]
+    quality = 75
\ No newline at end of file
diff --git a/exampleSite/content/gallery/images/900-1.jpg b/exampleSite/content/gallery/900-1.jpg
index d50072f..d50072f 100755
--- a/exampleSite/content/gallery/images/900-1.jpg
+++ b/exampleSite/content/gallery/900-1.jpg
diff --git a/exampleSite/content/gallery/images/900-2.jpg b/exampleSite/content/gallery/900-2.jpg
index 69116cb..69116cb 100755
--- a/exampleSite/content/gallery/images/900-2.jpg
+++ b/exampleSite/content/gallery/900-2.jpg
diff --git a/exampleSite/content/gallery/images/900-3.jpg b/exampleSite/content/gallery/900-3.jpg
index a0ea2c4..a0ea2c4 100755
--- a/exampleSite/content/gallery/images/900-3.jpg
+++ b/exampleSite/content/gallery/900-3.jpg
diff --git a/exampleSite/content/gallery/images/900-4.jpg b/exampleSite/content/gallery/900-4.jpg
index 3d42a54..3d42a54 100755
--- a/exampleSite/content/gallery/images/900-4.jpg
+++ b/exampleSite/content/gallery/900-4.jpg
diff --git a/exampleSite/content/gallery/images/900-5.jpg b/exampleSite/content/gallery/900-5.jpg
index fda4a23..fda4a23 100755
--- a/exampleSite/content/gallery/images/900-5.jpg
+++ b/exampleSite/content/gallery/900-5.jpg
diff --git a/exampleSite/content/gallery/images/900-6.jpg b/exampleSite/content/gallery/900-6.jpg
index e78cfcd..e78cfcd 100755
--- a/exampleSite/content/gallery/images/900-6.jpg
+++ b/exampleSite/content/gallery/900-6.jpg
diff --git a/exampleSite/content/gallery/images/900-7.jpg b/exampleSite/content/gallery/900-7.jpg
index 4214921..4214921 100755
--- a/exampleSite/content/gallery/images/900-7.jpg
+++ b/exampleSite/content/gallery/900-7.jpg
diff --git a/exampleSite/content/gallery/images/900-8.jpg b/exampleSite/content/gallery/900-8.jpg
index 6ddd0cf..6ddd0cf 100755
--- a/exampleSite/content/gallery/images/900-8.jpg
+++ b/exampleSite/content/gallery/900-8.jpg
diff --git a/exampleSite/content/gallery/_index.md b/exampleSite/content/gallery/_index.md
index 798e69d..9644bbd 100755
--- a/exampleSite/content/gallery/_index.md
+++ b/exampleSite/content/gallery/_index.md
@@ -2,8 +2,10 @@
 title: "Photos from Tokyo"
 type: "gallery"
 url: "/gallery"
+maxWidth: "800x"
+clickablePhotos: false
 ---
 
-This responsive image gallery is rendered in random order from a folder of image files. You can choose to make the images clickable to show the full size image, or not. You can set this text in the `_index.md` file in the `/content/gallery/` folder.
+This responsive image gallery is rendered in random order from a folder of image files. It uses Hugo's [Image Processing](https://gohugo.io/content-management/image-processing/) to automatically resize your images while preserving the full size image's aspect ratio. You can configure the gallery to open the full size image file when clicked, or not. You can set this text in the `_index.md` file in the `/content/gallery/` folder.
 
-By the way, [Victoria](https://victoria.dev) took these photos in Tokyo. You can find some of them on [her nomad blog](https://heronebag.com).
+By the way, [Victoria](https://victoria.dev) took these photos while traveling. You can find some of them on [her nomad blog](https://heronebag.com).
diff --git a/exampleSite/content/gallery/images/small/900-1.jpg b/exampleSite/content/gallery/images/small/900-1.jpg
deleted file mode 100755
index 6ba9bc0..0000000
--- a/exampleSite/content/gallery/images/small/900-1.jpg
+++ /dev/null
diff --git a/exampleSite/content/gallery/images/small/900-2.jpg b/exampleSite/content/gallery/images/small/900-2.jpg
deleted file mode 100755
index e4fef01..0000000
--- a/exampleSite/content/gallery/images/small/900-2.jpg
+++ /dev/null
diff --git a/exampleSite/content/gallery/images/small/900-3.jpg b/exampleSite/content/gallery/images/small/900-3.jpg
deleted file mode 100755
index 61a32ea..0000000
--- a/exampleSite/content/gallery/images/small/900-3.jpg
+++ /dev/null
diff --git a/exampleSite/content/gallery/images/small/900-4.jpg b/exampleSite/content/gallery/images/small/900-4.jpg
deleted file mode 100755
index 876c648..0000000
--- a/exampleSite/content/gallery/images/small/900-4.jpg
+++ /dev/null
diff --git a/exampleSite/content/gallery/images/small/900-5.jpg b/exampleSite/content/gallery/images/small/900-5.jpg
deleted file mode 100755
index 61537e4..0000000
--- a/exampleSite/content/gallery/images/small/900-5.jpg
+++ /dev/null
diff --git a/exampleSite/content/gallery/images/small/900-6.jpg b/exampleSite/content/gallery/images/small/900-6.jpg
deleted file mode 100755
index a4ad40e..0000000
--- a/exampleSite/content/gallery/images/small/900-6.jpg
+++ /dev/null
diff --git a/exampleSite/content/gallery/images/small/900-7.jpg b/exampleSite/content/gallery/images/small/900-7.jpg
deleted file mode 100755
index ae3eab3..0000000
--- a/exampleSite/content/gallery/images/small/900-7.jpg
+++ /dev/null
diff --git a/exampleSite/content/gallery/images/small/900-8.jpg b/exampleSite/content/gallery/images/small/900-8.jpg
deleted file mode 100755
index bc89322..0000000
--- a/exampleSite/content/gallery/images/small/900-8.jpg
+++ /dev/null
diff --git a/exampleSite/content/portfolio/_index.md b/exampleSite/content/portfolio/_index.md
index 789ee01..759b13f 100755
--- a/exampleSite/content/portfolio/_index.md
+++ b/exampleSite/content/portfolio/_index.md
@@ -2,6 +2,8 @@
 title: "Portfolio"
 type: "gallery"
 url: "/portfolio"
+maxWidth: "600x"
+clickablePhotos: true
 ---
 
 This is another gallery of images similar to [the first one](/gallery). It can be called anything you want!
\ No newline at end of file
diff --git a/exampleSite/content/portfolio/images/alex-knight-192782-unsplash.jpg b/exampleSite/content/portfolio/alex-knight-192782-unsplash.jpg
index 6a7e9a0..6a7e9a0 100644
--- a/exampleSite/content/portfolio/images/alex-knight-192782-unsplash.jpg
+++ b/exampleSite/content/portfolio/alex-knight-192782-unsplash.jpg
diff --git a/exampleSite/content/portfolio/images/andrew-neel-308138-unsplash.jpg b/exampleSite/content/portfolio/andrew-neel-308138-unsplash.jpg
index 0945d25..0945d25 100644
--- a/exampleSite/content/portfolio/images/andrew-neel-308138-unsplash.jpg
+++ b/exampleSite/content/portfolio/andrew-neel-308138-unsplash.jpg
diff --git a/exampleSite/content/portfolio/images/headway-551543-unsplash.jpg b/exampleSite/content/portfolio/headway-551543-unsplash.jpg
index 969dc34..969dc34 100644
--- a/exampleSite/content/portfolio/images/headway-551543-unsplash.jpg
+++ b/exampleSite/content/portfolio/headway-551543-unsplash.jpg
diff --git a/exampleSite/content/portfolio/images/mildly-useful-262854-unsplash.jpg b/exampleSite/content/portfolio/mildly-useful-262854-unsplash.jpg
index 9274dc5..9274dc5 100644
--- a/exampleSite/content/portfolio/images/mildly-useful-262854-unsplash.jpg
+++ b/exampleSite/content/portfolio/mildly-useful-262854-unsplash.jpg
diff --git a/exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.content b/exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.content
new file mode 100644
index 0000000..b8ca872
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.content
@@ -0,0 +1,272 @@
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box; }
+
+html {
+  background-color: #39424E;
+  font-family: "Didact Gothic", "sans serif";
+  font-size: 16px; }
+
+body {
+  font-size: 16px;
+  font-family: "Didact Gothic", "sans serif";
+  color: #fff;
+  line-height: 2rem;
+  letter-spacing: 1.5px;
+  text-shadow: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  opacity: 1; }
+
+h1, h2, h3 {
+  margin-bottom: 0.5em;
+  text-align: center;
+  font-family: 'Didact Gothic', sans-serif;
+  opacity: 0.6; }
+
+li {
+  opacity: 0.8; }
+  li a {
+    opacity: 0.9; }
+
+ul {
+  list-style-type: none; }
+
+p {
+  display: inline;
+  opacity: 0.8; }
+
+a {
+  color: #cccccc;
+  text-decoration: none;
+  border-bottom: 2px solid #cccccc;
+  transition: 0.5s ease; }
+  a:hover {
+    color: #fff;
+    font-style: none; }
+  a:active {
+    color: #cccccc; }
+
+button {
+  padding: 20px;
+  border: 0px;
+  border-radius: 5px;
+  background: #fff; }
+  button:hover {
+    box-shadow: 5px 5px #111; }
+
+hr {
+  margin: 1rem 0;
+  background-color: transparent;
+  width: 50%;
+  border-style: solid;
+  border-width: 1px;
+  opacity: 0.3; }
+
+.wrap {
+  margin: 0 auto;
+  margin-top: 6rem;
+  width: 45%; }
+  @media screen and (max-width: 736px) {
+    .wrap {
+      padding: 1rem;
+      width: 100%; } }
+
+.tag-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center; }
+
+.tag {
+  background-color: transparent;
+  position: relative;
+  bottom: 0; }
+
+.section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start; }
+
+.bottom-menu {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-top: 3rem;
+  text-align: center; }
+
+.footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  background-color: transparent;
+  position: relative;
+  bottom: 0;
+  padding: 3rem 1rem;
+  font-family: "Didact Gothic", "sans serif";
+  font-size: 1rem;
+  line-height: 1em;
+  opacity: 0.8; }
+  .footer a {
+    border-bottom: none;
+    display: contents; }
+
+#splash {
+  margin: auto 0;
+  height: 100vh;
+  width: 45%;
+  overflow: hidden; }
+  @media screen and (max-width: 736px) {
+    #splash {
+      width: 90%; } }
+
+.big-link {
+  font-family: "Didact Gothic", "sans serif";
+  font-size: 3rem;
+  font-weight: 300;
+  margin-bottom: 2rem;
+  line-height: 1.5em; }
+
+#title {
+  margin-top: 3rem;
+  font-family: "Didact Gothic", "sans serif";
+  font-size: 2rem;
+  line-height: 3rem;
+  margin-bottom: 2rem; }
+
+#content {
+  margin: 2rem 0;
+  line-height: 2em;
+  letter-spacing: 2px; }
+  #content div {
+    width: 100%;
+    height: 100%;
+    margin-bottom: 1em; }
+  #content h1, #content h2, #content h3 {
+    margin: 1em 0em;
+    text-align: left; }
+  #content p {
+    margin-bottom: 1em;
+    line-height: 1.8;
+    letter-spacing: 1.5px;
+    opacity: 0.8; }
+  #content .highlight {
+    width: 100%; }
+  #content pre {
+    line-height: 2rem;
+    border-radius: 3px;
+    padding: 1rem;
+    overflow-x: auto;
+    background-color: #000004;
+    width: 100%;
+    margin-bottom: 1em; }
+  #content pre > code {
+    border: none; }
+  #content code {
+    font-size: 0.9rem;
+    font-family: 'Source Code Pro', monospace;
+    padding: 0.1rem;
+    border-radius: 3px;
+    border: 1px solid #cccccc; }
+  #content img {
+    width: 100%;
+    max-width: 100%;
+    display: block;
+    margin: 2rem auto;
+    opacity: 1; }
+  #content blockquote {
+    background-color: #cccccc;
+    color: #39424E;
+    padding: 2rem;
+    margin: 2rem 1rem 2rem 1rem;
+    border-radius: 3px; }
+    #content blockquote a {
+      color: #111; }
+    #content blockquote ul {
+      margin-top: 1rem; }
+    #content blockquote li {
+      list-style: disc; }
+  #content table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1rem 0;
+    overflow-x: auto; }
+    #content table th {
+      font-size: 0.9rem; }
+    #content table td, #content table th {
+      padding: 2px 5px;
+      text-align: center;
+      border: 1px solid #cccccc; }
+  #content li {
+    line-height: 2;
+    padding-left: 0.4rem; }
+    #content li:last-child {
+      margin-bottom: 1rem; }
+  #content ul {
+    list-style: disc outside;
+    padding-left: 2rem; }
+  #content ol {
+    list-style: decimal outside;
+    padding-left: 2rem; }
+  #content .gist {
+    width: 100%; }
+    #content .gist td, #content .gist th {
+      text-align: left;
+      border: 0; }
+    #content .gist .gist-meta {
+      background-color: transparent;
+      color: #fff; }
+      #content .gist .gist-meta a {
+        color: #fff; }
+
+.tag {
+  padding: 0.25em 0em;
+  margin-right: 0.5em;
+  opacity: 0.6; }
+
+.grid {
+  display: grid;
+  grid-gap: 20px;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  grid-auto-rows: 400px; }
+  @media screen and (max-width: 736px) {
+    .grid {
+      grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); } }
+
+.grid > div {
+  background-color: transparent;
+  overflow: hidden; }
+
+.grid > div > img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  opacity: 1; }
+
+.grid > div > a > img {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  opacity: 1; }
+
+.go-left {
+  justify-content: flex-start;
+  align-items: flex-start; }
+
+.go-right {
+  justify-content: flex-end;
+  align-items: flex-end; }
+
+.go-center {
+  justify-content: center;
+  align-items: center; }
+
+/*# sourceMappingURL=main.css.map */
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.json b/exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.json
new file mode 100644
index 0000000..d514d9a
--- /dev/null
+++ b/exampleSite/resources/_gen/assets/sass/sass/style.sass_7642ba43b3212fd7d7ba324df3b88b0c.json
@@ -0,0 +1 @@
+{"Target":"css/main.css","MediaType":"text/css","Data":{}}
\ No newline at end of file
diff --git a/exampleSite/resources/_gen/images/gallery/900-1_hub11aa64b32dc58324b6713c93673dbd7_198333_800x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/gallery/900-1_hub11aa64b32dc58324b6713c93673dbd7_198333_800x0_resize_q75_box.jpg
new file mode 100644
index 0000000..9578994
--- /dev/null
+++ b/exampleSite/resources/_gen/images/gallery/900-1_hub11aa64b32dc58324b6713c93673dbd7_198333_800x0_resize_q75_box.jpg
diff --git a/exampleSite/resources/_gen/images/gallery/900-2_hub02b8b0dfe97fb3ff84a9d585d02b975_125262_800x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/gallery/900-2_hub02b8b0dfe97fb3ff84a9d585d02b975_125262_800x0_resize_q75_box.jpg
new file mode 100644
index 0000000..a58d8f1
--- /dev/null
+++ b/exampleSite/resources/_gen/images/gallery/900-2_hub02b8b0dfe97fb3ff84a9d585d02b975_125262_800x0_resize_q75_box.jpg
diff --git a/exampleSite/resources/_gen/images/gallery/900-3_hu1c92bb71562faf09560e20ac3018f319_190608_800x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/gallery/900-3_hu1c92bb71562faf09560e20ac3018f319_190608_800x0_resize_q75_box.jpg
new file mode 100644
index 0000000..fbb0024
--- /dev/null
+++ b/exampleSite/resources/_gen/images/gallery/900-3_hu1c92bb71562faf09560e20ac3018f319_190608_800x0_resize_q75_box.jpg
diff --git a/exampleSite/resources/_gen/images/gallery/900-4_hue0a4b521f04757bb988f8b7d57a5bf61_447455_800x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/gallery/900-4_hue0a4b521f04757bb988f8b7d57a5bf61_447455_800x0_resize_q75_box.jpg
new file mode 100644
index 0000000..bca57ab
--- /dev/null
+++ b/exampleSite/resources/_gen/images/gallery/900-4_hue0a4b521f04757bb988f8b7d57a5bf61_447455_800x0_resize_q75_box.jpg
diff --git a/exampleSite/resources/_gen/images/gallery/900-5_hu223faad3e53c1beaffb68f39cabc9068_195555_800x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/gallery/900-5_hu223faad3e53c1beaffb68f39cabc9068_195555_800x0_resize_q75_box.jpg
new file mode 100644
index 0000000..6147a18
--- /dev/null
+++ b/exampleSite/resources/_gen/images/gallery/900-5_hu223faad3e53c1beaffb68f39cabc9068_195555_800x0_resize_q75_box.jpg
diff --git a/exampleSite/resources/_gen/images/gallery/900-6_hu2f71d947fccfff06ad329d64103fe2e4_201644_800x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/gallery/900-6_hu2f71d947fccfff06ad329d64103fe2e4_201644_800x0_resize_q75_box.jpg
new file mode 100644
index 0000000..69668b9
--- /dev/null
+++ b/exampleSite/resources/_gen/images/gallery/900-6_hu2f71d947fccfff06ad329d64103fe2e4_201644_800x0_resize_q75_box.jpg
diff --git a/exampleSite/resources/_gen/images/gallery/900-7_hue76b70013fd5ae7158604754d48ceecd_230577_800x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/gallery/900-7_hue76b70013fd5ae7158604754d48ceecd_230577_800x0_resize_q75_box.jpg
new file mode 100644
index 0000000..a884ce5
--- /dev/null
+++ b/exampleSite/resources/_gen/images/gallery/900-7_hue76b70013fd5ae7158604754d48ceecd_230577_800x0_resize_q75_box.jpg
diff --git a/exampleSite/resources/_gen/images/gallery/900-8_hu954089c55d67e1807a5a74fcfe45013c_387718_800x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/gallery/900-8_hu954089c55d67e1807a5a74fcfe45013c_387718_800x0_resize_q75_box.jpg
new file mode 100644
index 0000000..75c949b
--- /dev/null
+++ b/exampleSite/resources/_gen/images/gallery/900-8_hu954089c55d67e1807a5a74fcfe45013c_387718_800x0_resize_q75_box.jpg
diff --git a/exampleSite/resources/_gen/images/portfolio/alex-knight-192782-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_943828_400x0_resize_q65_box.jpg b/exampleSite/resources/_gen/images/portfolio/alex-knight-192782-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_943828_400x0_resize_q65_box.jpg
new file mode 100644
index 0000000..eab8f0b
--- /dev/null
+++ b/exampleSite/resources/_gen/images/portfolio/alex-knight-192782-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_943828_400x0_resize_q65_box.jpg
diff --git a/exampleSite/resources/_gen/images/portfolio/alex-knight-192782-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_943828_600x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/portfolio/alex-knight-192782-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_943828_600x0_resize_q75_box.jpg
new file mode 100644
index 0000000..dbf942d
--- /dev/null
+++ b/exampleSite/resources/_gen/images/portfolio/alex-knight-192782-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_943828_600x0_resize_q75_box.jpg
diff --git a/exampleSite/resources/_gen/images/portfolio/alex-knight-192782-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_943828_800x0_resize_q65_box.jpg b/exampleSite/resources/_gen/images/portfolio/alex-knight-192782-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_943828_800x0_resize_q65_box.jpg
new file mode 100644
index 0000000..faf2682
--- /dev/null
+++ b/exampleSite/resources/_gen/images/portfolio/alex-knight-192782-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_943828_800x0_resize_q65_box.jpg
diff --git a/exampleSite/resources/_gen/images/portfolio/alex-knight-192782-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_943828_800x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/portfolio/alex-knight-192782-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_943828_800x0_resize_q75_box.jpg
new file mode 100644
index 0000000..32394e2
--- /dev/null
+++ b/exampleSite/resources/_gen/images/portfolio/alex-knight-192782-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_943828_800x0_resize_q75_box.jpg
diff --git a/exampleSite/resources/_gen/images/portfolio/andrew-neel-308138-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4229800_400x0_resize_q65_box.jpg b/exampleSite/resources/_gen/images/portfolio/andrew-neel-308138-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4229800_400x0_resize_q65_box.jpg
new file mode 100644
index 0000000..79ba74a
--- /dev/null
+++ b/exampleSite/resources/_gen/images/portfolio/andrew-neel-308138-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4229800_400x0_resize_q65_box.jpg
diff --git a/exampleSite/resources/_gen/images/portfolio/andrew-neel-308138-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4229800_600x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/portfolio/andrew-neel-308138-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4229800_600x0_resize_q75_box.jpg
new file mode 100644
index 0000000..6127eb1
--- /dev/null
+++ b/exampleSite/resources/_gen/images/portfolio/andrew-neel-308138-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4229800_600x0_resize_q75_box.jpg
diff --git a/exampleSite/resources/_gen/images/portfolio/andrew-neel-308138-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4229800_800x0_resize_q65_box.jpg b/exampleSite/resources/_gen/images/portfolio/andrew-neel-308138-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4229800_800x0_resize_q65_box.jpg
new file mode 100644
index 0000000..f17a895
--- /dev/null
+++ b/exampleSite/resources/_gen/images/portfolio/andrew-neel-308138-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4229800_800x0_resize_q65_box.jpg
diff --git a/exampleSite/resources/_gen/images/portfolio/andrew-neel-308138-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4229800_800x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/portfolio/andrew-neel-308138-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4229800_800x0_resize_q75_box.jpg
new file mode 100644
index 0000000..e005202
--- /dev/null
+++ b/exampleSite/resources/_gen/images/portfolio/andrew-neel-308138-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4229800_800x0_resize_q75_box.jpg
diff --git a/exampleSite/resources/_gen/images/portfolio/headway-551543-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4456286_600x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/portfolio/headway-551543-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4456286_600x0_resize_q75_box.jpg
new file mode 100644
index 0000000..2d9744f
--- /dev/null
+++ b/exampleSite/resources/_gen/images/portfolio/headway-551543-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_4456286_600x0_resize_q75_box.jpg
diff --git a/exampleSite/resources/_gen/images/portfolio/mildly-useful-262854-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_2538412_600x0_resize_q75_box.jpg b/exampleSite/resources/_gen/images/portfolio/mildly-useful-262854-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_2538412_600x0_resize_q75_box.jpg
new file mode 100644
index 0000000..6fa7332
--- /dev/null
+++ b/exampleSite/resources/_gen/images/portfolio/mildly-useful-262854-unsplash_hu3d03a01dcc18bc5be0e67db3d8d209a6_2538412_600x0_resize_q75_box.jpg
diff --git a/exampleSite/static/img/made240x49.png b/exampleSite/static/img/made240x49.png
deleted file mode 100755
index dd902f5..0000000
--- a/exampleSite/static/img/made240x49.png
+++ /dev/null
diff --git a/layouts/gallery/list.html b/layouts/gallery/list.html
index 0057423..6779b20 100755
--- a/layouts/gallery/list.html
+++ b/layouts/gallery/list.html
@@ -3,55 +3,27 @@
     {{ .Content }}
 </div>
 
-{{ if .Site.Params.clickablePhotos }}
+{{ if .Params.clickablePhotos }}
     <div class="grid">
-        {{ $name := .Site.Params.galleryFolder | default "images/"}}
-        {{ $path := .File.Dir }}
-        {{ $content := "/content/" }}
-        {{ $src := (print $path $name) }}
-
-        {{ $folder := (print $content $path $name) }}
-
-        {{ $files := readDir $folder }}
-
-        {{ $previewSubdirectory := .Site.Params.smallImagesSubfolder | default "small/"}}
-        {{ $previewImagesEnabled := .Site.Params.smallPreviewImages }}
-
-        {{ range shuffle $files }}
-
-        {{ if not .IsDir }}
-            
+    {{ $images := .Resources.ByType "image" }}
+    {{ range shuffle $images }}
+    {{ $resized := .Resize $.Params.maxWidth }}
         <div>
-                <a href="{{ $src | absURL }}{{ .Name }}">
-                    {{ if $previewImagesEnabled}}
-                    <img src="{{ $src | absURL }}{{ $previewSubdirectory }}{{ .Name }}" alt="{{ .Name }}" />
-                    {{ else }}
-                    <img src="{{ $src | absURL }}{{ .Name }}" alt="{{ .Name }}" />
-                    {{ end }}           
-                </a>
+            <a href="{{ .RelPermalink }}">
+                <img src="{{ $resized.RelPermalink }}" alt="{{ .Name }}" />     
+            </a>
         </div>
         {{ end }}
-
-        {{ end }}
     </div>
 {{ else }}
     <div class="grid">
-        {{ $name := .Site.Params.galleryFolder | default "images/"}}
-        {{ $path := .File.Dir }}
-        {{ $content := "/content/" }}
-        {{ $src := (print $path $name) }}
-
-        {{ $folder := (print $content $path $name) }}
-
-        {{ $files := readDir $folder }}
-
-        {{ range shuffle $files }}
-            {{ if not .IsDir }}
-            <div>
-                <img src="{{ $src | absURL }}{{ .Name }}" alt="{{ .Name }}" />
-            </div>
-            {{ end }}
-        {{ end }}
+    {{ $images := .Resources.ByType "image" }}
+    {{ range shuffle $images }}
+    {{ $resized := .Resize $.Params.maxWidth }}
+        <div>
+            <img src="{{ $resized.RelPermalink }}" alt="{{ .Name }}" />
+        </div>
+    {{ end }}
 
     </div>
 {{ end }}