From b06eddd0052ce2a7693473fae78f263baaa17a02 Mon Sep 17 00:00:00 2001
From: f <f@sutty.nl>
Date: Wed, 13 Jan 2021 12:30:48 -0300
Subject: [PATCH] =?UTF-8?q?im=C3=A1genes=20responsive?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 _includes/picture.html | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 _includes/picture.html

diff --git a/_includes/picture.html b/_includes/picture.html
new file mode 100644
index 0000000..81cd32e
--- /dev/null
+++ b/_includes/picture.html
@@ -0,0 +1,23 @@
+{% comment %}
+Imágenes responsive.  Esto logra que solo se carguen las versiones de
+las imágenes con el ancho máximo de la pantalla.
+
+TODO: Las imágenes en md y superior nunca llegan al ancho máximo así
+que tienen una resolución de más.
+{% endcomment %}
+{%- assign image = include.image.path | default: 'public/placeholder.png' %}
+{%- assign height = include.height | default: site.i18n.post.height -%}
+{%- assign width = include.width | default: '100' -%}
+
+<picture>
+  {% for size in site.images.sizes %}
+    <source srcset="{{ image | thumbnail: size }}" media="(max-width: {{ size }}px)" />
+  {% endfor %}
+
+  <img
+    class="u-photo w-{{ width }} {{ include.cover | equals: false | value_unless: 'fit-cover' }} h-{{ height }} {{ include.extra }}"
+    loading="lazy"
+    itemprop="image"
+    src="{{ image | thumbnail: 1140 }}"
+    alt="{{ include.image.description | include.default_description }}" />
+</picture>