I've been working on a website that uses Mijoshop (the Joomla e-Commerce and shopping cart component built using Opencart). Problems occurred when I wanted to use product images as CSS background images, rather than HTML images. The client had uploaded a bunch of images that contained spaces within the file names, making them unsuitable to be used in the CSS background-image property (which just left empty white spaces where the images should have appeared(. There were so many that it just wasn't feasable to rename them manually, so I needed to figure out an automated solution, which became a three step process:

1. Install an Opencart script that future proofed the problem of file names containing images from this point on.
2. Renaming the existing images already used on the server
3. Modifying the SQL tables to match the newly renamed files names

Step 1 - Future proof Mijo Shop

I found this opencart ocmod script that removes spaces from any images uploaded. It worked great and was easy to install directly using the extensions installer from Mijoshop main menu. The file can be found here.

Whilst this ensured that any images uploaded from this point on wouldn't have any spaces withn the filenames, this script didn't fix the problem for any images already uploaded into the Opencart catalog. The next step in this solution addresed that problem.

Step 2 - rename the existing files

I found a handy program called Rename-it! which made easy work of btach removing all spaces in the exisiting files. I tested this locally on desktop rather than applying it directly to the server. Rename-It! is free, easy to use, and also didn't install any crappy third party bloat software. Too easy!

Step 3 - Match the database filenames with existing files

The tables in the website database need to match the newly renamed files. We can do this with a simple SQL find and replace script that removes the spaces in the filenames. make sure to change the table name and column name to match those used by your website

UPDATE table_name
SET image = REPLACE(column_name, ' ', '');

The default Joomla contact form component does allow us to modify it slightly and add new fields to the contact form. New fields are contained within a field group. Follow the steps below and view the video tutorial for further explanation on these concepts.

• Go to "Components" and "Contacts".
• Click "Field Groups" in the left-hand sidebar.
• This is the important new task: choose "Mail" from the dropdown menu. This means your fields will be attached to contact forms that users can rely on to send email. If we choose "Contact" or "Category", our fields will only be available to site administrators. If you choose "Contact", this will be similar to the Address, City or Suburb, etc fields we saw above.

• Click "New".
• Title: Extra Contact Details
• Save the field group and make sure your next screen looks like this:

• Click "Fields" in the left-hand sidebar.
• Again, choose "Mail" in the dropdown menu:

• Click "New".
• Title: What is Your Question About?
• Type: Checkboxes

• Field Group: Extra Contact Details
• Checkbox Values: Enter topics that people might be contacting you about.

• Click the "Permissions" tab.
• Set "Edit Custom Field Value" to "Allowed". This will allow anyone to enter data into this field.

• Visit the front of your site and your contact form will now have a custom field:

This tutorial will show you how to embed a video into a Gantry particle position on a Joomla website. This tutorial does require the website to have installed the Joomla Works All Videos plugin.

Whilst in this tutorial I use a video that is hosted on Youtube, the same concepts can be slightly modified for any videos that are hosted on your own web server. For a deeper explanation of the differences I suggest watching my previous tutorial Embedding locally hosted videos on a Joomla website.

Whilst many advanced form components are available for Joomla (such as the excellent RS Forms Pro), creating a fully functioning contact page with a form is actually very easy to build natively within Joomla. No additional components are required as everything you need is built into Joomal by default.

This tutorial will walk you through the steps to create a contact form (as pictured below), and also point out a small glitch within Joomla and how to solve it.

The Joomla Works All Videos plugin is a great addition to your Joomla website to display videos directly within your articles. Videos's can be hosted on a third party service such as Youtube or Vimeo, or can be hosted directly on your own webserver alongside your Joomla website.

However, in my experience I've found that there are a couple of issues that need to be resolved when hosting videos on your own web server:

1. Using the plugins responsive settings doesn't work correctly, resulting in videos that don't span 100% across the page (or parent containers width)
2. Once embedded, videos are displaying as a boring black square with a white play icon

These issues only arise with vidoes hosted on your own server, and not those hosted on a service such as Youtube or Vimeo.

