change a way of defining the images in the content files

5 files changed, 89 insertions, 69 deletions

diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index 15f23c4..a673496 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -5,12 +5,13 @@ draft: false
 description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor cumque magnam aliquid, explicabo amet quasi eveniet reprehenderit dolorum exercitationem maiores provident ex error, tenetur.
 header:
   description: Hello, my name is Yates. I live and work in London. I'm keen on <span class="blue-text">design and photography</span>.
-  image: img/home_img.png
-  image_alt: The top of mountain image
-  responsive_images:
-    "848": img/home_848x443.png
-    "565": img/home_565x420.png
-    "360": img/home_360x318.png
+  image:
+    url: img/home_img.png
+    alt_text: The top of mountain image
+    responsive_sources:
+      "848": img/home_848x443.png
+      "565": img/home_565x420.png
+      "360": img/home_360x318.png
 text_groups:
   - name: Intro
     description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia esse aut, blanditiis ullam. Similique quo iusto ipsa, excepturi autem voluptate consectetur sit quae praesentium <span class="default-text bold-text">aliquam molestiae</span> minima ex perferendis aut unde tempora amet esse inventore quaerat molestias eum distinctio eligendi ducimus. Commodi voluptatem ab debitis inventore, laborum at maiores reiciendis dolor deleniti ipsam distinctio voluptas eos autem quidem a quia laboriosam similique soluta rem? Eum.
@@ -18,50 +19,55 @@ projects:
   - title: Strato
     type: wed design
     link: https://unsplash.com/photos/hpjSkU2UYSU
-    image: img/strato_1130x590.jpg
-    image_alt: The Strato web design theme
-    responsive_images:
-      "848": img/strato_848x443.jpg
-      "565": img/strato_565x420.jpg
-      "360": img/strato_360x318.jpg
+    image:
+      url: img/strato_1130x590.jpg
+      alt_text: The Strato web design theme
+      responsive_sources:
+        "848": img/strato_848x443.jpg
+        "565": img/strato_565x420.jpg
+        "360": img/strato_360x318.jpg
   - title: Analytik
     type: UI/UX
     link: https://unsplash.com/photos/yeB9jDmHm6M
-    image: img/analytik_364x590.jpg
     class: short-col
-    image_alt: The Analytic web design theme
-    responsive_images:
-      "848": img/analytik_848x443.jpg
-      "565": img/analytik_565x420.jpg
-      "360": img/analytik_360x318.jpg
+    image:
+      url: img/analytik_364x590.jpg
+      alt_text: The Analytic web design theme
+      responsive_sources:
+        "848": img/analytik_848x443.jpg
+        "565": img/analytik_565x420.jpg
+        "360": img/analytik_360x318.jpg
   - title: Friends
     type: web design
     link: https://unsplash.com/photos/ir5lIkVFqC4
-    image: img/friends_746x590.jpg
     class: wide-col
-    image_alt: The Friends theme
-    responsive_images:
-      "848": img/friends_848x443.jpg
-      "565": img/friends_565x420.jpg
-      "360": img/friends_360x318.jpg
+    image:
+      url: img/friends_746x590.jpg
+      alt_text: The Friends theme
+      responsive_sources:
+        "848": img/friends_848x443.jpg
+        "565": img/friends_565x420.jpg
+        "360": img/friends_360x318.jpg
   - title: Food
     type: web design
     link: https://unsplash.com/photos/JVSgcV8_vb4
-    image: img/food_746x590.jpg
     class: wide-col
-    image_alt: The Food website for recipes
-    responsive_images:
-      "848": img/food_848x443.jpg
-      "565": img/food_565x420.jpg
-      "360": img/food_360x318.jpg
+    image:
+      url: img/food_746x590.jpg
+      alt_text: The Food website for recipes
+      responsive_sources:
+        "848": img/food_848x443.jpg
+        "565": img/food_565x420.jpg
+        "360": img/food_360x318.jpg
   - title: StatApp
     type: UI/UX
     link: https://unsplash.com/photos/nJX74kn1yn4
-    image: img/statapp_364x590.jpg
     class: short-col
-    image_alt: The application for statistic
-    responsive_images:
-      "848": img/statapp_848x443.jpg
-      "565": img/statapp_565x420.jpg
-      "360": img/statapp_360x318.jpg
+    image:
+      url: img/statapp_364x590.jpg
+      alt_text: The application for statistic
+      responsive_sources:
+        "848": img/statapp_848x443.jpg
+        "565": img/statapp_565x420.jpg
+        "360": img/statapp_360x318.jpg
 ---
\ No newline at end of file
diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md
index 0930fe5..3331136 100644
--- a/exampleSite/content/about.md
+++ b/exampleSite/content/about.md
@@ -5,12 +5,13 @@ draft: false
 description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores porro voluptas esse natus nemo aperiam asperiores velit neque, magni molestiae!
 header:
   description: I'm a multidisciplinary designer who specializing in <span class="blue-text">UI, UX and Visual Design</span>. Currently based in United Kingdom.
-  image: img/profile_img.png
-  image_alt: The designer's workspace table image
-  responsive_images:
-    "848": img/profile_848x443.png
-    "565": img/profile_565x420.png
-    "360": img/profile_360x318.png
+  image:
+    url: img/profile_img.png
+    alt_text: The designer's workspace table image
+    responsive_sources:
+      "848": img/profile_848x443.png
+      "565": img/profile_565x420.png
+      "360": img/profile_360x318.png
 text_groups:
   - name: About
     description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis saepe perferendis culpa aut libero, <span class="default-text bold-text">voluptatem voluptatum</span>, ut beatae ipsa sint alias autem ipsum ea quibusdam suscipit provident illo nihil nostrum porro. Omnis et hic eum in corrupti dicta cum fugiat!
