photoman355

Aha! Should have thought of that. It's working now, many thanks Soma. I'm guessing it's not good practice to put php files in the root especially for exporting sites? Is there a better way to handle ajax loading for the above setup in PW? I have another quick question about referencing PW urls via jquery. At the moment I have to reference the full URL including http etc. Is there a way to point to the root of my PW installation by using variables? Something that effectively does this: var root = '<?=$config->urls->root?>'; So that any subsequent url in jquery can be eg 'site/templates/assets/img/myimage.jpg'. I mainly want to do this to remove the need to rewrite the JS every time I install a site profile.

I have a little more info after playing around with the setup. I am referencing the mail script like this: <form action='<?=$config->urls->templates?>sendEmail.php' method='post'> This is definitely the correct URL to the script, I can see it in firebug however I'm getting a 404 redirect when submitting the form. I tried disabling javascript (The form also works without it) but I still get a 404. This would suggest to me that it's possible something in PW is stopping the script from running. Any ideas?

Thanks guys. I have both forms working now but I'm still struggling to get the form to submit and post results without a page refresh. As this is for a one page website a page refresh looks pretty bad. On my original form I have ajax doing that for me. Here's a rough idea of the page structure. Home -- (header.inc & footer.inc) Page 1 -- (Pulled into home) Contact -- (Pulled into Page) Page 2 (etc) The only way I can get the forms to work at the moment is by putting the php inside a page template and assigning that to "Contact". This is the way Andrew's form works but my original form called the php file separately for processing only. Is the former the correct way to implement forms in PW? Is there something special I have to do to get the ajax working or is there an alternative non ajax way of rendering results without a page refresh?

Thanks very much diogo, it's working perfectly now. Really helpful to have the notes. I'm slowly getting to grips with php.

I've been putting together a simple lightbox gallery using prettyPhoto. I have this working but I only want one thumbnail to launch the gallery and at the moment I'm getting one thumbnail for each image. Apologies for my poor php skills, I know this is coming from the echo but don't know how to display <img> only for the first list item. Here's my code: <ul id="gallery1"> <?php foreach($page->images as $img) { $thumb = $page->thumbnail->size(220, 200); echo "<li><a href='{$img->url}' rel='prettyPhoto[gallery1]'><img src='{$thumb->url}' alt='{$thumb->description}' width='{$thumb->width}' height='{$thumb->height}' /></a></li>"; }?> </ul> And my original code: <ul id="gallery1"> <li><a href="assets/library/image01.jpg" rel="prettyPhoto[gallery1]"><img src="assets/library/thumb1.jpg"/></a></li> <li><a href="assets/library/image02.jpg" rel="prettyPhoto[gallery1]"></a></li> <li><a href="assets/library/image03.jpg" rel="prettyPhoto[gallery1]"></a></li> </ul> Any help would be greatly appreciated.

You're right it had nothing to do with the php, it turned out to be a JS problem. Thanks for your help Ryan.

Thanks Luis, sounds pretty straightforward. The CKEditor module is in beta at the moment but inline mode has been enabled to work on the backend. With this in mind it should be fairly easy to bring it over to the frontend. I agree the further editing should be in the backend until someone figures out how to do this in a user friendly way. There is the Admin Bar module but it seems to be more geared towards a site built with pages. It doesn't work as well for one page websites or sites built with widgets.

Nice. In context editing is actually a built in feature of CKEditor, see demo here. I was going to build something similar using the API to add a save call to the front end. I'd be interested to look at your code once the module is live. Did you have any difficulty putting this together?

Wanze this didn't work first time round, I was getting errors with "$output .=". I changed the code over as below and now it's working perfectly! Thanks very much for all your help. One small problem I'm still getting is there is a small delay bringing in "$testimonial->person_name" when the slide loads. I'm not sure if this is because php loads the items in the order they were echoed but I'm surprised the delay is visible. It makes the load look jerky. Any advice on this? <div class="carousel slide <?=$page->position?>"> <h4><?=$page->heading?></h4> <!-- Carousel items --> <div class="carousel-inner"> <?php $class = 'item'; foreach($page->testimonials as $k => $testimonial) { $active = ($k == 0) ? " active" : ""; echo "<div class='{$class}{$active}'> <img class='quotes' src='{$config->urls->templates}assets/img/quotes.png'> <p>{$testimonial->body}</p> <h6>{$testimonial->person_name}</h6> </div>"; }?> </div> </div>

