Cant wait - first project with PW nearly finished ;)

[mr-fan]

Ok since some different things are up to the client now - but the main work was done i'd like to show my first work with PW and give some feedback and kind words about the workflow.

First i've to say thank you - ryan for this awesome diamant of code and all members here that treat every other with respect and patience!

Domain is not open until some bureaucratic things are ready.

http://gs-altfraunhofen.de/

This was no big project but not really easy, since there was no real basic stuff to start with, and the existing things (like a strange version of the logo you could see now) are done by some teachers and changing them was a little hot political thing....hot pavement!

For such a little project with less budget i give the easy http://purecss.io/ a try and work with that. Tried to give the website some individual notes, but stay with many given elements by the small CSS Framework (buttons, forms) to save time/budget for the client.

Here some screenshots of the page and changing on responsive:

Desktop

Mobile

Backend

Some special modules that i used:

• FieldtypeEvents (with some changes)
• FormTemplateProcessor (with adding some spamdetection, hidden honeypot and a "leave blanc" field)
• MarkupSimpleNavigation
• PageListImageLabel
• ProcessAdminCustomPages
• VersionControl

Some special adjustments and using of some modules:

FormTemplateProcessor

Get a Form from given fields in a backend template and save them as pages and/or send them to a mailadress....easy task with the FormTemplateProcessor. For some spamdetection a added a hidden field as a honeypot and a questfield to leave blanc to check against bots.

//Changes for better Spamprotection with a hidden additional field as a honeypot
		// create a text input a hide it via CSS .Inputfield_name2 display:none - see CSS example on the end of this module
		$field = $this->modules->get("InputfieldText");
		$field->label = "Name2";
		$field->attr('id+name','name2');
		$field->required = 0;
		$form->add($field); // append the field to the form
//end changes	

/**and at the end**/

//Create a field quest in the form template with heading like "please show us youre human an leave this blanc"
//Set the Spamfilter and check if field quest or spam are blank!
		$questfield = $this->input->post->quest;
		$spamfield = $this->input->post->name2;

		if(empty($spamfield) && empty($questfield)) {
			echo "<h3>Ihre Email wurde gesendet!</h3>";

		// see if any errors occurred
		if(count($form->getErrors())) {
			// re-render the form, it will include the error messages
			$out .= $form->render();

		} else {
			// successful form submission, so populate the new page with the new values.
			foreach($form as $field) {
				$this->contact->set($field->name, $field->value);
			}

			if($this->email) $this->sendEmail($form);
			//if($this->parent) $this->savePage($form);

			$out .= $this->successMessage;

		}

		return $out;
		} else {
			echo "<h3>Es ist ein Fehler aufgetreten - Sie haben das letzte Feld ausgefüllt bitte versuchen Sie es erneut!</h3>";
		}
//end changes

Frontend

Backend

ProcessAdminCustomPages

This is a real great module for custom made admin pages. You simple add a page to the admin setup the process and add a templatefile in your site folder! Admin stuff made easy even for non devs!

example code from the imageoverview (CutomAdminPage Template):

<?php
// Bilderübersicht Custom Admin Page
?>
<style type="text/css" media="screen">
	/**
	 * larget magnific popup
	 */
	.mfp-iframe-holder .mfp-content {
		max-width: 1200px!important;
	}
</style>
<script type="text/javascript">
$(document).ajaxComplete(function() {

		//add trigger class and modal setup
		$('.PageListActionEdit a').each(function(){
		    $(this).addClass("lb-edit").attr("href",$(this).attr('href')+"&modal=1");
		});

		$('.PageListActionNew a').each(function(){
			$(this).addClass("lb-edit").attr("href",$(this).attr('href')+"&modal=1");
		});

		//setup lightbox
		$('.lb-edit').magnificPopup({
			type: 'iframe',
			disableOn: 0
		});
});

</script>

<?php

//get Magnific css and js
$this->modules->get('JqueryMagnific');

