Article Image Guide

There are four main images that you’ll need to create for an article. The front matter for these is -

---
image: <Optional - Replace with image path, this path has to be a complete url>
cover: <Optional - Replace with cover path, this path can be relative>
article_header: <Optional - Modify content as per requirement>
    background_image:
        gradient: 'linear-gradient(135deg, #ffffff, #000000)'
        src: <image path>
author:
    picture: <Optional - Replace with author avatar>
---

The key tags are image, cover, background_image under article_header, and picture under author. Each tag serves a different purpose.

  • image - This tag represents the preview image that will be visible when the article is shared on social media. Here’s an example of this image. This image is solely for preview purposes and isn’t part of the article content.

    Dimensions - 1200x630 px

    Note: The image path should always be an absolute URL.

preview image
  • cover - This tag represents the icon image that will be displayed on the homepage along with the article title and description.

    Dimensions - 800x800 px

article cover image
  • background_image - This tag represents the image appearing as the header background for every article. You can also add a gradient instead of an image(preferred).

    Dimensions - 2100x1600 px

article header image
  • picture - This tag represents the avatar appearing along with the author name for an article.

    Dimensions - 150x150 px

article author avatar

As a standard design practice at learn.piptrends.com, the image, and the cover share the same background gradient as with the gradient tag under the background_image.