This tutorial video addresses both those problems, and provides solutions to have your locally hosted videos displaying as anticipated.

There is some additional CSS code that is required, which can be found on my Bit Bucket page over here. This CSS snippet needs to be added to your Joomla theme's style sheet.

Note: In this tutorial video I use the Kraken template for Joomla, and the Kraken template for Joomla. Whilst it's not neccessary to use both of these it's worth mentioing that I add the CSS hack above directly into the Gantry parameters rather than append it into my themes style sheet. Both methods will work just fine.

This is a super handy cheat sheet compiled by the K2 team that solves many PHP conditional statements:

https://github.com/kricore/Advanced-templating-with-K2/blob/master/_inc/cheatsheet.php#L28-L55

Here's a very handy snippet to create a PHP conditional if statement based on a specific K2 item ID:

<?php
$itemid    = JRequest::getInt('Itemid');

if( $itemid == 123 ) {
   echo 'do something';
} else {
   echo 'these are not the droids you are looking for';
}
?>

<?php
$itemid    = JRequest::getInt('Itemid');

if( $itemid == 123 ) {
   echo 'do something';
} else {
   echo 'these are not the droids you are looking for';
}
?>

The code above can be altered using the following hooks from the page URL:

$option = JRequest::getCmd('option');
$view  = JRequest::getCmd('view');
$layout = JRequest::getCmd('layout');
$page  = JRequest::getCmd('page');
$task  = JRequest::getCmd('task');
$id    = JRequest::getInt('id');

Here's a weird bug that I have identified from time to time. In the template options of T3, the layout field is displaying the full path to each laout option, rather than display each layout name.

In the following example I will be doing an override to the Category blog layout. If you want to do overrides to the article layouts use the same method but make modifications as required.

The layout changes that I'm going to make are changes to the article feature image and article heading

1. Move the files from components/com_content/views/category/tmpl into templates/<your_template>/html/com_content/category
2. rename the name of each file with a unique identifying name. For instance, my new layout is called etsy, so I have renamed the file blog_item.php to etsy_item.php
3. In the Joomla backend, navigate to the category and assign your new alternative layout. Once this is done, the category should now be successfully using the new layout.
   
   
4. Let's make some changes to the article heading. Joomla uses a series of building blocks for each part of the layout. You can find them in the layouts directory. For instance, the file generating the article heading can be found in layouts/joomla/content/blog_style_default_item_title.php - Copy this file into your own templates html directory templates/<your_template>/html/layouts
5. Open up the file generating the article layout from your html directory. Mine can be found in templates/<your_template>/html/com_content/category/etsy_item
6. Find the line that generates the heading:
   

   
   <?php echo JLayoutHelper::render('joomla.content.blog_style_default_item_title', $this->item); ?>
   
   

   Notice how the path name (after the word render) is typed using a series of dots rather than slashes to indicate each directory that the file can be found in.
7. Modify this line to call up your new layout override. In my case the line becomes the following:
   

   
   <?php echo JLayoutHelper::render('blog_style_default_item_title_etsy', $this->item); ?>
   
   

   
   Notice that I have removed the path (after the word render) so that it no longer looks for this file within Joomlas core files. Now it will go straight to my new layout stored in the templates html/layouts directory
8. Make any modifications to the new layout file as needed. Remember my one is found in templates/<your_template>/html/layouts/blog_style_default_item_title_etsy.php

The Note field of a Joomla module is intended to display some comment for admin use in the back end, but it's such a handy parameter that it would be a real shame to just waste it on the back end.

One handy use I have for the note field is to use it to display some information on the front end, essentially turning it into a custom field. I quite commonly use it to create a button, using the note field to store the URL link, although it can for virtually any purpose.

The following is an example of how it can be incorporated into the module template file:

<?php

$menuitemid = JRequest::getInt('Itemid');
$db     =& JFactory::getDBO();
$query = "SELECT note FROM #__modules WHERE id = '".$module->id."' ";
$db->setQuery($query);
$note = $db->loadResult();

echo $note;
?>