I've been trying to make a carousel with a repeater field that has an "active" class on the first div. I found a similar thread here but still can't get it to work. Most likely me having a dumb moment Here's my code: <div class="carousel slide <?=$page->position?>"> <h4><?=$page->heading?></h4> <!-- Carousel items --> <div class="carousel-inner"> <?php $output = ''; $class = 'item'; foreach($page->testimonials as $testimonial) { $status = ''; if ($testimonial === $page->testimonials->first()) $status .= ' active'; $class .= $status; $output .= "<div class='{$class}'> <img class='quotes' src='{$config->urls->templates}assets/img/quotes.png'> <p>{$testimonial->body}</p> <h6>{$testimonial->person_name}</h6> </div>"; } echo $output; ?> </div> </div> Any ideas where I'm going wrong?

Will do Ryan. One thing that I would like to do is bring CKEditor's inline edit mode to the front end much in the same way as it's demonstrated on their website here. I'd need to add a save button that hooks up to the database but other than that it would just be mimicking what's on the admin site. Is this possible?

I am in the process of converting over a one page website to work with PW and am at the stage of hooking up the contact form but it's not working. I'm using the phpMailer script with a bit of jquery to process the form validation. I'm not set on converting over my current form to work with PW as the phpMailer script is a bit out of date now. All I need is something that works, outputs validation without a page refresh and ideally has some anti-spam measures built in. I know Ryan built the Form Template Processor so wasn't sure if this is a better route to go down? Here's the jquery for my current form. $(function() { // These first three lines of code compensate for Javascript being turned on and off. // It simply changes the submit input field from a type of "submit" to a type of "button". var paraTag = $('input#submit').parent('p'); $(paraTag).children('input').remove(); $(paraTag).append('<input type="button" name="submit" id="submit" class="btn pull-right" value="Send" />'); $('#main input#submit').click(function() { $('#main').append('<img src="assets/img/mail-ajax-loader2.gif" class="loaderIcon" alt="Loading..." />'); var name = $('input#form_name').val(); var email = $('input#form_email').val(); var subject = $('input#form_subject').val(); var comments = $('textarea#form_message').val(); $.ajax({ type: 'post', url: 'sendEmail.php', data: 'name=' + name + '&email=' + email + '&subject=' + subject + '&comments=' + comments, success: function(results) { $('#main img.loaderIcon').fadeOut(1000); $('ul#response').html(results); } }); // end ajax }); }); Any advice is greatly appreciated.

As always the solution is nice and simple. Many thanks Ryan.

Great template Nikola, just what I was after. I've found a small error in the css which was flagged up earlier by MadyMyDay. The column width feature of PW wasn't working which left me scratching my head. I've traced it back to the following missing styles in your ui.css file. .InputfieldForm .Inputfields > .InputfieldColumnWidth { clear: none; float: left; margin-left: 1%; margin-top: 0; } .InputfieldForm .Inputfields .InputfieldColumnWidthFirst, .InputfieldForm .Inputfields .InputfieldColumnWidth + .InputfieldSubmit { clear: both; margin-left: 0; } I added them in and everything works as expected now.

Thanks Joss. I didn't see your post till now but did manage to set this up as a repeater field. Code below. List 2 is just the same but with slightly different field references. <ul class="list1 span6"> <li class="list_title"><span class="bold"><?=$page->title_left?></span><span class="pull-right"><?=$page->title_right?> </span></li> <?php foreach($page->list as $list) { echo "<li><span class='bold'></span>{$list->item_left}<span class='pull-right'>{$list->item_right}</span></li>"; }?> </ul> It's not too bad from a user point of view, the only thing I would like to do is limit the number of repeated items a user can create. Any idea how to do this?

