Jump to content
mr-fan

Cant wait - first project with PW nearly finished ;)

Recommended Posts

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

post-2327-0-92953300-1412589632_thumb.pn

Mobile

post-2327-0-87228100-1412589801_thumb.pn

Backend

post-2327-0-04585400-1412594950_thumb.pn

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

post-2327-0-34674300-1412590209_thumb.pn

Backend

post-2327-0-77760100-1412590222_thumb.pn

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!

post-2327-0-76824900-1412593808_thumb.pn

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:

post-2327-0-95802600-1412595238_thumb.pn

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

post-2327-0-82856800-1412594244_thumb.pn

post-2327-0-14482200-1412594269_thumb.pn

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

  • Like 15

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By angelo, italy
      Hi guys,
      I've always used WP but I want to swtich to PW. I'm not sure ....
      I'd like to know if it's possible to create a website for an online photo contest.
      The participants of the competition could create their own account, in which they upload their photos. The photos uploaded remain visible only to themselves and the judges.
      From their account they can make the "entrance fee" payment.
      The judges of the competition can create their own account... entering they see the photos of the participants and vote photos
      At the main page I imagine the title of the competition, a button to read the regulation, and a button to register.
      The website should be in Italian and English.
      Thank you!!
       
       
    • By schwarzdesign
      We recently finished a relaunch of  the website of the consulting firm Engfer Consulting: engfer-consulting.de. Built with ProcessWire 3 and Bootstrap 4.
      Features
      Bilingual website (UPDATE: The English page is now available! the English page is inactive at the moment, as the content is not ready yet) A strong, simple data structure for job offers and news, allowing for a custom search page and fulltext search Sectioned content-blocks built with a Repeater Matrix (ProFields) Reusable components available as page reference fields Automatic generation of open graph-tags, with manual overrides available on each page Contact forms with a custom recipient depending on the current page Modules used:
      ProFields ProForms Sitemap Cookie Management Banner Duplicator Tracy Debugger Wire Mail SMTP Admin Links in FrontEnd Technical insights
      Most of the content is built using a Repeater Matrix field. Each section has an optional heading and a select-field for background colors. Some of the sections available include:
      Text blocks (a repeater-field for multi-column text) Feeds / listing of the latest job offers or news (with a field to control the number of entries shown) Displaying a team member or quote (selected through a page reference field) Downloadable files (a multivalue field for file uploads) Those sections can be combined and stringed together arbitrarily, so any number of page templates showing different contents can be built. The job offers template, in contrast, features fixed fields for taxonomy assignment, description, contact person, preview image and so on, making the job offer pages uniform and easily accesible.
      The (technically) most interesting part of the site is the job overview page, which contains custom filters that are automatically generated from the available taxonomy terms.
      The stylesheets are written in SASS, built with Bootstrap 4. Only the base and grid SASS files of Bootstrap are included, along with the Bootstrap components that we ended up using. Using Bootstrap 4 as a framework in this way makes development & styling blazingly fast, once all the utility classes are commited to muscle memory ...
      > Our Agency.
      Screenshots









    • By benbyf
      Not new, but a website I've worked on for a year or so in continous development.
      http://supercarownerscircle.com/
      I originally inherited the site from another web design company - upgraded PW and over the year added ecommerce using the Stripe module and a custom integration, revamped the frontend and added lots of new templates.
      Also did some frontend work on the shopify shop.

       
       
    • By henri
      Hi Guys, 
      I am new to processwire. I have to move a proceswire web to another server. How do i do that??? copying all the files doesnt seem to do the trick. I am presented with a very very old version of the website. What do I do wrong??
    • By Sabrina
      Hi,  
      I would like to start tracking my website visitors with Leady software. Searched the forum for similar discussion yet did not find the right answer. Could you please tell me how can I add their javascript to my website? Is there any step by step guide available?
      Any help appreciated. 
×
×
  • Create New...