Intro text, full text and the Read More line in Joomla

A client complains that the blog page is one endless scroll. Every article appears in full, photos and all, and the "Read more" link the designer showed in the mockup is nowhere. Another client has the opposite problem: the article page repeats the first paragraph twice, once as a teaser and once as the opening of the story.

Both come down to the same thing. Joomla stores an article in two parts, intro text and full text, and a handful of settings decide where each part shows up. Once you know which setting does what, both problems take a minute to fix.

Where the split happens

In the article editor there is a Read More button (in TinyMCE it sits under the CMS Content menu, in other editors below the text area). Put the cursor at the end of your first paragraph and click it. A red dashed line appears. In the HTML it is a single tag:

<hr id="system-readmore">

When you save, Joomla cuts the text at that tag. Everything above it goes into the introtext column of the database, everything below into fulltext. The tag itself is not stored. Only one break per article is allowed; the button refuses to add a second.

No break means no full text. The whole article is intro text, and that is exactly why the first client's blog page shows every article in full: a blog layout prints the intro text, and here the intro text is the entire article.

What a blog page shows

A Category Blog or Featured Articles menu item prints the intro text of each article, and below it a "Read more" link. That link only appears when the article actually has full text. An article without a break gets no link, because there is nothing more to read.

The link itself is controlled in Content > Articles > Options, and can be overridden per menu item:

• Read More: show or hide the link altogether.
• Read More with Title: turns the link into "Read more: Moving a site to a new domain". Better for screen readers and for search engines than ten identical "Read more" links on one page.
• Read More Limit: the number of characters of the title used in that link, so long titles do not wrap over three lines.

Per article you can replace the link text in the Options tab with Read More Text. Useful for a "Download the brochure" or "See the full menu" teaser where "Read more" would be odd.

What the article page shows

By default the article view prints intro text and full text together, as one continuous story. That is the second client's problem: the intro was written as a teaser ("In this article we explain...") and the full text starts again from scratch, so the reader sees the same idea twice.

The fix is Show Intro Text. It exists in the global Options, on the menu item and in the Options tab of each article. Set it to Hide and the article page shows only the full text. The intro then works purely as a teaser on blog pages and in modules. If an article has no full text, Joomla shows the intro text anyway, so hiding it never leaves a page empty.

Pick one approach per site and tell the editors. Either the intro is the first paragraph of the story (Show Intro Text on), or it is a separate summary (off). Mixing the two across articles is what produces the doubled paragraphs.

Two images, two places

The Images and Links tab has an Intro Image and a Full Article Image. The intro image appears on blog pages and in the Articles modules, the full article image on the article page itself. They are separate fields, so a blog that shows a picture next to every teaser but nothing on the article page usually means somebody filled in only the intro image.

Use the same file in both fields when you want it in both places, or a cropped version for the blog grid. Each field has its own alt text. If the image is purely decorative, tick No Description rather than leaving the alt text field empty, so the empty alt is a deliberate choice and not an omission. Before uploading, resize and compress the file; a 4 MB intro image times twelve articles makes a slow blog page.

The break that breaks the layout

Because Joomla cuts the text as a plain string, the position of the break matters. If the Read More line ends up inside a <div>, a table or a list, the intro text gets an opening tag without its closing tag. On a blog page that unclosed <div> swallows everything after it: the next articles shift into the first one, the pagination ends up inside a column and the sidebar drops to the bottom.

It happens most with text pasted from Word or another website, which arrives wrapped in containers. When a blog page suddenly falls apart after one new article, open that article, click Toggle Editor and look where <hr id="system-readmore"> sits. It should be between two top-level paragraphs, never inside another element. Move it, save, and the page is back.

Modules use the intro too

The Articles modules (Newsflash, Category, Latest) work from the intro text and the intro image as well. An article without a break shows up in full in a Newsflash module on the home page, which is how a three-line news ticker turns into a wall of text. The fix is the same: add the break.

For existing articles there is no batch option for this, so each one has to be opened and given a break by hand. If you have many, sort the article list by date and start with the ones that appear on the home page and in blog views. To change how the teaser looks rather than what it contains, override the blog item layout in your template instead of touching the core files.