Add card shortcode

3 files changed, 58 insertions, 9 deletions

diff --git a/exampleSite/content/post/papercss-shortcodes.md b/exampleSite/content/post/papercss-shortcodes/index.md
index 2cc5885..a61fe7d 100644
--- a/exampleSite/content/post/papercss-shortcodes.md
+++ b/exampleSite/content/post/papercss-shortcodes/index.md
@@ -214,16 +214,30 @@ Alert-danger
 
 ## card
 
+The `img` param accepts an [image page resource](https://gohugo.io/content-management/page-resources/) name. 
+
+The `command` and `options` params accept [image processing](https://gohugo.io/content-management/image-processing/#readout) args. 
+
+Required params: `img`, `command`, `options`.
+
+Optional params: `title`, `subtitle`, `text`.
+
 ```
-TODO
+{{</* card
+img="sun.jpg"
+command="Resize"
+options="900x"
+title="The Sun"
+subtitle="It's the Sun, dude"
+text="The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. [Credits](https://images.nasa.gov/details-GSFC_20171208_Archive_e000393.html)." */>}}
 ```
 
-<div class="card row flex-center" style="width: 20rem;">
-  <img src="https://picsum.photos/768" alt="Card example image">
 
-  <div class="card-body">
-    <h4 class="card-title">My awesome Paper card!</h4>
-    <h5 class="card-subtitle">Nice looking subtitle.</h5>
-    <p class="card-text">Notice that the card width in this example have been set to 20rem, otherwise it will try to fill the current container/row where the card is.</p>
-  </div>
-</div>
+
+{{< card
+img="sun.jpg"
+command="Resize"
+options="900x"
+title="The Sun"
+subtitle="It's the Sun, dude"
+text="The Sun is the star at the center of the Solar System. It is a nearly perfect sphere of hot plasma, with internal convective motion that generates a magnetic field via a dynamo process. It is by far the most important source of energy for life on Earth. [Credits](https://images.nasa.gov/details-GSFC_20171208_Archive_e000393.html)." >}}
diff --git a/exampleSite/content/post/papercss-shortcodes/sun.jpg b/exampleSite/content/post/papercss-shortcodes/sun.jpg
new file mode 100644
index 0000000..0faeb53
--- /dev/null
+++ b/exampleSite/content/post/papercss-shortcodes/sun.jpg
diff --git a/layouts/shortcodes/card.html b/layouts/shortcodes/card.html
new file mode 100644
index 0000000..42a9fbb
--- /dev/null
+++ b/layouts/shortcodes/card.html
@@ -0,0 +1,35 @@
+{{ $img := .Get "img" }}
+{{ $command := .Get "command" }}
+{{ $options := .Get "options" }}
+
+{{ $original := .Page.Resources.GetMatch (printf "*%s*" $img) }}
+{{ $new := "" }}
+
+{{ if eq $command "Fit" }}
+  {{ $new = $original.Fit $options }}
+{{ else if eq $command "Fill" }}
+  {{ $new = $original.Fill $options }}
+{{ else if eq $command "Resize" }}
+  {{ $new = $original.Resize $options }}
+{{ else if eq $command "Original" }}
+  {{ $new = $original }}
+{{ else }}
+  {{ errorf "Invalid image processing command: Must be one of Fit, Fill, Resize, Original." }}
+{{ end }}
+
+<div class="card row flex-center" style="">
+  <a href="{{ $original.Permalink }}" class="img-link">
+    <img src="{{ $new.Permalink }}">
+  </a>
+  <div class="card-body">
+  {{ with (.Get "title" )}}
+    <h4 class="card-title">{{ . | markdownify }}</h4>
+  {{ end }}
+  {{ with (.Get "subtitle" )}}
+    <h5 class="card-subtitle">{{ . | markdownify }}</h5>
+  {{ end }}
+  {{ with (.Get "text") }}
+    <p class="card-text">{{ . | markdownify }}</p>
+  {{ end }}
+  </div>
+</div>
\ No newline at end of file