Update: 2016-08. This currently works in Joomla 3.6

NOTE: The best way to remove numbers (the article ID) from the URLs in Joomla is to create a menu item for the article (page) in question. I know it is not an attractive option if you are transferring hundreds of old pages, but there you have it. Be sure to do this for new pages and you will not have a problem. You can also look up solutions in the Joomla Extensions or search how to edit the router.php file.

Summary (Disclaimer)

I have found a method to get SEO friendly URLs in Joomla to match my existing structure. This mehthod shows how to have articles that are two categories "deep" and have a consistent URL address of /pictures/subcategory/article-name. See above NOTE to remove numbers from the URLs. I am leaving these notes here because I do like the structure of physical "directory index" pages and I'm sticking to it.

Background

I am happy with the state of the photo index pages at this time. I wanted to have a similar look in Joomla where visitors could see a list of all my photos on an index page with a small icon that visually represents the location. Here is an example of the original top-level photos page and what I was able to achieve using Joomla (testing with small amount of data).

 

REFERENCE: I am using /pictures/subcategory/article-name as a generic dsecription of page such as /pictures/arizona/devils-bridge. Pictures is a level 1 category. Arizona is a subcategory of Pictures (you choose Pictures for Parent Category). The string "devils-bridge" is the Article Alias for the final article that contains the content.

Procedure

  1. Make sure you have "SEO Friendly URLs" enabled in the Global Configuration. There is a lot of existing documentation about this.
  2. Create your top level category and desired subcategories using the Joomla administration Category Manager. In both cases, the "alias" should be the string you want to see in the URL.
  3. OPTION: add descriptive text in the "Category" Tab. You can add an image using the Options Tab, but I added my own HTML in the box (CodeMirror Editor) to make the image a link. Here is my example. "text120" and "pad-right" are my own custom CSS classes.

    <p class="text120"><a href="/pictures/arizona"><img src="/images/arizona/thumbs/grand-canyon-0305-012.jpg" alt="" class="pull-left pad-right" /></a> Landscape photos from the Grand Canyon and Sedona area. Hiking trails and other tourist sites.</p>

    <p style="clear:both;">&nbsp;</p>

  4. Using the Joomla administration Menu Manager, create a new menu item pointing to the top level category ("PHOTOS", alias= "pictures"). In the Menu Item Type drop-down, make sure to select "Articles... LIST ALL CATEGORIES". Be sure NOT to pick "Category List", as this will get you URLs with numbers. [If you don't want the pop-up menus to appear for subcategories when you click the top category, you need to go to the MODULE Manager because you can have different instances of a menu in different module locations. In the module associated with the menu, on the Module Tab, set both the Start and End Level to "1".]
  5. Still in the Menu Manager, create a new menu item of the type Articles... Category Blog with the Parent Item being the top level category. For me the Parent Item name is PHOTOS, but the alias is "pictures".
  6. Create the final content as Joomla Articles. In the category drop-down, set it to the subcategory (arizona in my example). OPTION: To have some descriptive text concerning this Article (page) appear on the Subcategory index page, enter it at the very top of the editor. Place the cursor where you want to separate Intro Text from the main article and use the "Read More" button to create the division. At this point, you can see all your articles with a "number-first" name (auto-generated by Category Blog menu item). To get rid of this, you need to do the last step.
  7. Use the Joomla Menu Manager to create link to the final Article. The Menu Item Type will be Articles... Single Article and the Parent Item will be the subcategory (Arizona in my example). Be sure to set the Article Alias to what you want the end of the URL to be (in my case devils-bridge). You will need to create menu items for each item in the Subcategory if you don't want to have the numbers in the URL.

Here is a comparison of how I reproduced the subcategory /photos/arizona index page.

 

OPTION: Styling the Subcategory Page

  • Hide Intro Text - I tried to do this under the Global Options and I couldn't get it to filter down with "Use Global". As a last resort, you can use the Article Manager, select an individual article, go to the Options Tab, and set "Show Intro Text" to "Hide".
  • Keep what I think are the default settings articles, as Show Title and have Linked Titles be On.
  • Intro Image - Using the Article Manager, go to the Images and Links Tab, and add a small thumbnail image. I used the Image Float = Left to get the effect with the Intro Text seen in the above images.
  • Hide the "Read More" button. The linked title is enough for this purpose. There is a setting for this in Global Configuration. Otherwise, the setting is in the Menu Manager. For a Category Blog menu item, go to the Options Tab and set "Show Read More" to HIDE.

Note on Migrating Existing Website to Joomla: Using Joomla is much different than creating directories and pages and uploading them to the server. It was not immediately obvious to me that Joomla cannot create a page under a directory that phsyically exists. You must follow the Joomla category method. So, just in case you were wondering, you cannot "substitute" your existing pages with new Joomla pages.