In the Select Menu Item Type list, choose Article | Category Blog Layout.. In the Parameters Basic section, select the appropriate category: About SRUP/Who are SRUP?.. In the Menu Item
Trang 1Time for action – create a facebook using the Blog Layout
Let's use the Blog Layout to create a small facebook, a few pages presenting the SRUP team:
1. For this purpose, create a few more content pages, each for every one of the
SRUP founders Navigate to Content | Article Manager and click on New.
Create three articles in the Who are SRUP? category in the About SRUP
section In this example, we've used these titles: Ms Daiping Suraba, Dr T
Phaedratski, and Dr A Fienstein Create articles with an intro text, a Read
more link, and a main article text (you've seen this before in Chapter 4).
Trang 2[ 178 ]
2. Create a new menu link to the category page Navigate to Menus | Main Menu and click on New In the Select Menu Item Type list, choose Article | Category
Blog Layout.
3. In the next screen, give the new link a Title (Who are SRUP?) In the Parameters
(Basic) section, select the appropriate category: About SRUP/Who are SRUP?.
4. Click on Apply and click on Preview So far so good! There's a new link, showing a
new category page:
5. As you can see, the default layout is unbalanced There's a big gap to the
right-hand side of the second and third intro text That's because we have
to tell Joomla! how to spread items on the page In Parameters
(Advanced),
set Multi Column Order to Across.
Download at Wow! eBook
WWW.WOWEBOOK.COM
Trang 36 Click on Apply and then on Preview The outcome is much better:
7. The page looks OK, but there's room for improvement Why should the first founding member have a wide column and the others a narrow one? Let's divide them evenly
over the page Change the Parameters (Basic) of the Who are SRUP? menu link
as follows:
# Leading: 0
# Intro: 3
Columns: 3
# Links: 0
Trang 4[ 180 ]
8 Click on Apply and click on Preview The following is the new outcome:
9. Looks alright, but the three column layout doesn't fit with the overall site design
Let's try one last alternative Set # Leading to 3, # Intro to 0, Columns to 0, and # Links to 0 Click on Apply and click on Preview Voila! A simple
and clean one column layout:
Download at Wow! eBook
WWW.WOWEBOOK.COM
Trang 5Let's keep it this way The page looks much more balanced now.
What just happened?
You've seen some different ways in which category pages can show article content You've
added a facebook to the Who are SRUP? category by displaying the intro text of these
articles in a category overview page; visitors can click on it to read the full article
Have a go hero – add a category description
Category content doesn't always speak for itself so you might want to give your visitors a short introduction to a category page Remember the Category Description in Chapter 5? It allows you to show a few descriptive lines at the top of any category page Why not add one
to the Who are SRUP? category page?
1 Navigate to Menus | Main Menu and open the Who are SRUP? menu link for editing In the Menu Item Edit screen, navigate to the Parameters (Basic) section and make sure Description is set to Show.
2 There's no category description to display, so let's add a few lines Navigate to
Content | Category Manager and click on the Who are SRUP? category title to edit
the category properties In the Description field, add some intro text:
3 Click on Save and click on Preview A short category description is displayed:
Trang 6[ 182 ]
The more menu items you create, the longer and messier the main menu gets You'll probably want to change the order of menu links—or create submenus
to better arrange the long list of menu links Don't worry, we'll get to building
and customizing menus in Chapter 8
Showing full articles on a category overview page
So far, you've seen how you can show intro texts and links to articles on a category page However, you can also use category pages to show a list of full articles In fact, this is
probably why this layout is called a Blog Layout A typical page on a weblog site consists of a number of short articles ordered by subject or by date Here's an example of a category page showing three full article texts:
Download at Wow! eBook
WWW.WOWEBOOK.COM
Trang 7To achieve this in Joomla!, you use a category page like the one you created just before
To show full articles instead of intro texts, change the article texts themselves Navigate to
Content | Article Manager and select the article you need to edit In the editor screen, delete
the red dotted line indicating the separation between intro text (with a Read more … link) and
the rest of the text This will tell Joomla! not to split the article in two parts, and thus, on any overview page it will show the full thing instead of just its intro text
Have a go hero – experiment with Blog Layout settings
Just like the Front Page Blog Layout, the Section and Category Blog Layout offers a litany of
settings that allow you to adjust the target page You can set them trough Menus | Main
Menu | [name of link to section or category page].
The Component and System Parameters are for the most part the same as the ones you've
seen when setting the Front Page Blog Layout preferences See the section Have a go
hero – Try out the Front Page settings earlier in this chapter for a full listing.
Just the two first Parameters are specific for Section or Category Blog Layouts Under
Parameters - Basic you select the Section or Category you want to show, and you have the
option to add show a section or category Description and a Description Image at the top of
the section or category overview page
The second type of overview page: Lists
Compared to the Blog Layout, the List Layout provides a simpler view of section or category contents Instead of a series of intros and links, the visitor is shown only a number of links to categories and/or articles The following is an example of a Section List page in the default Joomla! installation, a listing of four categories in the FAQs section:
Trang 8[ 184 ]
Creating Section Lists
If you've already created links pointing to Blog Layouts, creating a link to List Layout will seem
very familiar Navigate to Menus | Main Menu, click on New and select the appropriate Menu Item Type: Category List Layout or Section (List) Layout Provide the necessary details
(select the target category or section and type a link title) and you're done
Time for action – change a Blog Layout to a List Layout
To see the capabilities of the List Layout, let's convert a Blog Layout link you created
previously to a List Layout, both targeting the Activities section
1 Navigate to Menus | Main Menu Click on Activities to edit the menu item.
2 In the Menu Item [Edit] screen, click on the Change Type button:
3. In the Change Menu Item screen, select Internal Link | Section | Section Layout
A Section List shows no article contents; it just presents a list of categories
as hyperlinks
4. Click on Save Done! Click on Preview to view the home page of your site; click
on the Activities link.
What just happened?
With just a few clicks you have created a section page that displays a list of hyperlinks to categories instead of a series of teaser texts Clicking on a category title reveals another intermediate page, a list of article titles
Download at Wow! eBook
WWW.WOWEBOOK.COM
Trang 9In this example, the
Activities menu link
shows a Section List of
two categories
When the visitor clicks
on the Lectures link,
the Lectures category
contents are shown as a
list of articles The visitor
can even use the Filter
field (a search box) to
find the desired article
The List Layout is useful for sections or categories that are crammed with articles It provides
a quick overview, allowing visitors to scan or search for article titles You might consider using List Layouts on a site with many articles on related subjects, such as elaborate FAQ sections or large numbers of articles in a section with product reviews Lists enable visitors to find information they search for fast It's not really suited to attract casual surfers to explore the site's content For that purpose you can use the Blog Layout
Have a go hero – undo!
In a site with much content, the List Layout can help your visitors search category and
article titles However, in this case, this layout doesn't really do the trick It doesn't look very inviting—your site visitors are not likely to click through on an empty page with just a few links to another page with again just a few links Luckily, you can easily revert your actions
Trang 10[ 186 ]
Customizing lists: Exploring Section List Layout parameters
List Layout pages have less parameters than Blog Layouts To change the settings, navigate to
Main Menu | [name of menu link to the section].
Parameters (Basic)
Under Parameters (Basic) you can set how you want the items to be arranged on the
section page
Section Select the section you want to show
Description,
Description Image
Do you want to show a section description and an image at the top of the section overview page? The following example shows an introductory text
on the Activities section:
To add the Description (or its image) itself, navigate to Content | Section
and edit the appropriate section
Section Select the section you want to show
Category List - Section Select Show to display the Categories in the section list.
Empty Categories
in Section
Choose Hide if you don't want to display empty categories (which are
dead-end roads for your visitor)
# Category Items Select Show to display the number of category items (articles).
Category Description Select Show to display a description below each category title To add a
Category Description, navigate to Content | Category Manager |
[category name].
Download at Wow! eBook
WWW.WOWEBOOK.COM