Reference

Here's how to link the article intro images, on a category blog page for example, to its article like the article title or "Read more" links.

Copy

JOOMLA-ROOT/layouts/joomla/content/intro_image.php

to

JOOMLA-ROOT/templates/<YOUR_TEMPLATE>/html/layouts/joomla/content/intro_image.php

You may have to create some or all of the folders—html, layouts, joomla, and content—inside your template folder. Then simply control-drag intro_image.php into that folder.

Then, edit the code in that new override file by wrapping the image tag with:

<a href="/<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($displayData->slug, $displayData->catid)); ?>" itemprop="url"> </a>

The <img /> tag will have a bunch of php code in the middle of it, so you have to figure out where the end is and place the closing anchor tag after that.

Joomla! 3 is in an awkward phase right now, in that they have integrated Bootstrap version 2, but Bootstrap has advanced to version 3 with such compelling improvements that it cannot be ignored. Everyone is aware of the problem and there are a wide variety of responses to it ranging from people who say we shouldn't buck the system and should use Bootstrap version 2 or we're asking for problems; all the way to people who say they are quitting Joomla for good because it is ruined; as well as various proposed solutions, most of which are not quite right and may lead to issues down the road.

I've researched, experimented, and tested. I've implemented the override solution successfully on 3 web sites. The solution is utterly simple:

You will create overrides for the Bootstrap CSS and JavaScript files for your front-end custom template.

You will leave the back-end template alone in the default configuration. It will load the Bootstrap version 2 CSS and JavaScript files and it will function fine.

To create the overrides, do as follows:

  1. Add the current Bootstrap CSS file (both .css and .min.css) from http://www.getbootstrap.com to /templates/yourtemplate/css/
  2. Add the current Bootstrap JavaScript file (both .js and .min.js) from http://www.getbootstrap.com to /templates/yourtemplate/js/jui/
    (You will probably have to create the "jui" folder.)
  3. Include these 2 lines within PHP tages above the <!doctype html> at the top of your template's index.php file (located inside /templates/yourtemplate/):
    JHtml::stylesheet(Juri::base() . 'templates/cms/css/jui/bootstrap.min.css');
    JHtml::script(Juri::base() . 'templates/cms/js/jui/bootstrap.min.js', 'bootstrap', true, false, true, true);
    Calling the Bootstrap JavaScript file with the JHtml command will allow Joomla to check for overrides in the appropriate folder in your template first before looking in /media/jui/. And it will enable the other functionality that comes with that command (i.e., enabling the jQuery framework in noConflict mode and loading the .min version normally and the non-minified version when in debug mode).

Please let me know if I got something wrong.

Read more here:

Here is my repository of resources—the best of the best. I'm putting them here for my convenience because I refer to them often. And if I find them so useful, you may too!

General

Troubleshooting

How To

Google Web Fonts

Adobe Typekit

Build Your Page in Dreamweaver

Education

Tools

Principles

SEO

Good Design Is Ethical Design

Accessability

Mobile Tutorials

Files

Training

  • HTML Entity Reference—&What;