7 Tips to Great K2 (and Joomla) Templating – Part 2

Tutorial by Ryuhei Yokokawa
05.15.2013

So you’ve read our “Introduction to Templating for K2” tutorial and are ready for the next step. We are too! This article will cover templating the category.php, category_item.php and item.php files in a different way than the default template.

Good Templating is About Obvious and Good Ideas

So, what can you do to make your K2 website function like a swiss army knife from hell that opens 150 bottles of wine at once? To be honest, I’m not a fan of super complex templating engines (think RokSprocket, WidgetKit and Gantry). I’ve wondered why you would use any of these systems when you could just make a well engineered K2 template. Most of those systems already rely on a CCK anyway. To get around using those complex engines, we can definitely show you some new tricks. Some of these are more tips than they are slick coding tricks.

1. How to show Category Items divided by Subcategories

This is what we did on our Philosophy and Services pages. We wanted to have greater control of content per item rather than by just a single Philosophy category. This type of templating is a good practice since it prevents clients from messing up the styling. We have control of padding between each item so clients don’t have to figure that out in the WYSIWYG. WYS is never WYG.

Below is how the categories/items are structured in our philosophy page:

  • Philosophy (Category)
    • Simplicity (Sub Category)
      • Design=Function (Item belonging to Simplicity)
      • Menus should be simple too. (Item belonging to Simplicity)
      • Its hard to be backwards compatible (Item belonging to Simplicity)
      • In the end its about you and your business (Item belonging to Simplicity)
    • Trends (Sub Category)
      • Trends come and go (Item belonging to Trends)

So above might seem a bit complex, but fear not! Below is the logic of our code:

CATEGORY LOOP 	<CATEGORY INFO> END CATEGORY LOOP  SUBCAT LOOP
	ITEM LOOP 		IF ITEM_CAT_ID = SUBCAT_ID 			<ITEM INFO> 		ENDIF 	END ITEM LOOP END SUBCAT LOOP

This allows you to divide items based on the subcategories they belong to. Make sure “Catalog Mode” is off so that the system will show items that belong to all child categories.

2. Don’t use the Category Title Input. Just use the Category Description!

Why? you might ask. This allows for greater control of the titles. If you’ve noticed, all of our titles have some blue text along with black text (we used spans to add in a bit of blue). You do have to watch out and make sure that the HTML is right. This idea is kind of contrary to what I said in the last section, but there’s really no other way. By having the Description spit out the Title, you also have the option of using an H2 right underneath it for your SEO gains. We like to integrate good SEO philosophy along with our development/design here at Y-Designs. This one I guess is more of a tip, but definitely something to think about.

If you really can’t use the description to accomplish this one (I know there are times when you need to use the description field for something else), you can use this JS library: http://kerningjs.com/

This one makes it pretty easy since you can assign the kerning/font changes through CSS.

3. Use Media Queries to Change Content between Mobile and Desktop. Its totally allowed 😉

We figured out that for the most part, mobile devices including smartphones, just aren’t ready for the tags and sometimes fancy JS. If you go to our site’s experiments section using a desktop, you will notice that the background is an animated canvas piece (thanks Max!). However, if you go there using a mobile device, it’s just a listing of all of the experiments. We just hid the canvas for mobile devices. Just another way to be cool without breaking stuff!

4. Using JFactory::getDocument() and getting creative with K2 ExtraFields

For the type of development that we do here, integrating CSS/JS/LINK tags within the head using the JFactory::getDocument() is a real advantage. This is especially true once you know how to use JCH_Optimizer to compress all the JS/CSS registered with Joomla (checkout our tutorial on that here).

Using addStyleSheet() (http://docs.joomla.org/JDocument/addStyleSheet) gives you a chance to do a lot different things to the site. For example on Living On One’s website, we assign a new style sheet along with Javascript using addScript() (http://docs.joomla.org/JDocument/addScript) for the special Film page.

In our particular case, since SH404SEF does not handle rel canonical we had to build a way to do so for each K2 item page. We don’t translate our Blog or Tutorial pages to Japanese so we used the addCustomTag() function in conjunction with K2 Extrafields to assign a rel canonical. This is an issue for us since we chose to use Falang instead of the native Joomla translation system. The native system doesn’t show things unless they’re translated and Falang/Joomfish is a better fit for us overall.

If you want to learn more about the getDocument() function works, check out this link: http://docs.joomla.org/Adding_JavaScript_and_CSS_to_the_page

In case you have load order issues we show you how to engineer the CSS array if things aren’t working out:
https://y-designs.com/support/tutorials/how-to-inject-css-prior-to-the-css4k2-system.html

NOTE: I will say this to whoever is maintaining Joomla’s addScript() function. I think we need to come up with a better way of figuring out Jquery and MooTools Dependencies. It’s really annoying when we have to debug for multiple jQuery/MooTools insertions. Below is a Tweet posted by Fotis Evangelou, the CTO at JoomlaWorks (the creators of K2).

5. If you have different ways you want to render item listings, just make another category_item.php

I think this idea was actually covered in our basic tutorial for K2 templating, but you can change the category_item.php out with another file. This let’s you have control of the category listing. Let’s just say that you wanted your leading to have a lot more options (sharing, tags, etc) to show, but you didn’t want that to be the case for the Primary and Secondary listings. Sure you can control whether they show or not, but you don’t have DOM level control!

This means that they’ll all have to look the same! THAT’S NO FUN!

In order to further customize the view so that leading items have unique layouts you can create a category_leading.php file and specify to loadTemplate(‘leading’) within the category.php file, as displayed below.

$this->item=$item; echo $this->loadTemplate('leading');

Now you can edit the category_leading .php file and really change up the HTML to do whatever you want with it.

6. Enable IntroText in the K2 Parameters

This is especially key for the blog templates/bloggers. This allows you to have a different text / inline image set for the intro. We used to get complaints when we stripped out the HTML and shortened the full text field.

Using the IntroText area allows your users to have greater control of their content.

7. Remember, this is just PHP at the end of the day.

This is something that we often forget whether we’re programming / templating in one language or another. At the end of the day, remember that you are allowed to use the language, not just the framework. PHP will be PHP and you can use whatever script you need in order to accomplish your task.

CONCLUSION

So, why are we giving out our templating tricks? Because we know we can always come up with more stuff and continue pushing! We’re about pushing beyond what exists and making stuff better.

Let us know if you know other tricks we haven’t covered that might be of interest in the comments below.

More Tutorials