Monday, a new day. After fixing a variety of problems before lunch, I can finally start working on the projects after a light lunch.
I take a peek at the schedule I made on friday, and spend some time thinking on how to execute them. I really want to use K2 for the “Products” page, and I’ve seen an interesting extension that I plan on using as well.
- Since this is going to be a multi-langual site, I install Joomfish. This tool will allow me to translate all articles with ease. Because my default language will be Dutch, I make a change in the language settings.
- Second of all, I install K2; because I’m planning to use this component extensively. I leave the configuration for later.
- I also install UberPageBreak. I plan to use it for the product pages; so I can “break” the article into different sections: Overview, Video’s, Support. This plug-in support both Joomla! articles and K2 items. I can add another great Joomlaworks extension to my list.
- Finally, I install the JCE editor. Since ‘discovering’ the editor, I haven’t looked back to TinyMCE.
I’ve also downloaded JC Advanced Links so I can use the “advanced link” functionality of JCE for K2, but wait with installing it.
Next, I create the categories. I start with a “Global” category which I’ll use for items that don’t fit in any of the product categories.
I change the K2 settings of the category:
- All Author information is disabled
- Most Item View options are disabled
- Most of the Item View options are disabled, as well.
Then, I create a “Products” category. The settings are identical to the “Global” category settings, with one exception: The Category is shown below each item. This way, people can click the category and see an overview of all products in that category.
Next, I create two subcategories which inherit the settings of “Products”.
I’ve decided to make a change to the category item view. I change the size of the images first. Then, I decide to change the image position. By default, this image hovers above the intro text. I decide to move it to the left, and let the text “wrap” around this image.
To achieve this, I remove a <div class=”clr”> entry in components/com_k2/templates/default/category_item.php
I then make a change to K2.css. I add the following to span.CatItemImage:
- float:left; and margin-right:10px;
This gives me what I want: the item image is moved to the left, and the text wraps around it. This gives me room for more products on one page.
The basic lay-out is now complete. I add the About Articles, and perform some tests with the “Products” Category. After some tinkering with the settings, I reach the result I want.
Got a comment on today’s event? Feel free to reply!