How to set Featured Image for scully blog

When you want to create a post list, you can access all routes using ScullyRoutesService. But if you want to set featured image on each post, how to access the featured image url.

post list image


  • To access featured image url using ScullyRoutesService.
  • To understand scully-routes.json file.


When you create a post with scully, the created markdown file has a frontmatter. We used the description data in a frontmatter before (Scully and meta description).

When Scully makes scully-routes.json which used as ScullyRoutes[], a frontmatter was stored into (HandledRoute) in a process. After that the data will be exported into the scully-routes.json file. So, you can define any string data into frontmatter, then you can access that from ScullyRoutesService.

At this time, we need featured image url data in a post. So I'm going to define featured_image in a frontmatter.

title: "How to make awesome post"
description: "Beep Beep Boop..."
featured_image: '/assets/img/tanb-express.jpg'
published: ture

Let's check the scully-routes.json. If you didn't run a sully server, please run the server with watch mode as follows:

yarn scully --watch

The scully-routes.json file will be created in ./dist/static/assets directory. You will find the featured_image data in the scully-routes.json.

Additional definition of ScullyRoute interface

After defined new frontmatter data, you can access that from ScullyRoutesService. The created or updated scully-routes.json will used as ScullyRoute[]. But ScullyRoute interface is defined with a few properties simply (ScullyRoute).

To access additional data, you need to define interface. Thankfully, TypeScript can define multiple same named interfaces and those will be merged. So I define this interface in a PostListComponent.

import { Component, OnInit } from '@angular/core';
import { ScullyRoutesService } from '@scullyio/ng-lib';
import { map } from 'rxjs/operators';

interface ScullyRoute {
  description: string;
  featured_image?: string;

  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.scss']
export class PostListComponent implements OnInit {
  blog$ = this.srs.available$
      map((routes) => {
        return routes.filter((route) => {
          return route.route.startsWith('/blog/')

  constructor(private srs: ScullyRoutesService) { }

  ngOnInit(): void {
<li *ngFor="let blog of blog$ | async">
  <img [attr.src]="blog.featured_image">


You can access any data in a frontmatter through ScullyRoutesService. Featured image, author, tags or creation date, you can define any data in a frontmatter as you like. Bt now I'm just considering that may be scully-routes.json will be huge some day. For now, It may be best to avoid putting unnecessary data in the frontmatter...