Templates & Frontend
Make Article Images Link to the Article
On a blog listing, people click the picture. They expect it to open the article, and when nothing happens they usually assume the site is broken rather than trying the headline. Joomla 6 covers this with a setting — no override, no plugin.
The setting
Content → Articles → Options → Images and Links, and turn on Link Intro Image. From that point the intro image in blog and featured layouts is wrapped in a link to its article, with the article title as the link title.
The same option exists at two narrower levels, and the narrower one wins:
- On a menu item, under Options, so one section can behave differently from the rest of the site.
- On an individual article, under Images and Links.
Set it globally first, then override the exceptions. Setting it per article on a site with a few hundred articles is how people end up with inconsistent listings nobody can explain later.
What Joomla emits
The intro image is rendered by a core layout that already handles the link, the access check and the alt text:
<figure class="item-image">
<a href="/section/article-alias" title="Article title">
<img src="/..." alt="...">
</a>
</figure>Note the access condition in the core layout: the link is only produced when the visitor may actually view the target, or when the site is configured to show unauthorised links. That is a detail hand-written overrides routinely get wrong — they link every image, and visitors land on a login prompt.
Alt text has its own switch
While you are in that panel: an image with no alt text and no explicit "decorative" flag is a genuine accessibility failure, and Joomla exposes both. Fill in the alt text when the image carries meaning, and tick the empty-alt option when it is purely decorative. Leaving it blank by accident is not the same thing as declaring it decorative.
When you do need an override
The setting covers the common case — image links to its own article. You need a layout override only for something different, such as opening a lightbox instead, or linking to the full-size image rather than the article.
In that case copy the core layout rather than the whole listing:
mkdir -p templates/yourtemplate/html/layouts/joomla/content
cp layouts/joomla/content/intro_image.php \
templates/yourtemplate/html/layouts/joomla/content/Overriding this one file keeps the change small and leaves the rest of the listing on core markup, which matters when Joomla improves it.
Do not set image dimensions inline
A habit worth naming: writing style="width:420px;height:420px" into the layout to keep a listing tidy. It distorts anything that is not square, it cannot respond to screen width, and it survives every redesign because nobody remembers it is there.
Size images in CSS with aspect-ratio and object-fit instead:
.item-image img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
}