Browse Source

Improve README `figure` shortcode example

Josh Habdas 2 years ago
parent
commit
6b4ab0800d
1 changed files with 9 additions and 5 deletions
  1. 9
    5
      README.md

+ 9
- 5
README.md View File

@@ -319,19 +319,23 @@ See the Hugo docs for Blackfriday [configuration options](http://gohugo.io/overv
319 319
 
320 320
 Keep your content <abbr title="Don't Repeat Yourself">DRY</abbr> to improve thematic consistency throughout your site. To help achieve this, Hugo provides [Shortcodes](https://gohugo.io/extras/shortcodes). Shortcodes are very powerful, and can be used to achieve functionality not otherwise available in the Black Friday markdown processor, such as [Block Attributes](https://kramdown.gettalong.org/quickref.html#block-attributes).
321 321
 
322
-To create your own custom shortcodes add a `layouts/shortcodes` directory to your site and place your shortcodes within. Here's an example shortcode overriding one of Hugo's [built-in shortcodes](https://gohugo.io/extras/shortcodes#built-in-shortcodes) for use in creating `figure` elements which leverage After Dark's [Intelligent lazyloading](#intelligent-lazyloading) feature:
322
+To create your own custom shortcodes add a `layouts/shortcodes` directory to your site and place your shortcodes within. Here's an example shortcode overriding Hugo's [built-in `figure` shortcode](https://gohugo.io/extras/shortcodes#figure) to leverage After Dark's [Intelligent lazyloading](#intelligent-lazyloading) feature and improve display for use with the theme:
323 323
 
324 324
 ```html
325
+<!--{{/*
326
+  Similar to the internal shortcode, but with image lazyloading and
327
+  and adjusted caption title and small caption text.
328
+*/}}-->
325 329
 <figure {{ with .Get "class" }}class="{{ . }}"{{ end }}>
326 330
   {{ with .Get "link" }}<a href="{{ . }}">{{ end }}
327 331
     <img class="lazyload" data-src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{ . }}{{ else }}{{ .Get "caption" }}{{ end }}"{{ end }} />
328 332
   {{ if .Get "link" }}</a>{{ end }}
329 333
   {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
330 334
   <figcaption>{{ if isset .Params "title" }}
331
-    <b>{{ .Get "title" }}</b>{{ end }}
335
+    <header><b>{{ .Get "title" }}</b></header>{{ end }}
332 336
     {{ if or (.Get "caption") (.Get "attr")}}
333 337
     <small>{{ .Get "caption" }}
334
-    {{ with .Get "attrlink" }}Source: <a href="{{.}}"> {{ end }}
338
+    {{ with .Get "attrlink" }}<a href="{{ . }}"> {{ end }}
335 339
       {{ .Get "attr" }}
336 340
     {{ if .Get "attrlink"}}</a> {{ end }}
337 341
     </small>{{ end }}
@@ -340,10 +344,10 @@ To create your own custom shortcodes add a `layouts/shortcodes` directory to you
340 344
 </figure>
341 345
 ```
342 346
 
343
-To use it create a file called `figure.html` in your site's shortcode directory, copy the contents above into the file and reference it from your content files like:
347
+To use it create a file called `figure.html` with the above contents in your `shortcodes` directory and use it like:
344 348
 
345 349
 ```
346
-{{< figure src="/images/amazon-affiliate-earnings.png" caption="Amazon Affiliate earnings over 1,694 sessions to Hack Cabin in early 2017" >}}
350
+{{< figure src="/gear/southeast-asia-carry-on-packing-list/" caption="Southeast Asia Carry-On Packing List: Digital Nomad Edition" >}}
347 351
 ```
348 352
 
349 353
 Reference the Hugo docs for [additional usage instructions](https://gohugo.io/extras/shortcodes#figure).

Loading…
Cancel
Save