What This Screen Does
This is where you read the full content of a news article. Think of it like opening a newspaper article — you see the headline, a large cover image, a short summary, and then the full text. From here you can also go back to the list of articles or jump to the edit screen to make changes.
How to Get There
Open the dashboard.
In the left-hand menu, click News.
Click on any article in the list.
You are now on the Article Details screen.
Step-by-Step Guide
1. Toolbar
At the top of the page you will find a toolbar with a few actions:
Action | What It Does |
Back button | Returns you to the news list. |
Edit icon (pen) | Opens the article in the edit screen so you can change its content. |
Live link icon (external link) | Opens the public version of the article. This icon only appears when the article is published. |
The Back button is on the left side of the toolbar.
The Edit and Live link icons are on the right side.
2. Hero Image
Below the toolbar you will see a large banner (480 px tall) showing the article’s cover image.
The article title is displayed in white text over the image, in the top-left area.
If the article has an author and a creation date, you will also see the author’s avatar, name, and the formatted date at the bottom of the banner.
If no cover image was uploaded, the banner will appear as a dark gradient without a photo.
3. Teaser Text
Right below the hero image you will see a short teaser (subtitle or summary).
This text is displayed in a slightly bolder style so it stands out from the main body.
The teaser helps you quickly understand what the article is about before reading the full content.
4. Article Body
The full content of the article appears below the teaser.
The body is displayed in a readable column (max width 720 px), centred on the page.
Content can include formatted text, headings, images, links, and lists — depending on how the author wrote it.
If the article was created with the JSON editor, the body is rendered as raw HTML. Otherwise it is rendered as Markdown.
5. Navigate Away
To go back to the article list, click the Back button in the toolbar.
To edit this article, click the Edit (pen) icon in the toolbar. You will be taken to the edit screen for this article.
What Happens Behind the Scenes
You click on an article in the news list
|
v
The page reads the article ID from the URL
|
v
Loading skeleton is shown while data is fetched
|
v
API call: NewsService.getById({ id })
|
v
Article data is stored in Redux (state.news.currentArticle)
|
v
Loading skeleton disappears
|
v
Hero image, title, teaser, and body are rendered on screen
|
v
(If the API returns an error)
An error message is shown with a "Back to List" button
Troubleshooting
“I see a loading skeleton that never goes away”
The article data may be taking a long time to load. Check your internet connection.
Try refreshing the page. If the skeleton still does not disappear, the server may be experiencing issues — contact your administrator.
“I see an error message instead of the article”
The error message is displayed exactly as returned by the server. Read it carefully — it usually explains what went wrong.
The most common cause is that the article no longer exists (it may have been deleted by another user).
Click the Back to List button to return to the news list and try a different article.
If the article should exist but you keep getting an error, contact your administrator.
“The cover image is not showing”
The article may not have a cover image uploaded. In that case you will see a dark gradient banner without a photo.
If a cover image was uploaded but is not displaying, the image file may have been moved or deleted from the server. Go to the Edit screen and re-upload the image.
“The article body looks broken or shows raw HTML tags”
This can happen if the article was saved in a format the viewer does not expect.
Go to the Edit screen and check the article body. Re-save it to make sure the content is stored correctly.
If you see stray HTML tags (like
<p>or<div>), the article may have been pasted from an external source with extra formatting. Edit the body and clean up any unwanted tags.
“I cannot find the Edit button”
The Edit icon (a small pen) is in the top-right area of the toolbar, just above the hero image.
If you still do not see it, you may not have permission to edit articles. Ask your administrator to check your role and permissions.
“The teaser or body text is empty”
The author may not have filled in those fields when creating the article.
Go to the Edit screen and add a teaser and body, then save.
“I clicked Back but ended up on the wrong page”
The Back button always takes you to the main news list (
/news).If you expected to go somewhere else, use your browser’s back button instead, which returns you to the exact page you came from.
“The page is blank — no skeleton, no error, no article”
This can happen if the article ID in the URL is invalid or missing.
Make sure the URL follows the format
/news/123where123is a valid article ID.Navigate back to the news list and click the article again to get the correct link.