migrate hero images for using responsive images that generated automatically

30 files changed, 32 insertions, 20 deletions

diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index 0eca85e..9797e93 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -7,12 +7,17 @@ description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor cum
 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:
-    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
+    url: home-hero.png
+    alt: The top of mountain image
+    media: "(max-width: 46.25em)"
+    params:
+    - options: 1130x500
+    - options: 848x443
+      cmd: Fit
+    - options: 565x420
+      cmd: Fit
+    - options: 360x318
+      cmd: Fit
 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.
diff --git a/exampleSite/content/about.md b/exampleSite/content/about.md
index 3331136..1076687 100644
--- a/exampleSite/content/about.md
+++ b/exampleSite/content/about.md
@@ -6,12 +6,14 @@ description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores p
 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:
-    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
+    url: about-hero.png
+    alt: The designer's workspace table image
+    media: "(max-width: 46.25em)"
+    params:
+    - options: 1130x500
+    - options: 848x443 Center
+    - options: 700x420 Center
+    - options: 490x318 Center
 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 d3e2412..668908c 100644
--- a/exampleSite/content/contact.md
+++ b/exampleSite/content/contact.md
@@ -6,12 +6,14 @@ description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero porr
 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:
-    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
+    url: contact-hero.png
+    alt: The chair for meeting image
+    media: "(max-width: 46.25em)"
+    params:
+    - options: 1130x500
+    - options: 848x443 Center
+    - options: 565x420 Center
+    - options: 360x318
 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/exampleSite/static/img/profile_img.png b/exampleSite/content/uploads/about-hero.png
