Hugo Shortcodes 

Shortcodes are little snippets of code that can be called from within a post to perform an action. Hugo comes with a few shortcodes baked in such as “figure”, but others I've gleaned from internet searches and perhaps from my own tinkering.

from a folder of pictures within “website/hugo/howisjt/static/". Don't put a slash in front of the “images” directory. This is different from all others.

Youtube 

Just insert “youtube” with the unique video code. Here is the Baton Rouge High Symphony Orchestra.

Vimeo 

Figure 

Figure is an extension of the image syntax in markdown. You can use multiple arguments. Displays as a flat image with no shadow background. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Clear Springs Campground

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Scaled down, float right.

Here is a same size image using the figure command with a floatright argument. It works nicely, scaling down the fullsize image (no thumbnail required) and provides a buffer from the text. Probably too much buffer space. Again, it is flat styled with no shadowing.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim est laborum.

Regular image insert 

The theme's CSS adds the shadow and centers the image. Woody the Dog

Insert an Instagram image 

Look up the ID code of the image, then…

or you can hide the display of the caption by adding “hidecaption”…

audio file player 

Be cautious using this because I fear I'd have to host the audio files on my virtual server which could consume valuable disk space. There must be a more efficient way to embed audio hosted elsewhere. Here is a 3MB Sky Tour podcast.

Google Map 

Below should be a single point google map iframe locating our house. It pulls my Google API key from the toml file.

An embedded “Google My Map” - my Bucket List. I have to intentionally define the maps zoom by appending “&zoom=6” to the src= \

An image slider with customizable features. See https://github.com/tbiering/hugo-slider-shortcode It displays scaled images but cannot allow visitors to click to enlarge an image - such as with lightbox. Also, it is not mobile friendly; it doesn't scale to fit the width of small screens correctly.

Default use-case

Set width and height. This isn't working. It always displays the same size regardless of the values I feed it for width and height.

Set left and right icon. This example uses the double chevron icons. These are pulled from FontAwesome.

Set automatic sliding duration of 200ms. Doesn't work.

Slide 

An image slider drawing from a directory of JPGs. There must be a CSS conflict because it's not displaying the images properly. It displays successive images below the previous, not over the top of the previous, replacing it. Weird.

BatonRouge-downtown-from-capitol-thumb.jpg BatonRouge-downtown-from-capitol.jpg Beauregard_Town_plat-1806-thumb.jpg Beauregard_Town_plat-1806.jpg Beauregard_Town_plat-1806_tn-thumb.jpg Beauregard_Town_plat-1806_tn.jpg LSU-Hill-Memorial-Audubon-folio-viewing-thumb.jpg LSU-Hill-Memorial-Audubon-folio-viewing.jpg LSU-Tiger-Stadium-band-thumb.jpg LSU-Tiger-Stadium-band.jpg batonrouge-skyline-2019-1024px.jpg batonrouge-skyline-2019-2500px.JPG caneland-distillery-tour-thumb.jpg caneland-distillery-tour.jpg canoing-LSU-lake-thumb.jpg canoing-LSU-lake.jpg levee-walk-the-dog-thumb.jpg levee-walk-the-dog.jpg lots-for-sale-1806-Beauregardtown-thumb.jpg lots-for-sale-1806-Beauregardtown.jpg state_capitol_of_Louisiana-thumb.jpg state_capitol_of_Louisiana.jpg uss-kidd-and-frigate-replica-thumb.jpg uss-kidd-and-frigate-replica.jpg