diff --git a/exampleSite/content/contact.md b/exampleSite/content/contact.md
index 590d149..d3e2412 100644
--- a/exampleSite/content/contact.md
+++ b/exampleSite/content/contact.md
@@ -5,12 +5,13 @@ draft: false
 description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero porro tempore voluptas voluptatibus eius a non numquam, quibusdam enim eos.
 header:
   description: Every project starts with a <span class="blue-text">conversation</span>, just drop me a line and let's create something great together.
-  image: img/contact_img.png
-  image_alt: The chair for meeting image
-  responsive_images:
-    "848": img/contact_848x443.png
-    "565": img/contact_565x420.png
-    "360": img/contact_360x318.png
+  image:
+    url: img/contact_img.png
+    alt_text: The chair for meeting image
+    responsive_sources:
+      "848": img/contact_848x443.png
+      "565": img/contact_565x420.png
+      "360": img/contact_360x318.png
 text_groups:
   - name: Collaboration
     description: <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, atque officiis ut, veritatis reiciendis sequi quos officia quidem tempora minus fugit a suscipit nulla possimus?</p><br/><p>Let's get started&#58; <a class="blue-text bold-text" href="mailto:hello@example.com?subject=Hello,%20Yates!%20Lets%20make%20something%20great%20together!">hello@example.com</a></p>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 6631073..7833d5d 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -6,17 +6,23 @@
         {{- with $header.description -}}
           <h1 class="break-word">{{- . | safeHTML -}}</h1>
         {{- end -}}
-        <picture>
-          {{$currentPageContext := .}}
-          {{- with $header.responsive_images -}}
-            {{range $imageWidth, $imageUrl := .}}
-              {{ $currentPageContext.Scratch.Add "srcSetArray" (slice (print ($imageUrl | relURL) " " $imageWidth "w")) }}
-            {{end}}
-            <source media="(max-width: 46.25em)" srcset="{{delimit ($currentPageContext.Scratch.Get "srcSetArray") ", "}}">
-            {{ $currentPageContext.Scratch.Delete "srcSetArray" }}
+        {{- with $header.image -}}
+          {{- $imageUrl := .url -}}
+          {{- $imageAltText := .alt_text -}}
+          {{- $responsiveSources := .responsive_sources -}}
+          {{- with $imageUrl -}}
+            <picture>
+              {{- with $responsiveSources -}}
+                {{- range $imageWidth, $imageSourceUrl := . -}}
+                  {{- $.Scratch.Add "imageSrcSetArray" (slice (print ($imageSourceUrl | relURL) " " $imageWidth "w")) -}}
+                {{- end -}}
+                <source media="(max-width: 46.25em)" srcset="{{delimit ($.Scratch.Get "imageSrcSetArray") ", "}}">
+                {{- $.Scratch.Delete "imageSrcSetArray" -}}
+              {{- end -}}
+              <img class="project-image" src="{{. | relURL}}" alt="{{$imageAltText}}">
+            </picture>
           {{- end -}}
-          <img src="{{$header.image | relURL}}" alt="{{$header.image_alt}}">
-        </picture>
+        {{- end -}}
       </div>
     </div>
   </div>
diff --git a/layouts/partials/modules/projects.html b/layouts/partials/modules/projects.html
index b98d5bf..e264fc1 100644
--- a/layouts/partials/modules/projects.html
+++ b/layouts/partials/modules/projects.html
@@ -1,19 +1,25 @@
-{{$currentPageContext := .}}
-{{with .Params.projects}}
+{{- with .Params.projects -}}
 <ul class="projects clearfix">
   {{- range . -}}
     <li class="project{{with .class}} {{.}}{{end}}">
       <a href="{{.link}}">
-        <picture>
-          {{- with .responsive_images -}}
-            {{range $imageWidth, $imageUrl := .}}
-              {{ $currentPageContext.Scratch.Add "srcSetArray" (slice (print ($imageUrl | relURL) " " $imageWidth "w")) }}
-            {{end}}
-            <source media="(max-width: 46.25em)" srcset="{{delimit ($currentPageContext.Scratch.Get "srcSetArray") ", "}}">
-            {{ $currentPageContext.Scratch.Delete "srcSetArray" }}
+        {{- with .image -}}
+          {{- $imageUrl := .url -}}
+          {{- $imageAltText := .alt_text -}}
+          {{- $responsiveSources := .responsive_sources -}}
+          {{- with $imageUrl -}}
+            <picture>
+              {{- with $responsiveSources -}}
+                {{- range $imageWidth, $imageSourceUrl := . -}}
+                  {{- $.Scratch.Add "imageSrcSetArray" (slice (print ($imageSourceUrl | relURL) " " $imageWidth "w")) -}}
+                {{- end -}}
+                <source media="(max-width: 46.25em)" srcset="{{delimit ($.Scratch.Get "imageSrcSetArray") ", "}}">
+                {{- $.Scratch.Delete "imageSrcSetArray" -}}
+              {{- end -}}
+              <img class="project-image" src="{{. | relURL}}" alt="{{$imageAltText}}">
+            </picture>
           {{- end -}}
-          <img class="project-image" src="{{.image | relURL}}" alt="{{.image_alt}}">
-        </picture>
+        {{- end -}}
         <div class="project-hover">
           <div class="project-caption">
             {{- with .title -}}