Analytics

Before i can finish my template I need to incorporate Google Analytics into the websites design. This had to be done first as i need to duplicate the template for various pages and don't want to go through each one after including the necessary code. Below are pics showing me going through the process from signing up to placing the code into my template.

Signed up to Google Analytics

Inserted the provided code into my template within Modx

Modx - Gallery 1

My clients website requires a gallery which not only is different on each page, it has to have a 'Lightbox' effect and make each individual picture appear as a Hexagon shape (to mach the theme). This can be achieved through using MaxiGallery.

http://wiki.modxcms.com/index.php/MaxiGallery



The problem with using this is that it took a while to get used to the terminology of each individual parameter provided. Due to copyright infringement, im going to have to include a template which will cover the 'Big' picture viewed in Lightbox. According to Maxigallery documentation, i could achieve this. So I created a 'Image mask' which sat on top. The problem with this is that the original picture uploaded would appear venerable as you can simply 'right button' and save the pic in the websites folder.

I used the '&disable_rightclick'(this would prevent anyone from downloading it from the browser'

I also needed to stop users from simply typing the url in to get the pic. So i used...&pic_use_imagemask=`1`

To get the pics to appear as a 'Hexagon' i used the 'ImageMask' above and assigned a png file to it.



Here is a pic showing where i have to upload the pics (form) which hasn't been styled yet (for end user purpose)




Here is a pic showing what the thumbnails would appear like on one of the pages...

Modx - Coding

At the moment im working on getting Modx to redirect pages to the first sub nagivation link. This is because when you set up a 'folder' or 'container' in Modx it uses it as a page also. This is causing me probles with having several blank pages thorughout the website. I have found a Modx addon called 'phiRedirect' which could do the job. Im going to try this and write the next part of my blog post to let you know if it works.

phiRedirect 1.1.0

Use this snippet to redirect users to the document you'd like to show.
This is often useful, for example, in the case of emulating the behavior of traditional Web sites' folders.

If no document is found, this snippet redirects users to error page.

Installation Instructions
e.g. Redirect to document(ID is 1)

[[phiRedirect? &id=`1`]]

e.g. Redirect to the parent of current document.

[[phiRedirect? &to=`parent`]]

e.g. Redirect to the first child of current folder document.

[[phiRedirect? &to=`child`]]

e.g. Redirect to the parent of document(ID is 5).

[[phiRedirect? &to=`parent` &id=`5`]]

e.g. Redirect to the first child of the folder document(ID is 6).

[[phiRedirect? &to=`child` &id=`6`]]




This works!!! I have used the ID attribute to redirect to page '12' in my documents.

Modx - Progress

Today I have managed to get the footer working with the email server. I have laid out the footer and added in the contact information in the top right hand corner.





Whats Next...

1. I've got to add in all the content for each of the 18 pages


2. create template variables for the navigation pages


3. Include google maps


4. Add in Google Analytics Retake photos for gallery

Modx - Footer

Currently i am adding Modx code into my HTML template to bring in certain aspects of Modx addons e.g. Chunks. At the moment I'm adding in the footer chunk using Wayfinder (site navigation). Below is the way i went about adding in the footer.

Step 1

First i used the Wiki guide on Wayfinder to find the appropriate markup (http://wiki.modxcms.com/index.php/Wayfinder)

[!Wayfinder? &startId=`0`!]

Step 2

Then i added certain 'Parameters' based upon what i wanted within my website

Wayfinder? &startId=`0` &includeDocs=`1,7,8,9,10,29`&outerTpl=`menuContainer` &rowTpl=`menuRows` &level=`1`]]{{Copyright}}

The '&includeDocs=' allowed me to just include the relevant site ID's which i want to bring into my footer navigation Step 3

I added this into my template which i named Palmhive (pic below)

Step 4

Once i added in the code, i used my current style sheet to style the 'ul, l, a' of the div element which is used for the look and dropdown features. Style i used here is the footer section with the main navigation buttons (not including the sub-navigation).

< span style="font-family:Arial;">

Here is the result...

Client Project - Error

At the moment I'm currently working on getting the PHP form to work within Modx. Modx has a package called 'Eform', this form is running in the background through a 'Snippet'. I have got to learn the coding to automate and email from the form i made in HTML. The downside to Modx compared to other CMS is that i have to develop my own code using the 'Parameters' from the online guide. This is tricky...

Here is my contact form viewed after creating it in Dreamweaver

I have stumbled across and error upon sending the email through Wamp (server). This server runs on a local computer and requires permissions to be setup in order to send the (Mail) function!!!

The error code: 'Main mail: Mailer was unable to send mailCould not instantiate mail function' I have no clue as to how to fix this yet, but I'm gonna have to look deeper into the 'Permissions' config file.

Client Project - Update

At the minute i an currently working on bringing my website into Modx. I am encountering errors when bringing my code into it. I have made a master template which will sit directly on each page and the content bought in (description, menu, contact form and gallery) through the Modx manager. Below is a screenshot of where i have got to so far.

Whats Next...

• Style the nav


• Style form


• Add gallery in


• Change background (make it fit to fit screen width)


• Check contact form after styling

Client Project - Testing

I'm currently merging my website into Modx (CMS) and I've incorporated the navigation. I have differences between the shape of the navigation button in IE8 and Firefox. The shape is supposed to be rounded corners (CSS3). It works in all Firefox versions and Internet Explorer 9 beta. This is not a major issue (in the design) but as my client runs IE8, I'm going to look into alternative styling so at least she can see it working. Here is the video showing my problem in IE8 (below).