How to implement Featured / Hero Image for Blog Posts (and other pages)

[monikappv]

When we are creating a blog index page on vuepress we want to show the hero/featured image of the blog post so that we have a nice image (humans love pictures!) and that image is specified by blog post author (not by index page creator!)

When creating a blog post I want to have the images in the same directory so that all the content is in one place and easy to see and reference

NB: this is also applies to other pages e.g. job or product pages where we may wish to show their featured image elsewhere

The challenge: the preference to keep content in same directory as post and to reference in other pages (e.g. blog index) may be in tension!

• Other pages only have access to frontmatter plus rendered content ... (this is just how static site generators work and vuepress in particular) => there's no way to get a list of images used in a page and e.g. use the first one
• Assets pipeline of vuepress "mangles" the paths of files (because web assets)
• Frontmatter therefore can only reference files in public
  • See Asset handling via Frontmatter vuejs/vuepress#79 and esp answer from author saying this is way to go Asset handling via Frontmatter vuejs/vuepress#79 (comment) (long further discussion but answer as of Jan 2020 is that this is only way to do it)

Reference:

vuejs/vuepress#165
https://stackoverflow.com/questions/51322398/linking-to-assets-in-vuepress
https://vuepress.vuejs.org/guide/assets.html#public-files

Acceptance

• frontmatter images of blog posts showing up on other website pages

Tasks

• Work out if we want to reuse blog post main image elsewhere
• Can we do that w/o it being in public => ANS: No => have to move that image to public
  • TODO: evidence for that ...
• What are our options then?
  • Don't have featured image
  • Move featured / hero image to public directory
    • Can we have sub-directories of public
• Implement that option
  • Choose subfolder in public (do we just use /img/ or create another one just for blog)
  • Move images there and update one blog post to make sure it is working --> tried it on Dataship (see How to implement Featured / Hero Image for Blog Posts (and other pages) #427 (comment))
  • Update frontmatter image paths of the rest of the blog posts to /img/blog/name-of-file.png

How do we deal with blog posts with no image in blog listing page?

1. just show a placeholder image (e.g. the logo)
2. To have a layout that support image and non-image blog posts

[monikappv]

I moved the images to /public/img/blog/, tried it on one blog post (Dataship) and it worked.

TODO: change paths of the rest of the blog posts...

[monikappv]

FIXED. See http://next.frictionlessdata.io/blog/.