Archon
Decorative background for title

How to write an article for FF Logs

Last updated: July 22, 2022

Signing in to the FF Logs CMS

If you are invited to be an author for FF Logs, you will receive an invite link that lets you set a password and sign up to the CMS. Afterwards, you can always go back to https://cms.rpglogs.com/admin to sign in.

Creating an article

Once you are signed in to the CMS, you can navigate to the Articles section on the left, and then create or edit an article.

You'll be able to edit the following fields:

  • Title
    • Appears at the top of the article, on the browser tab, in share links, search results etc.
    • 60 character limit.
    • Can use some enhanced markdown such as <SiteTitle>.
  • Slug
    • Appears in the URL of the article.
    • Should be automatically set from Title, so should not need to be manually changed.
  • Body
  • Description
    • Appears in share links and search results.
    • 155 character limit.
    • Can use some enhanced markdown such as <SiteTitle>.
  • PreventIndexing
    • Whether or not the page should be prevented from being indexed by search engines such as Google.
    • In almost all cases, this should be left as Off.
  • ArticleCategory
    • The start of the URL path that the article is grouped under, such as /help or /news.
  • ArticleTags
    • Ignore this for now. Will be used in the future to group related articles across multiple categories.
  • Sites
    • The sites that this article will appear on.
    • Either select multiple, or select the * option for the article to appear on all sites.
  • FeaturedImageUrl
    • The preview image appearing when sharing an article on social media or e.g. Discord
    • Defaults to a game-specific fallback image
    • Testable e.g. with this browser extension
    • Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported.

Previewing an article

To preview what your article looks like before publishing it, you should use the Article Preview page on FF Logs. You can use the same page on different sites to see how the article will appear differently, for example:

The Article Preview page will save your draft article in your browser's storage, so you can come back to it (on the same device) later without losing anything. Once you are happy, copy and paste the content into the CMS Edit Article form.

Publishing an article

Make sure to save your changes using the Save button in the top-right. If the article has not already been published, click the Publish button.

The article will then be available on the sites that you specified in the Sites field, with a URL built from the ArticleCategory and Slug fields. For example, if your article selected * (all sites) for Sites, Help for ArticleCategory, and how-to-write-an-article for the Slug, then it will be available on each site as:

For performance reasons, each article page is only rebuilt a minimum of every 3 minutes. This rebuild is triggered by visiting the article more than 3 minutes after it was last rebuilt. The rebuild happens in the background, so, after visiting the article 3 minutes after it was last built, you would then need to refresh the page a few seconds later to see the newly built page. This is why using the Article Preview page is important to see the effect your changes will have quickly.

Adding images to an article

Make sure to read how to use the <Image> component on the Enhanced Markdown page.

You can use any image URL that begins with https://assets.rpglogs.com/. You can upload images to this domain using the CMS:

In the Media Library, upload an image. Then, click the small Copy Link button in the top-right of the image, and use that as the URL.

Note that you should not bother using the Crop or Replace functionality in the Media Library, as these images are cached in users browser's for a year, so updating the image will not have any effect for users that have already viewed it. Instead, simply upload a new image to get a new URL, and use that.

The form to upload/edit an image also has extra fields such as an Alt field - you can ignore this, as we set alt text directly in the markdown, such as:

<Image src="..." alt="Description of the image">

Best practices

Headers

Header levels

When using headers, make sure to start at the top and not skip any levels.

Good:

# Header

## Subheader

### Subsubheader

Bad (doesn't start at the top with a single #):

## Header

### Subheader

#### Subsubheader

Bad (skips a level):

# Header

### Subheader

#### Subsubheader

Header styles

Do not add any extra styling to headers.

Bad (applies extra styling to the header):

# **Header**

Table of contents

Headers of the first three levels contribute towards constructing the table of contents. If your article has at least 3 headers like this, then the table of contents will appear when your article is viewed.

When header names in the table of contents are clicked, the user is taken to that section. For this to work, header names within your article must be unique. If there are any duplicate header names, they will still show up in the table of contents, but they will not appear as links, and you should update your article to make these names unique.

Bad (duplicate header names):

# Headers

## Styles

# Buttons

## Styles

Good (unique header names):

# Headers

## Header styles

# Buttons

## Button styles

Links

Links to other articles

When linking to another article, make sure the URL starts with / (instead of https://articles.warcraftlogs.com/). This is a performance benefit and will make sure faster navigation is used. For example:

[Enhanced Markdown](/help/enhanced-markdown)

Becomes: Enhanced Markdown

Links to the main site

When linking to a page on the main site, make sure the URL starts with ../ (instead of https://www.warcraftlogs.com/). This ensures that the URL will be correct no matter what site it is viewed on. For example:

[<SiteTitle> Recruitment](../recruitment)

Becomes: FF Logs Recruitment

Links to other websites

Links to other websites have no special rules, and should just specify the entire URL. This also ensures that they get opened in a new tab. For example:

[Google](https://www.google.com)

Becomes: Google

Images

Images that do not have a valid src (doesn't start with https://assets.rpglogs.com) or do not have an alt set will not render at all when published. On the Article Preview page, an error will be shown to let you know how to fix it.

Images that cannot be found will not render at all when published. On the Article Preview page, an error will be shown to let you know how to fix it.

An image's alt text is important for accessible users and search engines, and should be a description of what is shown in the image, not simply a caption for the image.

Adding an Article Title Image

The Article Title image can be customized by setting a Title Background Image.

These images should meet the following criteria:

  • The image should have a ratio of roughly 7:1, and be optimized for 1920x1080 screens. It will be resized to a width of 384px, so it shouldn't be smaller than this.
  • They should be very lightweight, weighing under 20kb (ideally around 10kb).
  • The preview should behave properly under responsive constraints and fill the article title space.

To reduce the size of the image, resize it and then run it through an optimizer before uploading.

To add a new image, follow these steps:

  1. Resize and optimize the image (through, eg, TinyPNG).
  2. Upload it to the Media Library.
  3. Copy the URL, and assign a new entry within the Title Background Image collection type.
  4. Assign the Title Background Image you just created to the desired Article, within the Article edit screen.
Advertisements
Remove Ads