We can easily insert images with markdown syntax. But it’s the simplest image. What if I want to add some style to the specific type of image. What if I want to add a caption to the image? I will need some custom image snippets to help me get it done.


  1. add image.html to _includes/

      <!-- _includes/image.html -->
      <div class="image-wrapper" >
          {% if include.url %}
          <a href="{{ include.url }}" title="{{ include.title }}" target="_blank">
          {% endif %}
              <img src="{{ site.baseurl }}/{{ include.img }}" alt="{{ include.title }}"/>
          {% if include.url %}
          {% endif %}
          {% if include.caption %}
              <p class="image-caption">{{ include.caption }}</p>
          {% endif %}

    Here I have a simple condition if include.url for the optional url link added to the image. Also, don’t forget to append the {{ site.baseurl }} to the url if your site is not under the root directory. There is also a caption variable for optional captions.

  2. add css to scss

       * image styles
      * -------------------------- */
      .image-wrapper {
          text-align: center;
          margin: 3em auto;
          border: 1px solid #ddd;
          .image-caption {
              color: $grey-color;
              margin-top: $spacing-unit / 3;
  3. add images to /assets/ or whatever folder you want
  4. Example usage

       {% include image.html
                   img="assets/Blog Screen Shot 2016-05-18 at 4.01.33 AM.png"
                   title="Blog Screen Shot 2016-05-18 at 4.01.33 AM"
                   caption="Blog Screen Shot 2016-05-18 at 4.01.33 AM"
                   url="http://winddweb.github.io/blog" %}
Blog Screen Shot 2016-05-18 at 4.01.33 AM

Blog Screen Shot 2016-05-18 at 4.01.33 AM

Again, there are several parameters you can pass in the snippet. img, title are required. Include caption and url when needed. In the future I will probabaly add some different styles like float-left or float-right.

Customization To-do list:

  • Permalink: should I contain dates in the URL?
  • Fix fenced code block nested in un/ordered lists
  • Fix the Checkbox
  • Add images with captions to my post
  • Add comments functionality
  • Change a Theme
  • Adding a Navigation
  • Change the code highlighting theme
  • Custom 404 page
  • Create _pages folder for all your pages
  • Add tags to post
  • Change the About page
  • Multilingual?
  • Add search functionality