From 96e28ddd5cde53fb3d2020027d0cf15eef8a4a6f Mon Sep 17 00:00:00 2001
From: Avinash Sonawane <rootkea@gmail.com>
Date: Wed, 7 Jul 2021 09:08:37 +0000
Subject: [PATCH] Docs: Fix resize_image and gallery shortcodes (#1543)

---
 .../content/image-processing/index.md         | 19 +++++++++++--------
 docs/templates/shortcodes/gallery.html        |  7 +++++--
 docs/templates/shortcodes/resize_image.html   |  3 ++-
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/docs/content/documentation/content/image-processing/index.md b/docs/content/documentation/content/image-processing/index.md
index 4936f261..3b702474 100644
--- a/docs/content/documentation/content/image-processing/index.md
+++ b/docs/content/documentation/content/image-processing/index.md
@@ -127,7 +127,8 @@ but it can be used in Markdown using [shortcodes](@/documentation/content/shortc
 The examples above were generated using a shortcode file named `resize_image.html` with this content:
 
 ```jinja2
-  <img src="{{ resize_image(path=path, width=width, height=height, op=op) }}" />
+{% set image = resize_image(path=path, width=width, height=height, op=op) %}
+<img src="{{ image.url }}" />
 ```
 
 ## Creating picture galleries
@@ -143,14 +144,16 @@ This can be used in shortcodes. For example, we can create a very simple html-on
 picture gallery with the following shortcode named `gallery.html`:
 
 ```jinja2
-{% for asset in page.assets %}
-  {% if asset is matching("[.](jpg|png)$") %}
-    <a href="{{ get_url(path=asset) }}">
-      <img src="{{ resize_image(path=asset, width=240, height=180, op="fill") }}" />
+<div>
+{% for asset in page.assets -%}
+  {%- if asset is matching("[.](jpg|png)$") -%}
+    {% set image = resize_image(path=asset, width=240, height=180) %}
+    <a href="{{ get_url(path=asset) }}" target="_blank">
+      <img src="{{ image.url }}" />
     </a>
-    &ensp;
-  {% endif %}
-{% endfor %}
+  {%- endif %}
+{%- endfor %}
+</div>
 ```
 
 As you can notice, we didn't specify an `op` argument, which means that it'll default to `"fill"`. Similarly,
diff --git a/docs/templates/shortcodes/gallery.html b/docs/templates/shortcodes/gallery.html
index 91a75f48..d171d849 100644
--- a/docs/templates/shortcodes/gallery.html
+++ b/docs/templates/shortcodes/gallery.html
@@ -1,7 +1,10 @@
+<div>
 {% for asset in page.assets -%}
   {%- if asset is matching("[.](jpg|png)$") -%}
-    <a href="{{ get_url(path=asset) | safe }}" target="_blank">
-      <img src="{{ resize_image(path=asset, width=240, height=180, op="fill", format="auto") | safe }}" />
+    {% set image = resize_image(path=asset, width=240, height=180) %}
+    <a href="{{ get_url(path=asset) }}" target="_blank">
+      <img src="{{ image.url }}" />
     </a>
   {%- endif %}
 {%- endfor %}
+</div>
diff --git a/docs/templates/shortcodes/resize_image.html b/docs/templates/shortcodes/resize_image.html
index f33bc3b5..c225d2e2 100644
--- a/docs/templates/shortcodes/resize_image.html
+++ b/docs/templates/shortcodes/resize_image.html
@@ -1 +1,2 @@
-<img src="{{ resize_image(path=path, width=width, height=height, op=op) }}" />
+{% set image = resize_image(path=path, width=width, height=height, op=op) %}
+<img src="{{ image.url }}" />