Link as Button and Images in Markdown

1

Per default is it not possible to have buttons in markdown. Only a link. How can I add a class or a shortcode for buttons?

[Read more][1]

[1]: handbook/toc

In markdown images are always displayed in their original size. Is it possible to push the pictures down when the edge is reached. The picture sticks out over the frame.

![Photo][1]

[1]: /images/photo-001.jpg "Photo"
2

Creating a shortcode is in fact the cleanest way to do it. https://gohugo.io/templates/shortcode-templates/

But nothing stops you from having html in the middle of your markdown. I use that approach to make sure the html works despite the template being used.

3

shortcode e.g. :
(no images in this one - just icons)

{{- $.Scratch.Set "theHref"    "#"                                }}
{{- $.Scratch.Set "theIcon"    ""                                 }}
{{- $.Scratch.Set "theClasses" "w3-button w3-ripple w3-theme-l3 " }}
{{- if .IsNamedParams }}
  {{- $.Scratch.Set "theHref"    (.Get "href"    | default ($.Scratch.Get "theHref")    )}}
  {{- $.Scratch.Set "theIcon"    (.Get "icon"    | default ($.Scratch.Get "theIcon")    )}}
  {{- $.Scratch.Set "theClasses" (.Get "classes" | default ($.Scratch.Get "theClasses") ) }}
{{- else}}
  {{- $myPos := 0}} {{ if gt (len .Params) $myPos }} {{$.Scratch.Set "theHref"    (.Get $myPos) }} {{end}}
  {{- $myPos := 1}} {{ if gt (len .Params) $myPos }} {{$.Scratch.Set "theIcon"    (.Get $myPos) }} {{end}}
  {{- $myPos := 2}} {{ if gt (len .Params) $myPos }} {{$.Scratch.Set "theClasses" (.Get $myPos) }} {{end}}
{{- end}}
<a class="{{$.Scratch.Get `theClasses`}}" href="{{$.Scratch.Get `theHref` | relURL }}">{{if $.Scratch.Get `theIcon`}}<i class="{{$.Scratch.Get `theIcon`}} fa-1x"></i>{{end}}&nbsp;{{ .Inner }}</a>

Usage in content:

{{% w3-button-icon  %}}Hello world{{% /w3-button-icon %}}
{{% w3-button-icon icon="fab fa-google" href="https://google.com" %}}take me to Google{{% /w3-button-icon %}}
{{% w3-button-icon "/blog" %}}take me to Blog{{% /w3-button-icon %}}
{{% w3-button-icon "/faq" "far fa-question-circle" %}}take me to FAQ{{% /w3-button-icon %}}
{{% w3-button-icon icon="fas fa-exclamation-triangle" classes="w3-button w3-circle w3-theme-d3" %}}Purge{{% /w3-button-icon %}}

Demo here: w3-button-icon or on GitHub

4

Thank you for this code snipped. This is my idea.
{{% button href="/handbook/toc/" class=“btn btn-white” %}}Read more{{% /button %}}

But my code snipped dosen’t work.

5

wrong quotes?

{{< button href="/handbook/toc/" class="btn btn-white" >}}Read more{{< /button >}}

with button.html shortcode:

<a class="{{.Get `class`}}" href="{{.Get `href` }}">{{ .Inner }}</a>

=>

<a class="btn btn-white" href="/handbook/toc/">Read more</a>

Check if you need relURL (or absURL):

... href="{{.Get `href` | relURL }}"
1 Like
6

possible typo in implementation of the shortcode in line 7

.Get "classes" should be .Get "class"

P.S.: thank you for this example