I know, it looks like code overkill. It's for a responsive design where I need the lists to stack as the screen size shrinks. This is not something I'd expect the client to update very often but I use similar code for price lists so need to come up with a solution. It may be that the easiest way around it is to split each column into it's own list and use each lists parent class to target the styling rather than wrapping the classes in a span. The 2 sides of each list could then be wrapped in a div creating a similar structure. Doing it this way would use less fields. Other than that I'd have to go down the repeater field option which may not be the most logical from the client editing side. I'll have to experiment. Is there a standard method for handling multi field lists like this?

I'm trying to figure out the best way of turning the below code into something easy for the user to edit without screwing up the source. Would this be best accomplished with php or customising the text editors? <ul class="list1 span6"> <li class="list_title"><span class="bold">Summer</span><span class="pull-right"></span></li> <li><span class="bold">Monday</span><span class="pull-right">10am - 3.45pm</span></li> <li><span class="bold">Tuesday</span><span class="pull-right">10am - 3.45pm</span></li> <li><span class="bold">Wednesday</span><span class="pull-right">10am - 3.45pm</span></li> <li><span class="bold">Thursday</span><span class="pull-right">10am - 3.45pm</span></li> <li><span class="bold">Friday</span><span class="pull-right">10am - 3.45pm</span></li> <li><span class="bold">Saturday</span><span class="pull-right">10am - 3.45pm</span></li> <li><span class="bold">Sunday</span><span class="pull-right">10am - 3.45pm</span></li> </ul> <ul class="list2 span6"> <li class="list_title"><span class="bold">Winter</span><span class="pull-right"></span></li> <li><span class="bold">Monday</span><span class="pull-right">8:30pm - 10pm</span></li> <li><span class="bold">Tuesday</span><span class="pull-right">8:30pm - 10pm</span></li> <li><span class="bold">Wednesday</span><span class="pull-right">8:30pm - 10pm</span></li> <li><span class="bold">Thursday</span><span class="pull-right">8:30pm - 10pm</span></li> <li><span class="bold">Friday</span><span class="pull-right">8:30pm - 10pm</span></li> <li><span class="bold">Saturday</span><span class="pull-right">8:30pm - 12am</span></li> <li><span class="bold">Sunday</span><span class="pull-right">8:30pm - 12am</span></li> </ul>

Update: This may have something to do with browser formatting but it still could be CKeditor.

Thanks Andrew. I've been through your post and have it working up to a point. It's not exactly what one would call an easy process especially because the formatting options are all hidden in the documentation. What I'm having trouble with now is the editor won't print my html. <i>Some Text</i> is getting rendered as <em>Some Text</em> for no apparent reason. I've even excluded <em> tags in my setup. Here's my config file settings: // Load My Custom Styles config.stylesSet = 'default'; // Remove formatting config.forcePasteAsPlainText = 'true'; config.removeFormatTags = 'b,big,code,del,dfn,em,font,ins,kbd'; And my Processwire settings Bold, Italic, -, RemoveFormat NumberedList, BulletedList, -, Blockquote PWLink, Unlink, Anchor PWImage, Table, HorizontalRule, SpecialChar PasteText, PasteFromWord Scayt, -, Sourcedialog, Styles Any ideas?

Once again I have to take my hat off. Many thanks guys.

As always the simplest answers save the day. It's working perfectly now. Thank you so much guys! One last question. My original link setup used a class to highlight whatever link was active on the page like so. <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link 2 etc</a></li> </ul> How would I add this to the new code?

I'm a little stuck with customising CKEditor. I want to build something similar to the following code using the custom styles function of the editor. <ul> <li><i class="icon-medium icon-link"></i><a href="#">Link 1</a></li> <li><i class="icon-medium icon-link"></i><a href="#">Link 1</a></li> </ul> I found this link in the CKEditor documentation which explains what's needed from the plugin side but I'm not quite sure how to implement this in Processwire. Any ideas?

