images.md

layout	title	description	image
article	Article Image Guide	Detailed guidance on the various types of images used with an article and instructions on their creation.	https://learn.piptrends.com/assets/images/general/contribute-cover.png

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.

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

  Dimensions - 800x800 px

• 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

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

  Dimensions - 150x150 px

As a standard design practice at [learn.piptrends.com](index.html), the ```image```, and the ```cover``` share the same background gradient as with the ```gradient``` tag under the ```background_image```.