add the partials for automatically generate the responsive images

4 files changed, 50 insertions, 2 deletions

diff --git a/README.md b/README.md
index 0e535ad..f53de1d 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ Super simple and responsive theme for your personal website on Hugo framework.
 
 ## Installation
 Before start you already need to have a Hugo on your machine.  
-**Please note:** you need to have the extended version of Hugo v0.48 or above.
+**Please note:** you need to have the extended version of Hugo v0.64.1 or above.
 You can install it by following [these instructions](https://gohugo.io/getting-started/installing/).
 
 Create the Hugo website template if you are starting from scratch:
diff --git a/layouts/partials/func/GetImage.html b/layouts/partials/func/GetImage.html
new file mode 100644
index 0000000..e077998
--- /dev/null
+++ b/layouts/partials/func/GetImage.html
@@ -0,0 +1,18 @@
+{{$original := .bundle.Resources.GetMatch .path}}
+{{$command := .cmd | default "Fill"}}
+{{$options := .options}}
+{{$image := dict "RelPermalink" ""}}
+
+{{with $original}}
+  {{if eq $command "Fill"}}
+    {{$image = $original.Fill $options}}
+  {{else if eq $command "Fit"}}
+    {{$image = $original.Fit $options}}
+  {{else if eq $command "Resize"}}
+    {{$image = $original.Resize $options}}
+  {{else}}
+    {{errorf "Invalid image processing command: Must be one of Fit, Fill or Resize."}}
+  {{end}}
+{{end}}
+
+{{return $image}}
\ No newline at end of file
diff --git a/layouts/partials/modules/image.html b/layouts/partials/modules/image.html
new file mode 100644
index 0000000..79e6b08
--- /dev/null
+++ b/layouts/partials/modules/image.html
@@ -0,0 +1,30 @@
+{{$imageBundle := .page.Site.GetPage "uploads"}}
+
+{{with .image}}
+  {{$path := .url}}
+  {{$media := .media}}
+  {{$alt := .alt}}
+  {{$srcset := slice}}
+
+  {{with .params}}
+    {{range (last (sub (len .) 1) .)}}
+      {{$image := partial "func/GetImage" (dict "bundle" $imageBundle "path" $path "cmd" .cmd "options" .options)}}
+      {{$width := index (split .options "x") 0}}
+      {{$srcset = $srcset | append (print ($image.RelPermalink) " " $width "w")}}
+    {{end}}
+  {{end}}
+
+  <picture{{with .class}} class="{{.}}"{{end}}>
+    {{with $srcset}}
+    <source{{with $media}} media="{{.}}"{{end}} srcset="{{delimit $srcset ", "}}" />
+    {{end}}
+    {{if .params}}
+      {{with (index .params 0)}}
+        {{$image := partial "func/GetImage" (dict "bundle" $imageBundle "path" $path "cmd" .cmd "options" .options)}}
+        <img src="{{$image.RelPermalink | default ($path | relURL)}}" alt="{{$alt}}" />
+      {{end}}
+    {{else}}
+    <img src="{{$path | relURL}}" alt="{{$alt}}" />
+    {{end}}
+  </picture>
+{{end}}
\ No newline at end of file
diff --git a/theme.toml b/theme.toml
index eb9baab..ff64259 100644
--- a/theme.toml
+++ b/theme.toml
@@ -5,7 +5,7 @@ description = "A simple and responsive theme for your personal website"
 homepage = "https://github.com/serg/yourfolio"
 tags = ["responsive", "minimal", "simple", "personal", "portfolio"]
 features = []
-min_version = "0.48"
+min_version = "0.64.1"
 
 [author]
   name = "Sergey Furtak"