From 6d989e264f76f47f78271d76a58cfc974ff3c38f Mon Sep 17 00:00:00 2001
From: Carlos <53526597+carlosgauci@users.noreply.github.com>
Date: Tue, 21 Nov 2023 20:26:05 +0100
Subject: [PATCH] add size option for article images (#208)

---
 .../enhancing-rag-pipelines-in-haystack/index.md     | 10 ++--------
 layouts/_default/_markup/render-image.html           |  9 +++++++--
 themes/haystack/assets/sass/components/_article.scss | 12 ++++++++++++
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/content/blog/enhancing-rag-pipelines-in-haystack/index.md b/content/blog/enhancing-rag-pipelines-in-haystack/index.md
index bcb84160..6278978f 100644
--- a/content/blog/enhancing-rag-pipelines-in-haystack/index.md
+++ b/content/blog/enhancing-rag-pipelines-in-haystack/index.md
@@ -40,10 +40,7 @@ The DiversityRanker enhances the diversity of the paragraphs selected for the co
 
 The DiversityRanker is a novel component designed to enhance the diversity of the paragraphs selected for the context window in the RAG pipeline. It operates on the principle that a diverse set of documents can increase the LLM’s ability to generate answers with more breadth and depth.
 
-<figure style="width: 50%; margin: auto;">
-  <img src="enhancing-rag-pipelines-in-haystack/thumbnail.png" alt="An artistic interpretation of the DiversityRanker algorithm’s document ordering process, courtesy of MidJourney">
-  <figcaption>An artistic interpretation of the DiversityRanker algorithm’s document ordering process, courtesy of MidJourney. Please note that this visualization is more illustrative than precise.</figcaption>
-</figure>
+![An artistic interpretation of the DiversityRanker algorithm’s document ordering process, courtesy of MidJourney](thumbnail.png#small "An artistic interpretation of the DiversityRanker algorithm’s document ordering process, courtesy of MidJourney. Please note that this visualization is more illustrative than precise.")
 
 The DiversityRanker uses sentence transformers to calculate the similarity between documents. The sentence transformers library offers powerful embedding models for creating meaningful representations of sentences, paragraphs, and even whole documents. These representations, or embeddings, capture the semantic content of the text, allowing us to measure how similar two pieces of text are.
 
@@ -67,10 +64,7 @@ The LostInTheMiddleRanker optimizes the layout of the selected documents in the
 
 Although the authors of this research focused on a question-answering task — extracting the relevant spans of the answer from the text — we are speculating that the LLM’s attention mechanism will also have an easier time focusing on the paragraphs in the beginning and the end of the context window when generating answers.
 
-<figure>
-  <img src="enhancing-rag-pipelines-in-haystack/figure_2.png" width=50% alt="A graph showing that accuracy of the LLM drops when the answer is needed to be extracted from the middle of the context">
-  <figcaption>LLMs struggle to extract answers from the middle of the context, adapted from Liu et al. (2023)[1]</figcaption>
-</figure>
+![A graph showing that accuracy of the LLM drops when the answer is needed to be extracted from the middle of the context](figure_2.png#small "LLMs struggle to extract answers from the middle of the context, adapted from Liu et al. (2023)[1]")
 
 LostInTheMiddleRanker is best positioned as the last ranker in the RAG pipeline as the given documents are already selected based on similarity (relevance) and ordered by diversity.
 
diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 4ee135e2..96069a5d 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,9 +1,14 @@
 {{/* Renders images in articles */}}
+{{ $hasHash := in .Destination "#" }}
+{{ $parts := cond $hasHash (split .Destination "#") (slice .Destination "") }}
+{{ $class := cond $hasHash (index $parts 1) "" }}
+{{ $imgSrc := index $parts 0 }}
+
 {{ if .Title }}
     <figure>
-        <img loading="lazy" src="{{.Destination | safeURL}}" alt="{{.Text}}" />
+        <img loading="lazy" src="{{ $imgSrc | safeURL }}" alt="{{.Text}}" {{ with $class }}class="{{ . }}"{{ end }} />
         <figcaption>{{ .Title | markdownify }}</figcaption>
     </figure>
 {{ else }}
-    <img loading="lazy" src="{{.Destination | safeURL}}" alt="{{.Text}}" />
+    <img loading="lazy" src="{{ $imgSrc | safeURL }}" alt="{{.Text}}" {{ with $class }}class="{{ . }}"{{ end }} />
 {{ end }}
\ No newline at end of file
diff --git a/themes/haystack/assets/sass/components/_article.scss b/themes/haystack/assets/sass/components/_article.scss
index 17f2e8e2..aef0aff9 100644
--- a/themes/haystack/assets/sass/components/_article.scss
+++ b/themes/haystack/assets/sass/components/_article.scss
@@ -32,6 +32,18 @@
 
   img {
     margin: auto;
+
+    &.medium {
+      @include md {
+        width: 70%;
+      }
+    }
+
+    &.small {
+      @include md {
+        width: 50%;
+      }
+    }
   }
 }