Custom classes for images

Floated images works in LaTeX and HTML
yuki · Jan 26, 2024 · f4be5fd · f4be5fd
1 parent 15d26c3
commit f4be5fd
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 12 deletions.
diff --git a/2.md b/2.md
@@ -7,24 +7,25 @@ Here few examples of with images.
 ## Centered image with caption
 
 :::center
-![this is a dragon](img/cover.png){}
+![this is a dragon](img/cover.png){width=50%}
 :::
 
 ## Float image in the left side
 
 :::float-left
-![](img/cover.png){width=30%}
+![this is a dragon](img/cover.png){.float-left width=30%}
 
 Uno Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. 
 
 Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. 
 :::
 
 :::float-right
-![this is a dragon](img/cover.png){width=45%}
-
 Dos Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. 
 
+![this is a dragon](img/cover.png){.float-right width=45%}
+
+
 Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. Lorem Ipsum comenzó como un latín revuelto y sin sentido derivado del texto de Cicerón del siglo I aC De Finibus Bonorum et Malorum. 
 :::
 

diff --git a/example.html b/example.html
@@ -437,7 +437,8 @@ <h2 data-number="3.1" id="centered-image-with-caption"><span
             caption</h2>
             <div class="center">
             <figure>
-            <img src="img/cover.png" alt="this is a dragon" />
+            <img src="img/cover.png" style="width:50.0%"
+            alt="this is a dragon" />
             <figcaption aria-hidden="true">this is a dragon</figcaption>
             </figure>
             </div>
@@ -446,7 +447,11 @@ <h2 data-number="3.1" id="centered-image-with-caption"><span
             class="header-section-number">3.2</span> Float image in the
             left side</h2>
             <div class="float-left">
-            <p><img src="img/cover.png" style="width:30.0%" /></p>
+            <figure>
+            <img src="img/cover.png" class="float-left"
+            style="width:30.0%" alt="this is a dragon" />
+            <figcaption aria-hidden="true">this is a dragon</figcaption>
+            </figure>
             <p>Uno Ipsum comenzó como un latín revuelto y sin sentido
             derivado del texto de Cicerón del siglo I aC De Finibus
             Bonorum et Malorum. Lorem Ipsum comenzó como un latín
@@ -469,11 +474,6 @@ <h2 data-number="3.1" id="centered-image-with-caption"><span
             Finibus Bonorum et Malorum.</p>
             </div>
             <div class="float-right">
-            <figure>
-            <img src="img/cover.png" style="width:45.0%"
-            alt="this is a dragon" />
-            <figcaption aria-hidden="true">this is a dragon</figcaption>
-            </figure>
             <p>Dos Ipsum comenzó como un latín revuelto y sin sentido
             derivado del texto de Cicerón del siglo I aC De Finibus
             Bonorum et Malorum. Lorem Ipsum comenzó como un latín
@@ -484,6 +484,11 @@ <h2 data-number="3.1" id="centered-image-with-caption"><span
             Malorum. Lorem Ipsum comenzó como un latín revuelto y sin
             sentido derivado del texto de Cicerón del siglo I aC De
             Finibus Bonorum et Malorum.</p>
+            <figure>
+            <img src="img/cover.png" class="float-right"
+            style="width:45.0%" alt="this is a dragon" />
+            <figcaption aria-hidden="true">this is a dragon</figcaption>
+            </figure>
             <p>Lorem Ipsum comenzó como un latín revuelto y sin sentido
             derivado del texto de Cicerón del siglo I aC De Finibus
             Bonorum et Malorum. Lorem Ipsum comenzó como un latín

diff --git a/template/filter.lua b/template/filter.lua
@@ -35,9 +35,18 @@ if FORMAT:match 'latex' then
     end
   end
 
+  function Figure(el)
+    -- if figure's child is a RawInline is because it has changed in Image
+    if el.c[1].c[1].t == "RawInline" then
+      return el.c[1].c[1]
+    end
+  end
+
   function Div(el)
     beg_v = ""
     end_v = ""
+
+    -- para las customboxes
     if el.classes[1] == "infobox" then
       beg_v = "\\begin{infobox}"
       end_v = "\\end{infobox}"
@@ -65,6 +74,27 @@ if FORMAT:match 'latex' then
     return el
   end
 
+  function Image(el)
+    width = el.attributes.width
+    if (width) then
+      -- remove the percentage, because in LaTeX make problems
+      width = string.gsub(width,"(%%)", "")
+      -- convert width XY% into 0.XY
+      width = "0."..width
+    end
+
+    if el.classes[1] == "float-left" then
+      beg_v = "\\floatleft{"..width.."}{"..el.src.."}{"..pandoc.utils.stringify(el.caption).."}"
+      return pandoc.RawInline("latex", beg_v)
+    elseif el.classes[1] == "float-right" then
+      beg_v = "\\floatright{"..width.."}{"..el.src.."}{"..pandoc.utils.stringify(el.caption).."}"
+      return pandoc.RawInline("latex", beg_v)
+    else
+      return el
+    end
+
+  end
+
 end
 
 
diff --git a/template/yuki.tex b/template/yuki.tex
@@ -356,7 +356,7 @@
 %     \makeatother
 % $endif$
 %$if(svg)$
-    \usepackage{svg}
+%    \usepackage{svg}
 %$endif$
 % $if(strikeout)$
 %     $-- also used for underline
@@ -797,6 +797,20 @@
 \RequirePackage[export]{adjustbox} % frames in graphics
 \RequirePackage{wrapfig}
 
+% from pandoc template
+\makeatletter
+  \def\maxwidth{\ifdim\Gin@nat@width>\linewidth\linewidth\else\Gin@nat@width\fi}
+  \def\maxheight{\ifdim\Gin@nat@height>\textheight\textheight\else\Gin@nat@height\fi}
+\makeatother
+%     % Scale images if necessary, so that they will not overflow the page
+%     % margins by default, and it is still possible to overwrite the defaults
+%     % using explicit options in \includegraphics[width, height, ...]{}
+\setkeys{Gin}{width=\maxwidth,height=\maxheight,keepaspectratio}
+%     % Set default figure placement to htbp
+% \makeatletter
+%   \def\fps@figure{htbp}
+% \makeatother
+
 \RequirePackage{caption}
 \captionsetup{labelformat=empty,textfont={scriptsize}}
 \RequirePackage[shortcuts]{extdash}
@@ -901,6 +915,26 @@
 
 
 
+%--------------------------------------------------------------------------
+% IMAGES
+%--------------------------------------------------------------------------
+
+\newcommand{\floatimage}[4]{
+  \begin{wrapfigure}{#1}{#2\textwidth}
+    \centering
+    \includegraphics[width=0.9\linewidth]{#3}
+    \captionof{figure}{#4}
+    \label{fig:wrapfig}
+  \end{wrapfigure}
+}
+
+\newcommand{\floatleft}[3]{
+  \floatimage{l}{#1}{#2}{#3}
+}
+
+\newcommand{\floatright}[3]{
+  \floatimage{r}{#1}{#2}{#3}
+}
 
 \newcommand{\itemimage}[6]{
     % #1 item text