Integrating a Template into MODX part 1
In this tutorial we will cover how to get the Soho template homepage into MODX. You can use this process with pretty much any template or custom design in order to create a website in MODX. This tutorial starts on the premises that you already have a working version of MODX installed and have access to the manager portion of it. Before we begin here are some things you should read so you can understand some of the MODX terminology.
Here is a list of the things we will cover in this first part of the tutorial.
- Identify Areas of our Homepage Template
- Identify MODX Extras we will need to use
- Homepage Breakdown
- Project Setup
- Edit Html, CSS and JS files to use correct paths
Identifying Areas of our Homepage Template
First download the Soho template from Codeplay Studios, this is the template we will be using for the tutorial. Our goal is to get the index.htm template into MODX in order to edit every area of it in MODX.
Once you finish downloading the template and extract its contents you will end up with these files
The first thing we need to do is get rid of some unnecessary files we will not use in this tutorial, these are about2.htm, index2.htm and index3.htm
Now that we have deleted the unneeded files lets proceed to see what our index.htm template looks like.
As you can see our index.htm template has a†header, a footer and area dedicated for content.
The content area of the Homepage has a slider, a four column div followed by a one column div and finally a two column div.†
Identify MODX Extras we will need to use
A MODX Extra is an Add-On that extends the functionality of the CMS, there are many Extras for MODX ranging from Gallery creation, Dynamic navigation generators to Form Creation Extras. You can see the full list of available MODX Extras here.
We need to analyze the sections of our Homepage in order to know what areas of it can be converted to use a MODX Extra.
Letís start with the template header, we will create a chunk that will contain the site logo and wayfinder extra for the navigation.
For the slider we will use gallery.
For the four column divs (Introducing Soho, Features, Browser Love and Other Files) we will use template variables, one for each column.
For the one column div†(Testimonials) we will use another template variable.
For the two column divs†(Sub Heading 2 and Sub Heading 3) we will use yet another two template variables, one for each column.†
For the footer area we will create a chunk with 3 template variables, a wayfinder call and a simple formit email subscription form.
After our Homepage Breakdown we now know we need 3 extras for this page.
Now we will cover how to setup our project for easy integration with MODX, we will create a folder structure that mirrors where our files will reside in MODX this will make the transition from static template to a MODX template very seamless.
To accomplish this we will need to do a few things:
- Create a assets folder
- Create a template folder inside our assets folder
- Create a CSS folder for our style sheets inside our template folder
- Create an image folder to store our images inside our template folder
If you go to your template folder you will see all files are in the root of our directory.
Letís change that by organizing our files a bit, create an assets folder.
So now our Root folder is nicely organized but our assets folder is a mess, letís create a CSS folder to store our style sheets and move all our CSS files into this folder.
Edit Html, CSS and JS files to use correct paths
In our last section we organized all our files into folders and this caused our HTML to break the paths to the images in all the files, now we have to fix them so it uses the new folder structure we created.
Letís fix our CSS paths, open your HTML/Text editor and letís look at our head tag to see what needs to be changed. In the head of the index page you can see we have some scripts and css links we need to update their paths.
Notice that none of the images are displaying letís fix that by updating the image paths in our template. Letís go back to our editor and look at our image tags, if you look closely you can see all our images share something in common, they all have a starting image/ path this is great because now we can use find and replace on all our template files and update them all at once if your editor supports mass find and replace of opened files or directories.
So open the replace or find and replace in your editor and in the find text field enter images/ and in the replace text field enter assets/images/ †and click on replace all (button may vary in your text editor).
Letís go back to our browser and refresh the page, now the Homepage look exactly like it used to and its assets are organized like the MODX setup we will use.
Upon inspecting the page I noticed the email subscribe button in the footer is not displaying correctly, that means our css files have incorrect paths letís fix them.
Open the style.css file in your text editor and letís see how our image paths are setup, we can see all images have a preceding images/ directory.
Again we will use the images/†to do a mass find and replace in all our css files (because your text editor supports this right?) we will be replacing images/ with ../images/ once we do this all our css files will have the correct paths for the images used in the templates.
After using Chrome Dev Tools I noticed the Index page has an incorrect path for an image.
Now Chrome Dev tools says everything is fine.
Okay we have finally finished with our local files in the second part of our tutorial we will start working inside of MODX uploading all our files and installing the extras we need to get our site done.