fix(media): adds preload fix to c-image

Author: Ben Zörb

templates/theme-default/layouts/partials/components/c-image.html

@@ -21,24 +21,51 @@
   {{- end -}}
 {{- end -}}
 
+{{- $different_ratios := and $has_mobile $has_desktop -}}
+
+
 <figure class="c-image{{ range $modifier }} c-image--{{ . }}{{ end }}{{ with $class_name }} {{ . }}{{end}}">
-  {{- with $image_mobile -}}
-    {{- partial "utils/asset" (dict
-      "globals" $globals
-      "context" .
-      "options" (merge $params (dict
-        "class_name" (print "c-image__asset" (cond $has_desktop " md:u-hidden" "") )
-      ))
-    ) -}}
-  {{- end -}}
-  {{- with $image_desktop -}}
-    {{- partial "utils/asset" (dict
-      "globals" $globals
-      "context" .
-      "options" (merge $params (dict
-        "class_name" (print "c-image__asset" (cond $has_mobile " -md:u-hidden" "") )
-      ))
-    ) -}}
+  {{ if $different_ratios }}
+    <picture class="c-image__asset">
+      {{- partial "utils/asset/image/sources" (dict
+        "globals" $globals
+        "context" $image_mobile
+        "options" (merge $params (dict
+          "media" "(max-width: 767px)"
+        ))
+      ) -}}
+      {{- partial "utils/asset/image/sources" (dict
+        "globals" $globals
+        "context" $image_desktop
+        "options" (merge $params (dict
+          "media" "(min-width: 768px)"
+        ))
+      ) -}}
+      {{- partial "utils/asset/image/img" (dict
+        "globals" $globals
+        "context" $image_desktop
+        "options" $params
+      ) -}}
+    </picture>
+  {{ else }}
+    {{- with $image_mobile -}}
+      {{- partial "utils/asset" (dict
+        "globals" $globals
+        "context" .
+        "options" (merge $params (dict
+          "class_name" (print "c-image__asset" (cond $has_desktop " md:u-hidden" "") )
+        ))
+      ) -}}
+    {{- end -}}
+    {{- with $image_desktop -}}
+      {{- partial "utils/asset" (dict
+        "globals" $globals
+        "context" .
+        "options" (merge $params (dict
+          "class_name" (print "c-image__asset" (cond $has_mobile " -md:u-hidden" "") )
+        ))
+      ) -}}
+    {{- end -}}
   {{- end -}}
   {{- with $caption -}}
     <figcaption>{{ . }}</figcaption>

templates/theme-default/layouts/partials/components/c-media.html

@@ -31,7 +31,7 @@
     {{- end -}}
     {{- if $different_ratios -}}
       {{- if $only_img -}}
-        <picture class="c-media__asset{{ with $class_name }} {{ . }}{{ end }}">
+        <picture class="c-media__asset">
           {{- partial "utils/asset/image/sources" (dict
             "globals" $globals
             "context" $media_mobile