Add hero images to posts and pages

[sc0ttj]

Problem

When creating a new page or post, it's not yet possible to add hero images, which can be used by page meta, search engines, index pages, etc.

NOTE: Users can already add images inside their posts and pages, using the markdown syntax for images, but these cannot be easily accessed by the page meta, templates or index pages.

Solution

When creating a post or page (using new post or new page), users should be asked for a $page_image, which should have a default value of assets/img/site_logo.png.

If $page_image is "none", no image should be added to the post/page being built.

The images would appear as hero images on the page or post, and a smaller thumbnail version of it would be created, to be used in various page/post listings, index pages, etc.

Implementation

1. Edit create_post.sh and create_page.sh to accept and set the relevant vars:

• $site_image - the default image
• $page_image - overrides the above, can be passed to create_pages.sh

2. Thumbnail versions of $page_image would need to be present (or generated), to be used in any post/page previews, index pages, etc. This can be done by rebuild thumbnails [widthxheight] [aspect-ratio].. Examples:

Original image is 1000x500.

• thumbnails 300x300 1:1 - produces image 300x150
• thumbnails 300x300 1:1 - same as above
• thumbnails 300x300 4:3 - produces image 300x240
• thumbnails 300x300 16:9 - produces image 300x200
• etc

3. Allow some way of setting index pages to use either list or grid layouts

• define page_layout for index pages?

Benefits

1. Nicer pages: Pages or posts can have a big hero image at the top of the main content, making the pages/posts look nicer.

2. better SEO: Pages/posts will have an image in their meta data (JSON-LD, facebook & twitter meta info, etc), which will show up in social media sharing options, RSS feeds, as well as Google search engine results (carousels, news articles, etc).

3. Nicer index pages: Index pages can use the _grid.mustache template instead of _list.mustache, to show nice grids with each item having a heading, image, descr, etc - instead of just a list of links (which is essentially what _list.mustache provides).