Setting up a simple Blog with a Static Website Generator - Part 11: Hugo Shortcodes

Sat Jan 2, 2016

Draft - Raw, Un-edited

12/27/2015 Added short codes for IMG embedding referenced from spf13.com

	layouts/shortcodes/

img.html		scribd.html		slideshare.html		speakerdeck.html	vimeo.html		youtube.html

His talk begins at around 1:49:00 in the following video:

resize partition

Hrm. Wonder what are the advantages for shortcode.

shortcode for embedding image for markdown

NOTE: this has been expanded and elaborated more from the original!!

Shortcode? for Embedding image? NOTE: class="headshot" within shortcode does not work properly within markdown content file. Can’t use HTML to add a new div container like I did in layouts/index.html.

Although in about/me.md I just called a straight up HTML img tag.

account Jeff
Hrm. Wonder what are the advantages for shortcode.

account Jeff Hrm. Wonder what are the advantages for shortcode.

snowflake-wide

Hrm. Wonder what are the advantages for shortcode.

snowflake-wide
Hrm. Wonder what are the advantages for shortcode.

Changes for photo 1/2/2016

layouts/index.html

+        <div class="team-member">
         <!-- About me subsection -->
         <h2>About me</h2>

@@ -60,6 +61,9 @@

         <p>It might even include a picture: </p>

+        <img class="headshot" src="/media/accountImageJeff.jpg" alt="account Jeff"></img>
+        </div>

static/css/mystyles.css


.team-member{
  float: center;
}
.headshot{
  width: 100px;
  display: block;
  margin: 0 auto;
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
}