Blog Posts

How to Add, Edit, and Manage Blog Post Content

There are three parts to that make up a blog post and each described below. It's important to assemble these correctly as they will enable the code rending the files to do so properly.

Part 1: The Content

Files:

All blog post files live in the folder _posts as well as the page that all the posts are rendered on - this files is named index.html and has to stay in the posts folder so jekyll doesn't confuse it with the home page which is also called index.html. There are two key things to know about the blog post files:

• the file ending is .md (short for markdown) and enables you to use a shorthand type of html that's faster and easier to type (more on this in a moment).
• the file naming pattern is YYYY-MM-DD-blog-post-name.md and is important in Jekyll so it lists and renders post chronologically (newest on top). * Don't worry, I set the config file to render it for users as blog/blog-post-name
  • As with image file names, blog post files names should have NO capital letters, NO spaces, and NO special characters (i.e. these characters will cause problems in any file name: ?, /, &, $, but dashes are ok) for example: 2017-05-25-blog-post-name.md

Images:

Images are not necessary for a post to work, to make a post without an image, simply leave the image meta data blank (see below).

However, if you do have an image, follow these guidelines for best results:

1. Image file names should have NO capital letters, NO spaces, and NO special characters (i.e. these characters will cause problems in any file name: ?, /, &, $, but dashes are ok) for example: image-file-name.jpg

2. Image file location save all blog images in the folder named "blog" inside the folder named "img".

3. Image file formats try to stick with .png and .jpg file formats - some of the others can cause problems and these two are more than enough to get the job done!

4. Image sizes: Images are rendered three different ways in the blog; on the post listing, in the sidebar, and in the body of the post itself. There are two different sizes defined here and this is intended to maximize load-time efficiency & accomodate layout proportions. *These sizes assume the picture resolution is 72 (common web image resolution - as opposed to print resolution which is 300)

   • The main image is the most flexible since it is only used in the main blog post body. The main image is:

     • listed simply as 'image' in the meta data
     • in a landscape layout (wider than tall) and
     • at least 4-5 inches tall (otherwise it will get pixelated at larger sizes)

   • The image thumb is:

     • listed as 'image_thumb' in the meta data
     • 4 inches wide x 3 inches tall (a 3x3 or 4x4 square is also acceptable)

Part 2: The Meta Data

Meta data (aka "FrontMatter" in Jekyll) is the list of variables that allow you to enter the information once and it can be duplicated all over the site - saving you a lot of time and effort.

Here's the catch - the meta data is very fussy about formatting so be careful to enter the data according to the format below:

---    
layout: single-post-layout    
title:  "Services Edify Offers"    
date:   2017-05-24    
categories: Services    
feature_post: false    
width: "half"    

image_thumb: "featuredpost1-thumb.png"    
image_thumb_alt: "Services"    

image: "featuredpost1.jpg"    
image_alt: "Services"    

short_description: "Read more about the services Edify offers. Or you can flip the fun flippy cards and click the pretty button to see this post content."
---     

Part 3: The Body