Jump to content

Cant wait - first project with PW nearly finished ;)


mr-fan
 Share

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
Link to comment
Share on other sites

  • 2 weeks later...

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
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By Markus Thomas
      One of my first projects with ProcessWire.
      Online for a while, but still up to date and currently new features are being developed again.
      The most interesting feature of the site is the integration of the external tool and the PDF creation of the registration form with integrated API connection to always be able to directly output the most current dates.
       
      External Service:
      SEMCO ( https://www.semcosoft.com/de/ )
      Used Modules:
      HannahCode Pages2PDF AIOM+ MarkupSitemap XML and some others In Development:
      Shop with Padloper Site: https://www.school-dynamic.de/
      At this point I like to say Processwire makes it so easy for me to solve even more complicated tasks and get impressive results. Because I must confess, my PHP skills are unfortunately not yet where I would like to be.  

    • By Markus Thomas
      My wife loves to cook, and I always like to further my knowledge around Processwire. So I thought I'll build a small page with the some small function to learn something.
      Used modules:
      ProMailer RepeaterMatrix Pages2PDF AIOM and some other litte modules Current functions:
      JSON-LD for recipes and page search Automatic ingredient calculation when changing the number of servings Creation of a PDF of the recipe Basic PWA (here is something to do, actually) Planned functions:
      a lot 😉  
      Site: https://www.dothiscookingthing.de

    • By benbyf
      https://www.tandc.games/
      New website for my games design company. We're currently working on Grace Hopper: Bug Rescue about computer science history, check it out and let me know if you have any suggestions for historic characters or topics/hardware.
      Built with PW, and is heavy built upon my other website https://www.ethicalby.design/ basically taking it as a base and building on it.

    • 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









×
×
  • Create New...