//render PageListtree with setting the parent page
$formImages = $this->modules->get('InputfieldForm'); // prep the form
$wrapperImages = new InputfieldWrapper; // a wrapper
$wrapperImages->attr('value', '<h2>Bilder</h2>');
$i = $this->modules->get('ProcessPageList'); // get the pagelist process
$i->set('id', 1015); // setting the parent page
$pageTreeImages = new InputfieldMarkup; // the placeholder
$pageTreeImages->value = $i->execute(); // fill the InputfieldMarkup form field...
$wrapperImages->add($pageTreeImages); // put inside the wrapper...
$formImages->append($wrapperImages); // append the wrapper

echo $formImages->render();

And as result i've a adminpage just with the imagetree.

For this kind of websites where i've very less images and use it on different pages - i'd like to have a mediacenter - and this is the way i get it work.

Using the image approach from somas imagemanger module: https://processwire.com/talk/topic/3219-images-manager-beta/

But only the setup for the templates (single image fields and cats) - and have an easy administration like the whole site in a PW style.

One bad thing with a own usage of the ProcessPageList - while editing after save you will be redirected to the "real pagetree" not the custom one! So no problem, it would be much better to use a kinda a modal editing on this special content - no problem all there just to find and use.

(Combined it with the PageListImageLabel to show some thumbs in the pagetree)

For the images first i thought i change the Tree where in the Wysiwyg the image is choosen to insert - this works so far mor details here:

https://processwire.com/talk/topic/7439-processpageeditimageselect-hook-and-change-default-page/

But then i decided to don't let the users handle images in the wysiwyg and added a fieldset TAB for images and populate them if the users choose some on the right place on every page.

So i've with a Pageselect field (parent page is the image-root) a simple "click on the images to show gallery" possible on every page:

Here some screens on the backend of the custom admin page for the images with the template from above:

Did the same for the documents section where i again use soma setup for files as pages:

https://processwire.com/talk/topic/4602-flexible-downloads-using-pages/

This is a real great tutorial - you can expand all you need for such documents for eg. a counter is simple as easy PHP:

1. Setup a single file field, a counter integer field and a template for the kind of files you are using f.e. doc.php, docx.php, pdf.php and now use such a template file

<?php

/**
 * doc.php
 */

if($page->doc){

	$page->of(false);
	$page->counter += 1;
	$page->save(array("quiet" => true));
	$page->of(true);
	wireSendFile($page->doc->filename, $options);

}

Benefits from files as pages are real SEO Links on documents and images like:

http://gs-altfraunhofen.de/dokumente/morgenbetreuung.doc/

some tweaks on the contact-page and some others in the admin.php to get them always in the state i want them i've some code like this:

/**
 * setup choosen templates to hidden - equal witch setting the user takes
 */
$pages->addHook('saveReady', null, 'makePageHidden');
function makePageHidden(HookEvent $event) {
  $page = $event->arguments(0);
  if($page->template != 'doc' && $page->template != 'docx' && $page->template != 'pdf' && $page->template != 'image-category' && $page->template != 'image' && $page->template != 'contact_form') return; // replace 'category-site' with your template name
  if(!$page->is(Page::statusHidden)) $page->addStatus(Page::statusHidden);
}

For me like wrote i'm not a developer, not a real good coder, but i like the way that PW (and this awesome community) teach me in the right direction and let me be free in the way to solve my challenges!

So closing the circle and say again thank you to all that read this and contribute to PW and this forum!

Have fun - best regards mr-fan

[mr-fan]

until now it has it's place on the web....

http://gs-altfraunhofen.de/

Thanks for all help here and for Processwire again.

"I'm lovin it" - and normaly i don't love software!!

[Peter Knight]

Nice. Thanks for sharing.

On the screengrab of the tree, you have custom icons for each page. 

Is that achieve dwith a Module or some page setting I've yet to try.

[mr-fan]

It's great module i think....

http://modules.processwire.com/modules/template-decorator/

it's nice to get labels colors and icons...