index dc6b179..dc6b179 100644
--- a/exampleSite/static/img/profile_img.png
+++ b/exampleSite/content/uploads/about-hero.png
diff --git a/exampleSite/static/img/contact_img.png b/exampleSite/content/uploads/contact-hero.png
index e78d0d2..e78d0d2 100644
--- a/exampleSite/static/img/contact_img.png
+++ b/exampleSite/content/uploads/contact-hero.png
diff --git a/exampleSite/static/img/home_img.png b/exampleSite/content/uploads/home-hero.png
index 5671f95..5671f95 100644
--- a/exampleSite/static/img/home_img.png
+++ b/exampleSite/content/uploads/home-hero.png
diff --git a/exampleSite/resources/_gen/images/uploads/about-hero_huffad198b5ed13f108a54c0a598cd0f3a_113186_1130x500_fill_box_smart1_2.png b/exampleSite/resources/_gen/images/uploads/about-hero_huffad198b5ed13f108a54c0a598cd0f3a_113186_1130x500_fill_box_smart1_2.png
new file mode 100644
index 0000000..a4a09a1
--- /dev/null
+++ b/exampleSite/resources/_gen/images/uploads/about-hero_huffad198b5ed13f108a54c0a598cd0f3a_113186_1130x500_fill_box_smart1_2.png
diff --git a/exampleSite/resources/_gen/images/uploads/about-hero_huffad198b5ed13f108a54c0a598cd0f3a_113186_490x318_fill_box_center_2.png b/exampleSite/resources/_gen/images/uploads/about-hero_huffad198b5ed13f108a54c0a598cd0f3a_113186_490x318_fill_box_center_2.png
new file mode 100644
index 0000000..177dba7
--- /dev/null
+++ b/exampleSite/resources/_gen/images/uploads/about-hero_huffad198b5ed13f108a54c0a598cd0f3a_113186_490x318_fill_box_center_2.png
diff --git a/exampleSite/resources/_gen/images/uploads/about-hero_huffad198b5ed13f108a54c0a598cd0f3a_113186_700x420_fill_box_center_2.png b/exampleSite/resources/_gen/images/uploads/about-hero_huffad198b5ed13f108a54c0a598cd0f3a_113186_700x420_fill_box_center_2.png
new file mode 100644
index 0000000..02e26d7
--- /dev/null
+++ b/exampleSite/resources/_gen/images/uploads/about-hero_huffad198b5ed13f108a54c0a598cd0f3a_113186_700x420_fill_box_center_2.png
diff --git a/exampleSite/resources/_gen/images/uploads/about-hero_huffad198b5ed13f108a54c0a598cd0f3a_113186_848x443_fill_box_center_2.png b/exampleSite/resources/_gen/images/uploads/about-hero_huffad198b5ed13f108a54c0a598cd0f3a_113186_848x443_fill_box_center_2.png
new file mode 100644
index 0000000..4a705f3
--- /dev/null
+++ b/exampleSite/resources/_gen/images/uploads/about-hero_huffad198b5ed13f108a54c0a598cd0f3a_113186_848x443_fill_box_center_2.png
diff --git a/exampleSite/resources/_gen/images/uploads/contact-hero_hub30c82218acaea92ebdf4ed609d53453_70742_1130x500_fill_box_smart1_2.png b/exampleSite/resources/_gen/images/uploads/contact-hero_hub30c82218acaea92ebdf4ed609d53453_70742_1130x500_fill_box_smart1_2.png
new file mode 100644
index 0000000..a333662
--- /dev/null
+++ b/exampleSite/resources/_gen/images/uploads/contact-hero_hub30c82218acaea92ebdf4ed609d53453_70742_1130x500_fill_box_smart1_2.png
diff --git a/exampleSite/resources/_gen/images/uploads/contact-hero_hub30c82218acaea92ebdf4ed609d53453_70742_360x318_fill_box_smart1_2.png b/exampleSite/resources/_gen/images/uploads/contact-hero_hub30c82218acaea92ebdf4ed609d53453_70742_360x318_fill_box_smart1_2.png
new file mode 100644
index 0000000..7751c10
--- /dev/null
+++ b/exampleSite/resources/_gen/images/uploads/contact-hero_hub30c82218acaea92ebdf4ed609d53453_70742_360x318_fill_box_smart1_2.png
diff --git a/exampleSite/resources/_gen/images/uploads/contact-hero_hub30c82218acaea92ebdf4ed609d53453_70742_565x420_fill_box_center_2.png b/exampleSite/resources/_gen/images/uploads/contact-hero_hub30c82218acaea92ebdf4ed609d53453_70742_565x420_fill_box_center_2.png
new file mode 100644
index 0000000..59a9efc
--- /dev/null
+++ b/exampleSite/resources/_gen/images/uploads/contact-hero_hub30c82218acaea92ebdf4ed609d53453_70742_565x420_fill_box_center_2.png
diff --git a/exampleSite/resources/_gen/images/uploads/contact-hero_hub30c82218acaea92ebdf4ed609d53453_70742_848x443_fill_box_center_2.png b/exampleSite/resources/_gen/images/uploads/contact-hero_hub30c82218acaea92ebdf4ed609d53453_70742_848x443_fill_box_center_2.png
new file mode 100644
index 0000000..5dfa980
--- /dev/null
+++ b/exampleSite/resources/_gen/images/uploads/contact-hero_hub30c82218acaea92ebdf4ed609d53453_70742_848x443_fill_box_center_2.png
diff --git a/exampleSite/resources/_gen/images/uploads/home-hero_hu937bbaa046003becc3282a6905db62e5_168217_1130x500_fill_box_smart1_2.png b/exampleSite/resources/_gen/images/uploads/home-hero_hu937bbaa046003becc3282a6905db62e5_168217_1130x500_fill_box_smart1_2.png
new file mode 100644
index 0000000..0d7602b
--- /dev/null
+++ b/exampleSite/resources/_gen/images/uploads/home-hero_hu937bbaa046003becc3282a6905db62e5_168217_1130x500_fill_box_smart1_2.png
diff --git a/exampleSite/resources/_gen/images/uploads/home-hero_hu937bbaa046003becc3282a6905db62e5_168217_360x318_fit_box_2.png b/exampleSite/resources/_gen/images/uploads/home-hero_hu937bbaa046003becc3282a6905db62e5_168217_360x318_fit_box_2.png
new file mode 100644
index 0000000..b4abba7
--- /dev/null
+++ b/exampleSite/resources/_gen/images/uploads/home-hero_hu937bbaa046003becc3282a6905db62e5_168217_360x318_fit_box_2.png
diff --git a/exampleSite/resources/_gen/images/uploads/home-hero_hu937bbaa046003becc3282a6905db62e5_168217_565x420_fit_box_2.png b/exampleSite/resources/_gen/images/uploads/home-hero_hu937bbaa046003becc3282a6905db62e5_168217_565x420_fit_box_2.png
new file mode 100644
index 0000000..4a07eb8
--- /dev/null
+++ b/exampleSite/resources/_gen/images/uploads/home-hero_hu937bbaa046003becc3282a6905db62e5_168217_565x420_fit_box_2.png
diff --git a/exampleSite/resources/_gen/images/uploads/home-hero_hu937bbaa046003becc3282a6905db62e5_168217_848x443_fit_box_2.png b/exampleSite/resources/_gen/images/uploads/home-hero_hu937bbaa046003becc3282a6905db62e5_168217_848x443_fit_box_2.png
new file mode 100644
index 0000000..50f55d3
--- /dev/null
+++ b/exampleSite/resources/_gen/images/uploads/home-hero_hu937bbaa046003becc3282a6905db62e5_168217_848x443_fit_box_2.png
diff --git a/exampleSite/static/img/contact_360x318.png b/exampleSite/static/img/contact_360x318.png
deleted file mode 100644
index 6bb22ad..0000000
--- a/exampleSite/static/img/contact_360x318.png
+++ /dev/null
diff --git a/exampleSite/static/img/contact_565x420.png b/exampleSite/static/img/contact_565x420.png
deleted file mode 100644
index a21a2e6..0000000
--- a/exampleSite/static/img/contact_565x420.png
+++ /dev/null
diff --git a/exampleSite/static/img/contact_848x443.png b/exampleSite/static/img/contact_848x443.png
deleted file mode 100644
index 34bdec1..0000000
--- a/exampleSite/static/img/contact_848x443.png
+++ /dev/null
diff --git a/exampleSite/static/img/home_360x318.png b/exampleSite/static/img/home_360x318.png
deleted file mode 100644
index 0e95292..0000000
--- a/exampleSite/static/img/home_360x318.png
+++ /dev/null
diff --git a/exampleSite/static/img/home_565x420.png b/exampleSite/static/img/home_565x420.png
deleted file mode 100644
index 0e11a67..0000000
--- a/exampleSite/static/img/home_565x420.png
+++ /dev/null
diff --git a/exampleSite/static/img/home_848x443.png b/exampleSite/static/img/home_848x443.png
deleted file mode 100644
index 3e37907..0000000
--- a/exampleSite/static/img/home_848x443.png
+++ /dev/null
diff --git a/exampleSite/static/img/profile_360x318.png b/exampleSite/static/img/profile_360x318.png
deleted file mode 100644
index 0c82b7e..0000000
--- a/exampleSite/static/img/profile_360x318.png
+++ /dev/null
diff --git a/exampleSite/static/img/profile_565x420.png b/exampleSite/static/img/profile_565x420.png
deleted file mode 100644
index 03b3746..0000000
--- a/exampleSite/static/img/profile_565x420.png
+++ /dev/null
diff --git a/exampleSite/static/img/profile_848x443.png b/exampleSite/static/img/profile_848x443.png
deleted file mode 100644
index 13ff71d..0000000
--- a/exampleSite/static/img/profile_848x443.png
+++ /dev/null
diff --git a/layouts/404.html b/layouts/404.html
index 966a371..c1c8e08 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -36,6 +36,9 @@
         right: 0;
         width: 47%; }
       .error404 .main-description img {
+        position: static;
+        display: inline;
+        max-width: none;
         max-height: 75em;
         bottom: 9.1em;
         z-index: -1; } }
diff --git a/layouts/partials/head-includes.html b/layouts/partials/head-includes.html
index d5c872c..6afa957 100644
--- a/layouts/partials/head-includes.html
+++ b/layouts/partials/head-includes.html
@@ -135,7 +135,7 @@
       padding-top: 1.3em;
       padding-bottom: 1.3em;
       z-index: 1; }
-    .main-description .image-item {
+    .main-description img {
       position: absolute;
       bottom: 0;
       display: block;
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 3dabda9..9479674 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -6,7 +6,7 @@
         {{- with $header.description -}}
           <h1 class="break-word">{{- . | safeHTML -}}</h1>
         {{- end -}}
-        {{- partial "modules/responsive-image" (dict "page" . "image" $header.image) -}}
+        {{- partial "modules/image" (dict "image" $header.image "page" .) -}}
       </div>
     </div>
   </div>