Thanks diogo. I changed the code over to $page->name and I'm still getting the same error. What seems to be happening is the "$" call for jquery is messing with the php as it's inside the script. echo "<li><a href='#{$child->name}' onClick="$.scrollTo( '#{$child->name}', 800 );">{$child->title}</a></li>"; My guess on how to solve this would be to take out the jquery from the link and call scrollTo on $child->name from my footer scripts. I have no idea whether taking to php via jquery is possible or not. Any ideas? If it is possible do you know how would I go about implementing something like that? On the site setup I'm glad you think I'm on the right track. From an admin point of view there are no issues at all, I'm just thinking how to make editing as easy and logical as possible for clients. I'll investigate the repeater fields. It would be handy if there was a way to create admin templates to pull in the admin fields of multiple templates in much the same way as can be done on the front end.

It took me a while but I now have a working example of something that resembles the setup above. I didn't quite get the concept initially that in processwire a page doesn't actually have to be a page, it can just be a data container for my code. Once I got that I managed to put the site together, see code below. Hopefully this will give others a few pointers too. I'm not convinced it's necessarily the best interpretation so it would be great to get advice on this. My homepage code is like this: <?php include("./header.inc"); /** * Homepage template * */ $items = $page->children; foreach($items as $item) echo $item->render(); include("./footer.inc"); ?> As this is a one page website and pages aren't actually physical pages, this allows me to pull in data from child pages of my homepage. My page template looks like this: <div class="page"> <div class="header" id="<?=$page->title?>"> <a name="<?=$page->title?>"></a> <!-- Any content I want in here --> <?php foreach($page->children as $child) echo $child->render(); ?> </div> </div> I wanted to create dynamic navigation. In one page websites the navigation is setup with ID's so the <?=$page->title?> reference allows me to set up whatever page title I want in the backend and have it pulled in as the target for my navigation. Setting up the navigation was fairly straightforward. I based it on Ryan's tutorial here , the code is very similar, I just added href="# and removed the url reference. <ul class="nav"> <?php $root = $pages->get("/"); $children = $root->children(); foreach($children as $child) { echo "<li><a href='#{$child->title}'>{$child->title}</a></li>"; } ?> </ul> I did run into a small problem as I'm using jquery's scrollTo plugin on the links. My original code looks like this and the jquery breaks most likely due to conflict with the php. I originally had this in my footer scripts and changed it over, can't quite remember why off the top of my head but there was a good reason from memory. I also need to get the "active" class working. Any idea how to rewrite/handle this? <ul class="nav"> <li class="active"><a href="#page1" onClick="$.scrollTo( '#page1', 800 );">Home</a></li> <li><a href="#page2" onClick="$.scrollTo( '#page2', 800 );">Page 2</a></li> <li><a href="#page3" onClick="$.scrollTo( '#page3', 800 );">Page 3</a></li> </ul> Moving back to my page template I have the line <?php foreach($page->children as $child) echo $child->render(); ?> This allows me to pull my module code blocks into any page just by assigning a module template to the child page. The structure is the same as my first post but here's where it gets slightly complicated. My modules most of the time span the full width of the page however I also have a few cases where a module just becomes a simple div container and smaller sized code blocks/widgets are positioned within the module itself. It looks something like this: Header Page1 Module1 Submodule 1 (1/3rd width of container) Submodule 2 (2/3rd width of container) Module2 Page2 Footer The above is just an example but I could have 3 submodules within a module block. As they can be in any combination and position it wouldn't make sense to write all the possible combinations in a module block. At the minute to solve this I have a module container with the same php line that's in my page template to pull any submodule content into the module block. While this works I'm not convinced this is the best solution because from the users point of view they have to navigate through the page hierarchy to edit specific blocks rather than all the blocks relative to a page being on that page in the backend. I know I could call in the module templates to my page template with php but that's not very friendly from an admin point of view because it requires editing the main page template each time the module structure needs changed. What's really needed is a way of hiding the module/submodule child pages from the user and pulling all the blocks into their parent page for editing in the backend. Any advice would be greatly appreciated.

Many thanks for getting back to me so quickly Joss. Juging by your reply it looks like I'll be able to create what I'm after which is fantastic. I definitely want to alter block positions and make the setup more versatile so will give you a shout once I've read through the tutorial you sent over.