Basic Website Tutorial - ProcessWire
5/04/13 Lo g in
Go
Page Read Discussion View source View history
Search
Basic Website Tutorial T his Article requires peer review
Navig atio n Main page Recent changes Rando m page Article help
T his article is complete, but may benef it f rom checking f or accuracy and grammar, testing any code or adding f urther inf ormation that will make it clearer.
Pro ce sswire Ho mepage
Contents [hide]
Do wnlo ads Fo rums
1 Int roduct ion 2 What you will Learn
T o o lbo x What links here Related changes Special pages Printable versio n Permanent link
3 Some Post Inst allat ion Jobs 3.1 Admin Location 3.2 Clearing out unwanted content 3.2.1 Clean out the Home Page 3.3 Adding some useful modules 3.3.1 Modules to add 3.4 Updating JQuery 4 Templat e Files 4.1 The Famous ProcessWire Templating System 4.2 Header and Footer 4.2.1 Here is the head code: 4.2.2 Here is the footer 4.2.3 Here is the CSS 4.2.4 Testing the layout with the Home page 5 Creat ing a Sit e Set t ings Syst em 5.1 Creating the Site Settings Fields 5.1.1 Site Title 5.1.2 Meta Keywords and Description 5.1.3 Footer Text 5.1.4 Header Banner 5.2 Creating the Site Settings Template 5.3 Creating the Site Settings Page 5.4 Using the Site Settings
T his tutorial will take you through the process of creating a basic website using ProcessWire. It will explain how the template f iles work, how they relate to templates in the administration, teach you how to create basic site settings like Site T itle and Meta Description, talk about using images, creating pages and putting it all together. Following this tutorial, you will also be given f urther tutorials on specif ic common elements such as creating a news page, adding a JQuery Slideshow, creating a contact f orm and creating reusable site blocks.
6 Adding some Cont ent 6.1 Creating the Article Fields 6.2 Creating the Article Template File 6.2.1 Adding the Fields 6.3 Creating a Template
Introduction
6.4 Creating an Article 7 Conclusion 8 See Also
ProcessWire does not come packaged, by def ault, with a complete Blog system, tons of singing and dancing JQuery addons, a set-in-stone skinning system and a big button that says "press go to create your instant site!" Quite simply, it does not need them. ProcessWire has been designed so that a designer with some very basic coding skills (and is great at copying and pasting) can put together a website that is tailored PRECISELY to their needs and the needs of their client; nothing more, nothing less, but just right. Having said that, ProcessWire also comes with the ability to export a site as a prof ile and re-use it in another installation, and a growing number of prof iles will appear on the site and elsewhere overtime. But the central core ideal will remain how you want your site to operate and
As I am constantly reminded, there are some very good reasons why
More Inf ormation For an even quicker introduction to ProcessWire, try the Small Project Walkthrough. T hat will give you a very quick taste of how PW works. It is also a good idea to keep an eye on the f orums which are a great source of inf ormation, peppered with some alarming bouts of silliness. If it is sometimes said that you should judge a product by the type of person that uses it, then ProcessWire comes of f pretty well. Please also check the API which has some solid inf ormation plus a very usef ul cheatsheet. T he f ans of PW are considering having it made into a hand knitted table cloth.
what you have in it is up to you.
I should point out that ProcessWire is f ar more than just a good solid Framework. CMS tools are there, right up f ront and ready to use; ProcessWire http://wiki.processwire.com/index.php/Basic_Website_Tutorial
1 / 35
Basic Website Tutorial - ProcessWire
5/04/13
is both a CMF and a CMS - you get both worlds.
What you will Learn Being so versatile, getting started with ProcessWire might seem a bit of a puzzle. T he Planet T utorial, which you may have already done, addresses the basics of adding content to a "page" and displaying it on a site. T his tutorial will take you back to the beginning and show you: How to prepare ProcessWire f or development How to put together a basic HT ML site structure. How to create your T emplate Files, How to create a site settings page f or your website How to create the f orm with a T emplate, How to create f ields and customise them f or your needs How to utilise Fields and Pages and how to put it all together. Finally, you will learn how to create a T emplate with associated T emplate File and create a page on the website. If working with this kind of system is new to you, then this should give you a solid grounding. If you are more experienced, I apologise in advance f or any egg-sucking advice!
Some Post Installation Jobs I am going to assume that you have already installed the most recent copy of ProcessWire on a local server or somewhere else; if not, run of f and do that now. Download a copy, unzip it into a directory on your server, create a database and f ollow the installation instructions . T his installation already comes with a couple of pages built in and is ready to go in a very basic sort of way, but we are going to ignore all that and do some housekeeping instead!
Admin Location By def ault, the ProcessWire admin is at yoursite.com/processwire. We can change that! Login to your new site. T he def ault page is the Pages list. Click on the Admin page and the Edit link that will appear next to it. When the page opens, go to the Settings tab.
Change the name f ield f rom processwire to something of your choice siteadmin, perhaps. Although hardly a great security technique, it is good practice. However DO REMEMBER WHAT YOU CHANGED IT T OO! Unlike other installations you cannot look at your f ile structure to check the name of the admin f older. Note: When you save the page, it will throw a 404 error. T hat is because it has now lost its place. Go to yoursite.com/siteadmin (or whatever you changed the name to) and everything will be f ine.
Clearing out unwanted content For this tutorial, and f or any site you design, we don't want all the bits and pieces of pages that come with the def ault installation, so lets get rid of some of it. In the Pages section of the admin, click on About and then Child Page Example 1. Click edit. On the edit page, click on Delete
http://wiki.processwire.com/index.php/Basic_Website_Tutorial
2 / 35
Basic Website Tutorial - ProcessWire
5/04/13
Select "Move to T rash" and then click on the Move to T rash button. Now, repeat this with the other Child page example, the about page and the T emplates page. Leave the rest alone! NOT E: You could simply delete the About page and that would also delete the children - BE CAREFUL if you don't want that to happen!
Clean out the Home Pag e For the Home page, we can start by deleting some of the content - though we want to keep the home page itself . Click on the home page and click edit. Keep the T itle, Headline and Body text (we will use these later), but delete the rest of the text and images. So, lose the Summary, the Sidebar and the interesting group of images. Click on Save to complete the process. Now, on the top menu, click on Setup and then T emplates. Click on the home template.
Remove the Summary, Sidebar and Images f ield using the trash symbol. T his will not delete these f ields, just remove them f rom use on the Home template. Click Save. You will be asked to conf irm you choice. Read the warning in italics - this is worth noting!
Adding some useful modules ProcessWire comes with many usef ul modules but not all are installed and there are others which are really usef ul that can be downloaded. We will start with a wonderf ul Module Manager by the irrepressible Soma f rom the PW Forums. since that will make installing and updating other modules much easier. T he Module Manager allows you to download and install modules f rom the main module repository - including third party modules. T hat speeds things up enormously, but it must be installed f irst! Download it here
and f ollow the installation instructions given on the page.
Once it is installed, go to Setup > Modules Manager in the admin. You are now presented with a huge list of modules. Lets install some.
Modules to add T here are a lot of really usef ul modules available, but there are just a couple we should install f or now. Find them in the list in your new Module Manager and click on Download in the right column. T humbnails - a really usef ul module f or creating multiple thumbnails of an image on upload f or use in a page Page Delete - makes it a little simpler to delete a page http://wiki.processwire.com/index.php/Basic_Website_Tutorial
3 / 35
Basic Website Tutorial - ProcessWire
5/04/13
Repeater - already downloaded, so just press the install button T hat will do f or now.
Scripts and CSS
Updating JQuery ProcessWire comes with T WO JQuery installations - one f or the backend and another f or the f ront. Actually, that is not the overkill that it may seem. T he backend JQuery is intended f or the administration of the ProcessWire version that you have downloaded. As new versions of the core are released, so this will get updated to match what is happening under the hood. T he f rontend JQuery is there f or you to use f or your site - nothing else in PW relies on it - so you might as well update it to the latest version.
In the /sites/templates/ directory are two sub directories - scripts and styles. You can use these f or your JavaScripts and CSS f iles. But this is not mandatory. Since the only f iles that rely on these are the template f iles, if you wish to create directories called "js" and "css" - f eel f ree! Note: Many JQuery plugins come with their plugin scripting and examples expecting js and css (and img or images) so you may want to go with those rather than do a lot of reediting. Or you can have all of them to cover anything, of course!
Navigate your way through the f ile system to /site/templates/scripts. Delete the JQuery that is there and go and download the most recent version f rom the JQuery website. Put it in the scripts directory.
Template Files Bef ore worrying about content, it is a good time to sort out some basic look and f eel design using f iles in the T emplate Directory. With Process Wire there are two parts to a template: T emplates in the administration which are used f or creating groups of f ields and f or some of the page logic T emplate Files in your site f ile structure which are used f or outputting data and the HT ML construction of your site. T emplates in the administration are of ten associated with a specif ic T emplate File, but do not need to be, which can cause a little conf usion. So, I will always say T emplate File when I am talking about the actual f iles and just T emplate f or the templates in the admin. When dealing with dif f erent types of content, these are def ined by the template used in the admin, so tell your clients that when creating a page to "Choose a T emplate" rather than "Choose a Content T ype."
The Famous ProcessWire Templating System T he most f amous f act about the ProcessWire T emplating System is its complete absence f rom any documentation (apart f rom this paragraph). And this is f or good reason. ProcessWire does not have a templating system. One of the core philosophies of ProcessWire, and something that has attracted a lot of those who now use it f or a huge variety of both complex and simple websites, is that ProcessWire outputs the results f rom data f ields in a very predictable and clean f ormat (allowing f or any text f ormatting that you may have applied when creating the f ield). It is not wrapped in any special DIVs and does not have any natty surprises that can only be accessed using some convoluted protocol and a ton of JavaScript; when you type "I have a skinned Cat" into a f ield, you will get back out "I have a skinned Cat." Full details of how this all works will be f ound in the Category:Fields, but as f ar as this demo is concerned, there will be no surprises. T his means that in template f iles, once you use the very simple API calls to f etch data, you are f ree to handle it in anyway you like. If you want to design the look of your site with Dreamweaver (other expensive design systems are available) and paste it into a template f ile with the calls to the f ields in the holes, you can - it will work. Indeed, just to prove the point, the basic site layout I have used f or this tutorial, I put together with an old copy of Dreamweaver. So, to start, we can put together a very simple and traditional template f ile structure consisting of a header, a f ooter and a hole in between where we can have some f un. T he def ault installation actually comes with exactly that, but we will start f rom scratch so that there is no question about the procedure or understanding how simple this is. http://wiki.processwire.com/index.php/Basic_Website_Tutorial
4 / 35
Basic Website Tutorial - ProcessWire
5/04/13
Header and Footer You can design what you like, to be honest, but it might be easier just to steal what I have here so there are no surprises later on. Our design will have a menubar, a top masthead banner, a body area, and a f ooter with some additional inf ormation in it. Navigate to /site/templates/ in your ProcessWire installation. Create a f ile called T UT _header.inc and another called T UT _f ooter.inc. I will use the T UT _ pref ix on all f iles we create just so it is obvious what f iles are being used with this and f uture tutorials. T here is no other reason!
The Templates Directory ProcessWire looks in the templates directory (and not in any subdirectories) f or f iles that can be used as template f iles associated to templates in the admin. If a f ile has php as the f ile suf f ix, it is a candidate. If it has the .inc suf f ix, it will be ignored. In this case, we want these f iles to be ignored. You can create additional directories under the templates directory if you like. T here is already a scripts and styles directory. You may also want a separate directory f or include f iles, just to keep things organised. Up to you.
While you are about it, create a T UT _layout.css f ile in the styles directory. You will notice that there are a f ew f iles in the templates directory. home.php is currently used as the T emplate File f or the Home page in the pages list in the admin. We will reuse that in our design f or simplicity. sitemap.php - although we wont use this immediately, we will keep it as a usef ul ref erence. search.php - leave this here. So, here is a very basic and f amiliar layout. A top menu bar, a masthead, a body area and a f ooter. T he two parts that make this up are split at the body area between the header and the f ooter.
Her e is the head code:
1. <!DOCTYPE html> 2. <html lang="en"> 3. <head> 4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5. <meta name="description" content="DESCRIPTION GOES HERE"> 6. <meta name="keywords" content="KEYWORDS GO HERE"> 7. <title>TITLE GOES HERE</title> 8. <link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/TUT_layout.css" /> 9. </head> 10. 11. <body> 12. <div id="menubar"> 13. <div id="navbar"> 14. <?php 15. include("./TUT_topnav.inc"); 16. ?> 17. </div><!-- /navbar --> 18. </div><!-- /menubar --> 19. 20. <header id="masthead"> 21. <div id="header-banner">BANNER GOES HERE</div> 22. </header> 23. You will24. notice the include statement in the middle of the page. We need to <div id="wrapper"> create 25. another f ileid="content"> to hold the navigation (note this is an update f rom the <div
older tutorial). Create a f ile called T UT _topnav.inc and place the f ollowing code in it: (T his is a menu system designed originally f or Bootstrap by Soma which I have adapted f or our purposes here)
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20.
<?php /* *** NOTES from Soma *** render markup menu @param @param @param @param @return */
PageArray $pa pages of the top level items Page $root root page optional, if you use other root than home page (id:1) string $output for returned string collection integer $level internally used to count levels string menu html string
function renderChildrenOf($pa, $root = null, $output = '', $level = 0) { if(!$root) $root = wire("pages")->get(1); $output = ''; $level++; foreach($pa as $child) {
http://wiki.processwire.com/index.php/Basic_Website_Tutorial
5 / 35
Basic Website Tutorial - ProcessWire
5/04/13
21. $class = ''; 22. 23. // make the current page and only its first level parent have an active class if($child === wire("page")){ Her e 24. is the footer 25. $class .= ' active'; 26. } else if($level == 1 && $child !== $root){ 27. if($child === wire("page")->rootParent || wire("page")->parents->has($child)){ 28. $class .= ' active'; 58. </div><!-- /content --> 29. } 59. <div id="footer"> 30. } 60. FOOTER IN HERE 31. 61. </div> 32. $class = strlen($class) ? " class='".trim($class)."'" : ''; 62. </div><!-- /wrapper --> 33. 63. 34. $output .= "<li$class><a href='$child->url'>$child->title</a>"; 64. </body> 35. 65. </html> 36. // If this child is itself a parent and not the root page, then render its children in their own menu too... 37. if($has_children && $child !== $root) { 38. $output .= renderChildrenOf($child->children, $root, $output, $level); 39. } ... Which proves the mundane point above. 40. $output .= '</li>'; 41. } 42. $outerclass = ($level == 1) ? "drop" : ''; Her e 43. is the CSS return "<ul id='nav' class='$outerclass'>$output</ul>"; 44. } Add this to your T UT _layout.css f ile. 45. 46. // bundle up the first level pages and prepend the root home page 47. $root = $pages->get(1); T he menu CSS I got f rom somewhere and if I could remember where I would 48. $pa = $root->children; thank them f or it ... sorry! 49. $pa = $pa->prepend($root); 50. 51. // Set the ball rolling... 52. echo renderChildrenOf($pa); 1. #menubar { background-color: #545454; height: 45px; width: 100%; } 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18.
body { background-color: #eee; margin: 0px; padding: 0px; } #masthead { background-color: #CCC; height: 150px; width: 100%; } #wrapper { background-color: #FFF; width: 1000px; margin-right: auto; margin-left: auto; padding-bottom: 20px; } #navbar { height: 45px; width: 1000px; margin-right: auto; margin-left: auto; background: #333; } #content { width: 950px; padding-top: 20px; margin-right: auto; margin-bottom: 10px; margin-left: auto; } #footer { width: 930px; margin-top: 10px; margin-right: auto; margin-bottom: 10px; margin-left: auto; border: 1px solid #ccc; padding #header-banner { margin: auto; width: 1000px; } ul#nav { margin: 8px 0 0 20px; } ul.drop a { display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none; } ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; color: #fff; } ul.drop { position: relative; z-index: 597; float: left; } ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; } ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #1e7c9a; } ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: #555; border: ul.drop ul li { float: none; } ul.drop ul ul { top: -2px; left: 100%; } ul.drop li:hover > ul { visibility: visible }
At this point we need to check this is at least sort of working!
T esting the layout with the Home pag e T he best way, f or the moment, is to hijack the original home.php template f ile, since we know that the home page is still using it and it has some content in the body f ield. Open home.php and replace its code with this:
1. 2. 3. 4. 5. 6. 7.
<?php include("./TUT_header.inc"); echo $page->body; include("./TUT_footer.inc");
We are simply including the header and the f ooter and have instructed it to f etch the "body" f ield that is in the "home" template in the administration - this is why we lef t that f ield intact earlier! A lot of the work you will do in processwire once you have played around with your html and css will pretty much boil down to printing out a f ew f ields. In f act you could probably put together a reasonable brochure site without doing much more than that. Okay, save all that lot and load up the homepage of your site (the root) and hopef ully it will look something like this:
http://wiki.processwire.com/index.php/Basic_Website_Tutorial
6 / 35
Basic Website Tutorial - ProcessWire
5/04/13
Creating a Site Settings System All CMSs have a section where you f ill in tons of stuf f about your site you choose your logo, add a header banner, add meta stuf f , a site title, a phone number f or everywhere, a contact email address .... every CMS has one of those. T hey normally have exactly the f ields someone else thought were usef ul. Except ProcessWire which holds onto the philosophy that you may want to make your own decisions about such important things. So let's go and create one. It wont take very long and will have exactly what we need rather than what some developer who has never met us thinks we need. What is more, you can expand it later if you think of more things you would like in your site settings!
Creating the Site Setting s Fields T he f irst step in much of what you will do in ProcessWire will inevitably be to create the f ields you will need f or a template. Go to Setup and then Fields. T he list of f ields that you will see is pretty small, really. But then, this is not much of a site ... yet! Click on Add New Field What ever f ield you are creating, you always start with the same f orm - a Name f or the f ield, the type of f ield and the label.
Recyling Fields In PW you can reuse f ields on multiple templates which can save a lot of time and makes sense when you have related content types or pages that have similar needs. For instance, you may want every page, whatever the content, to have meta keywords and meta description that will be added to the normal site meta. Or, you may have a main body that is common across several types of articles. Remember that PW saves f ields in their own exclusive tables, rather than trying to squish all the data into a some poor, over used, page f ield. T he trick, theref ore, is f inding the balance between using the same f ield because you actually want that common data to be all in the same table, and creating dedicated f ields because you want the separation of data. When you do reuse a f ield, you are not stuck with its label and description (and some settings like size). T hese can be adjusted on a template by template basis, which means you can reuse the f ield while giving it a new label, f or instance. It is worth creating a data policy on complicated sites so that you have a consistent system which may well address f uture data integrity and portability issues.
Site T itle We need a f ield f or our site title. So: Name: site_title (no spaces or clever stuf f please) T ype: T ext Label: Site T itle And Save. Once you have saved you will have lots of dif f erent things you can do with the f ield. For instance, if you go to the Input tab, you can change the Maxlength, the size and add placeholder text. http://wiki.processwire.com/index.php/Basic_Website_Tutorial
7 / 35
Basic Website Tutorial - ProcessWire
5/04/13
However, f or the moment, lets keep it simple. We have already saved, so go back to Fields in the breadcrumbs at the top of the page. We need a f ew more f ields: A banner f or the top of the site Meta Description Footer text T here are a lot of other things you could add, but that will do f or now.
Meta Keywor ds and Descr iption Create a new f ield: site_meta_description I am using "site" at the head of all of these just to keep things logical and easy to f ind. T his should be a textarea and, on the details tab, you may want to set the text f ormatter to "Html Entities" to avoid breaking the meta tag if some extra quotes are added accidentally
Footer T ext Create a f ield called site_f ooter_text - again, choose a textarea and save. Once you have saved, go to the Details tab and change the Input f ield T ype to T inyMCE and save. Now, when you go to the Input tab you can expand an area called T inyMCE Advanced Conf iguration Options. We don't need to change anything at the moment, but as you can see you can conf igure a dif f erent editor conf iguration f or every single T inyMCE f ield - very usef ul!
Header Banner T he header banner is an image f ield that we want to conf igure just f or this one job. Create a new f ield called site_header_banner and choose the Image f ield type and save. Under Details, change the Maximum f iles allowed to 1. As you will learn later, the image f ield can upload multiple images and those can then be inserted into a T inyMCE f ield. What is more, you can loop through those images on a template f ile f or a gallery, if you wish! However, we just want the one f or our banner at the moment. Under Input, change the number of rows f or description to zero - we wont need that in this case. Display thumbnails in page editor? Why not! Expand image dimensions and put 1000 f or the width and 150 f or the height. Obviously, in this case we will be uploading a banner the right size, but this is good practice. Save. So, we now have f ive f ields. Next step is to add them to a template.
Creating the Site Setting s Template T he Processwire T emplate system f ulf ils several f unctions. Firstly and most obviously it groups f ields together to be used f or page creation. A template can also be associated with a specif ic template f ile in the templates directory. T his is a one-to-one relationsship so that a template and its f ile are uniquely bonded together. However, you can also create a template WIT HOUT a template f ile, which is usef ul f or when you are not rendering the f ields out uniquely - and that pretty much describes what we need f or our Site Settings. Go to Setup > T emplates and click on Add New T emplate. Depending on what you have been playing with you will either get a warning that there were no new templates f ound or a list of unassociated template f iles it has f ound. Either way, ignore that, and go down to Create a New T emplate without a f ile. Fill in the name, "Site-Settings-T emplate" Warning: If you put spaces between the words you will get T HREE templates; Site, Settings and T emplate! You will now see your new template listed and that it has no-f ile, which is a good thing. http://wiki.processwire.com/index.php/Basic_Website_Tutorial
8 / 35
Basic Website Tutorial - ProcessWire
5/04/13
Click on the name to edit the template. We need to add f ields. It already has a title f ield which is needed, so leave that. Use the drop down to select your f ields one at a time. site_title site_header_banner site_f ooter_text site_meta_description Save. T he template is ready to be used, but we can play with it a bit more f irst. Go to the Family tab. "May Pages using this template have children?" No - we only want the one Site Settings Page. Leave the "Can this template be used for new pages?" to yes f or the moment as we haven't created the page yet. You could change it to no later. Save the template and go to the Pages part of the admin.
Creating the Site Setting s Pag e Select the Home page and click on new. T his will create a child page to the home page. Give the page the title Site Settings and select the Site-Settings-T emplate. Save. You will now be presented with the f orm f or your settings. Bef ore you f ill it in, go to the Settings tab. Check the Hidden checkbox T his will allow us to use the f ields, but will hide the page f rom the menu and so on - so it will be f or back end use only. Save that (hit the publish button) and go back to the Content. Fill in the content f ields as you wish. T he Site Header Banner should be 1000px by 150px, a bit like this subtle one:
Or .. you could use one of your own!
Using the Site Setting s T he last step is to grab the data associated with the Site Settings page and put it in the header and f ooter template f iles. In my code above, I have marked where you need to put the data in CAPIT AL LET T ERS. How kind of me! Go back to your template f iles and open T UT _header.inc. T he instruction we need to give is to f etch the data f rom a page OT HER than the one we are on. $page will ref er to the current page, so $page->body would get the data f rom the body f ield f or the current page. $pages (plural) together with the GET command will allow us to specif y a particular page. (See the API f or more details.) So, this will be the code f or the Meta Description:
1. <?=$pages->get("/site-settings/")->site_meta_description ?>
Note: the php short code (<?=) may not work on your server set up if that hasn't been switched on. If that is the case, use the more usual:
1. <?php echo $pages->get("/site-settings/")->site_meta_description; ?>
You can now use the same method f or f etching the site title f or the <title> tag (and anywhere else you want it.) T he banner is slightly dif f erent. We need to specif y the URL in this case so http://wiki.processwire.com/index.php/Basic_Website_Tutorial
9 / 35
Basic Website Tutorial - ProcessWire
5/04/13
that we have the f ull path, and put it in an <img> tag, so:
1. <img src="<?=$pages->get("/site-settings/")->site_header_banner->url ?>">
All that is lef t to do is to add the site_f ooter_text to the f ooter, and of f we go!
Adding some Content T he last part of this tutorial is simply about adding some extra content and you can use it as a bit of a test. We have some text in our home page, but lets create another page with a new template, just f or the hell of it. One of the main complaints website administrators have with client controlled content is that if you give them too much control, allow them to insert images lef t right and centre (pun intended), then there is a good chance the site will get broken at some point.
Creating the Article Fields So, we will create a template that has a main image, an intro text, main text and an optional second image. T hat will be f our f ields. However, in addition to the mandatory title we will add an optional headline and some keywords that can be added to our meta keyword list. T he headline f ield and title f ield already exist in the def ault installation, so head over to Setup > Fields in the administration and create the f ollowing f ields: article_introtext - textarea article_maintext - textarea/T inyMCE. Note: T inyMCE parameters can be edited on the Input tab. See the article T inyMCE f or more details. article_images - image f ield. Set it f or T WO images (as we will use this f or both the f irst and second image in the article), no description and 280 x 187 size - that is standard landscape proportions f or 35mm (call me old f ashioned). Note: T he size parameters are maximum values, so will only come into play on upload if your image exceeds the size settings. article_metadescription - just a text area. However, on the details tab, you may want to set the text f ormatter to "Html Entities" to avoid breaking the meta tag if some extra quotes are added accidentally! It is worth repeating that you can call your f ields anything you like - I am just using these names so they are bunched together f or the tutorial. For instance, the "body" f ield which is part of the def ault installation, you may want to use in a lot of settings.
Creating the Article Template File Go to /sites/templates/ in your installation and create a f ile called T UT _article.php T his will be the template f ile that we will use f or the template shortly. First job is to include the header and the f ooter includes of our site, so add: http://wiki.processwire.com/index.php/Basic_Website_Tutorial
10 / 35
Basic Website Tutorial - ProcessWire
5/04/13
1. <?php include("./TUT_header.inc"); ?> 2. 3. <?php include("./TUT_footer.inc"); ?>
Remembering that our content box in our site template structure is 950px wide, we might as well make good use of it. You can do whatever layout you wish, really. T here are six f ields to play with in the structure: title headline article_mainimage article_introtext article_images In my layout I am putting the f irst image next to the title/headline (just one or the other) and the intro text, then put the main text on another row with the second image f loated. T his is my starting layout:
2. <div id="article-container"> 3. <div class="article-row"> 4. <div class="article-mainimage"></div> 5. <div class="article-introbox"> 6. <div class="article-introtext"> 7. </div> 8. </div> 9. </div> 10. <div class="article-row"> 11. <div class="article-main clearfix"></div> 12. </div> 13. </div>
And I am adding the f ollowing rather rough and ready CSS to the T UT _layout.css f ile:
51. #article-container { 52. width: 950px; 53. } 54. .article-row { 55. clear: both; 56. } 57. .article-mainimage { 58. float: left; 59. width: 280px; 60. padding: 20px; 61. border: 1px solid #ccc; 62. } 63. .article-introbox { 64. float: right; 65. width: 580px; 66. margin-right: 20px; 67. margin-top: 40px; 68. min-height: 234px; 69. } 70. .article-introbox h2 { 71. text-align: center; 72. } 73. .article-introtext { 74. font-style: italic; 75. } 76. .article-main { Adding Fields 20px; 77.the margin-top: 78. } Although 79.the .article-main template is yet img to {be created in the admin, we already have the float: right; f ields, 80. so might as well add them. 81. margin: 20px; 82. } Just a reminder that ProcessWire spits everything out without any f ormatting, 83. .clearfix:after { 84. content: "."; so we should add some; admittedly, nothing exactly taxing! For these calls we 85. since display: block; use $page, we are wanting f ields related to the current page. For 86. clear: both; instance, ?> will add the title f ield (or <?php echo $page87.<?=$page->title visibility: hidden; 88.will line-height: 0; >title; ?> do the same thing). 89. height: 0; 90. } As with our header banner earlier, the images will need the additional ->url on 91. the end92. to get the f ull path. .clearfix { 93. display: inline-block; 94. } And there is a neat trick f or the title: $page->get("headline|title") 95. 96. html[xmlns] .clearfix { In this statement, we are asking f or two alternatives and will return the f irst 97. display: block; one that has} a value. If we have put text in the headline f ield, then that is what 98. 99. will be returned. If no text is in the headline f ield, then the mandatory title f ield 100. * html .clearfix { value 101. will be returned. Usef ul and simple - my kind of programming (T hanks, height: 1%; Ryan).102. }
However, we need to do something clever with out images. In our f ield we are uploading two images. So, when we retrieve our image URL, we need to specif y the f irst() image and the last() image. T his means that if we change the order of our images in the admin (you can drag and drop them) they will change order on the page. So, this is what I have so f ar: http://wiki.processwire.com/index.php/Basic_Website_Tutorial
11 / 35
Basic Website Tutorial - ProcessWire 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23.
5/04/13 <?php include("./TUT_header.inc"); ?> <div id="article-container"> <div class="article-row"> <div class="article-mainimage"> <img src="<?=$page->article_images->first()->url ?>"> </div> <div class="article-introbox"> <h2><?=$page->get("headline|title") ?></h2> <div class="article-introtext"> <?=$page->article_introtext ?> </div> </div> </div> <div class="article-row"> <div class="article-main"> <img src="<?=$page->article_images->last()->url ?>"> <?=$page->article_maintext ?> </div> </div> </div> <?php include("./TUT_footer.inc"); ?>
Creating a Template T he next step is to create the actual template. Go into your ProcessWire admin and to to Setup > T emplates. Click on Add New T emplate. T his time, the system should have spotted our article template f ile:
Simply check the box and click on add template. You will see it in the list. Click on the T UT _article to open it. Add all the article_ f ields you created plus the headline f ield. T he title f ield is already there. Don't f orget the article_metadescription, even though we haven't used it yet. Save
You can reorder the f ields however you wish by grabbing and moving the f ields up and down. T his uses a special select f ield called asmSelect which is available as an option f or the Page Field T ype.
Creating an Article T he template f ile is done (may need some messing with), the f ields are made and the template is created. T he only thing to do is to create a page and try it out Go to Pages. Click on "new" by the Home page - we might as well make it a direct child. Give the page a title - My Article
Select the T UT _article template. And Save. You will now be presented with your f orm.# Well, dont just sit there! Stuf f it with things! Once you have entered content of your choice, there is one more bit of http://wiki.processwire.com/index.php/Basic_Website_Tutorial
Restricting Content Types T he good thing about this system is that you use the same procedure to create ANY type of content. T he type of content is simply decided by f orcing you to choose a template. You can also limit what templates are available by settings within the templates themselves - you can 12 / 35
Basic Website Tutorial - ProcessWire
editing that needs to be done. Go back to your template f iles and open T UT _header.inc. In the Meta Keywords section, add your new article keywords f ield like this:
5/04/13
decide that a Child of a page that uses a particular template can only use one of a specif ied list of templates. T hat makes the system very customisable and neat f or clients. T hey cannot choose the wrong template f or the wrong part of your menu if you don't let them. Some more text
<meta name="description" content="<?=$pages->get("/site-settings/")->site_meta_description ?>, <?=$page->article_metadescription ?>">
If you add the article_metadescription f ield to ANY template and f ill it in f or any page, then you will have custom, relevant keywords in addition to your global keywords. Even though this code is in the header include f ile, it will take the value f rom the CURRENT page, because that is what we have told it to do. So. Fire up your page!
Just one little job. You will notice that the site map is still using the old def ault template. Open sitemap.php and change the head and f oot includes to your new T UT _header.inc and T UT _f ooter.inc. T hat should sort that out.
Conclusion T he basic site now works. You have a simple site settings system that will control some basic elements of the site which you can expand You have created your own header and f ooter You have created specif ic f ields f or your needs You have created specif ic templates f or your needs You have learned how to f etch data into your templates You have created pages using your own templates You have added a particularly crass header image - unless you were sensible enough to make your own! At this point, you could create an okay brochure site without doing much more and it would be very quick to do. However, there is much more than can be done with ProcessWire. Further tutorials will cover common tasks like creating a slide show, adding a lightbox system f or images, creating a basic news system and so on.
See Also http://wiki.processwire.com/index.php/Basic_Website_Tutorial
13 / 35
Basic Website Tutorial - ProcessWire
5/04/13
Simple News System Simple Gallery System Categories: Long T utorials
Pending
This page was last modified on 24 March 2013, at 12:32. This page has been accessed 2,451 times. Privacy policy
About ProcessWire
Disclaimers
http://wiki.processwire.com/index.php/Basic_Website_Tutorial
14 / 35
Simple News System - ProcessWire
5/04/13
Lo g in
Go
Page Read Discussion View source View history
Search
Simple News System T his Article Stub is work in progress!
Navig atio n Main page
It may contain inf ormation that is incomplete or needs testing
Recent changes Rando m page Article help
Pro ce sswire Ho mepage Do wnlo ads Fo rums
Contents [hide] 1 What You Will Learn 2 How t he syst em is st ruct ured 2.1 Hidden Pages 2.2 Template Files and Functions
T o o lbo x
3 Creat ing t he Files What links here Related changes Special pages Printable versio n Permanent link
4 Fields and Templat es 4.1 Templates 4.1.1 Parent Pages 4.2 Fields 4.2.1 Article Thumbnails 4.2.2 Article Category 4.3 Adding Fields to Templates 5 Creat ing Cat egories
T his tutorial looks at one simple way of creating a basic news or blog system f or a ProcessWire website. It will help you create categories, basic articles and a news index page. T his is not a def initive way of handling news, but is a very straightf orward one which you can adapt as you wish. T he tutorial uses the Basic Website T utorial as a starting point and reuses some of the f ields and design f rom that tutorial, though the techniques demonstrated can easily be copied into any ProcessWire website.
6 Creat ing News 7 The Templat e Files and Funct ions 7.1 Function newsList() 7.1.1 Function categoriesList() 7.1.2 Funtion newsDisplay() 7.2 Finishing the Template Files 7.2.1 TUT_news_index.php 7.2.2 TUT_news.php 8 Finishing Of f 9 See Also
What You Will Learn How to use Page f ields and pages f or categories How to list pages that are in dif f erent parts of the page tree How to use the T humbnails module (in its basic f orm) How to use f unctions to simplif y your template f ile structure
If you are new to ProcessWire I strongly suggest you do the Basic Website T utorial f irst as this will give you the basic working model f or this tutorial and will teach you much of the basic techniques of using the system. It only takes about half and hour or so to do. http://wiki.processwire.com/index.php/Simple_News_System
15 / 35
Simple News System - ProcessWire
5/04/13
How the system is structured Generally speaking, a basic site in ProcessWire is structured using the parent/child relationship that makes up the page tree. T his is a very neat and ordered way of using ProcessWire and is the basis f or both simple sites and huge, complicated sites. However, it is sometimes expedient to store inf ormation in a slightly dif f erent way simply because you want to handle it dif f erently. News articles are a good example of this; you would normally expect there to be a lot of them and f or them to be categorised in some way that is not immediately suitable f or or ref lects a site's menu. In such as circumstance, it is possible to store them in the page tree in such a way that they are not directly available via the menu.
Hidden Pag es Under the settings tab of the page edit dialogue, a page can be set to "hidden." T his does not un-publish the page, but simply stops it appearing in the f ront menu or any system that automatically lists the children of another page. In addition to hiding the page itself , any children of that page are also hidden, whether they are individually set as hidden or not. We can use this to our advantage by creating a hidden "New Articles" page and hidden "Categories" page under which we can store our categories and articles.
Template Files and Functions T he system uses two template f iles (plus two templates without f iles) and a f unctions f ile that will hold most of the rendering f or articles and lists. Using f unctions in this way in a combined f ile means the template f iles are kept very much simpler, helping any f uture structural changes, and it allows the f unctions to be reused in dif f erent templates if required.
Creating the Files We require three f iles f or this particular system. Navigate to /site/templates/ and create these f iles: T UT _news.php T UT _news_index.php T UT _news_f unctions.inc http://wiki.processwire.com/index.php/Simple_News_System
16 / 35
Simple News System - ProcessWire
5/04/13
Note: the use of T UT is simply so that these tutorial f iles match the ones used in the other related tutorials - you can, of course, name the f iles whatever you wish! Open up the two php f iles - these will be our template f iles. For the moment we only need to include the header and f ooter f iles into these and also our new f unctions f ile. Add the f ollowing to the two php f iles:
1. 2. 3. 4. 5.
<?php include("./TUT_header.inc"); include("./TUT_news_functions.inc"); include("./TUT_footer.inc");
Save and close the f iles, we will return to them shortly.
Fields and Templates Go to the administration of your website. We need to create some f ields, some templates and a couple of pages. We will start with the templates.
Templates Go to Setup > T emplates and click on New T emplate. You will see the two php f iles f rom earlier listed. Check the box f or each and click on the Add T emplates button. T hat gives us the templates f or the news index page and f or the actual news articles. We need to create two templates that do not have f iles to be used f or the hidden pages that will beccome the parents f or the news articles and the categories. In Setup > T emplates click on Add New T emplate. It should say that no new template f iles were f ound. Go to Create a new template without a f ile. Enter: categories news-articles making sure that there is a space between the two. T his will create two templates. Click Add T emplates. http://wiki.processwire.com/index.php/Simple_News_System
17 / 35
Simple News System - ProcessWire
5/04/13
T he reason we have created specif ic templates at this point is that we want to set our pages to work in a very particular way. Click on the categories template to edit it. Go to the f amilies tab and open the allowed templates f or children. From the dropdown, select "T UT _news_index." When you create a new child to the categories page later, you will only be able to use this template f or the child page. Save and close the template. Now edit the news-articles template. Under the f amilies tab select T UT _News as the allowed template f or children. Save and Close the template. Bef ore we carry on, we will need the category parent page in place, so let us create that and the article parent page and news page while we are at it.
Par ent Pag es Go to pages, select the home page and click on new page to create a new child page. Call it News Articles and select the news-articles template. Save. Go to the settings tab and make the page hidden but published and save. Close and create another page under Home. Call this one Categories and select the categories template. Save. Go to the settings tab and make the page hidden but published, then save. Return to the pages menu, create a third page under home, and call it News. Select the news-index template and save and publish. Close the page. T his will be our news page on the f ront of the site.
Fields We can now return to sorting out our f ields and templates. You will need to create the f ollowing f ields (some are already created if you have done the Basic Website T utorial): T itle - this f ield already exists. article_introtext - textarea f ield article_maintext - textarea/tinymce f ield article_thumbnails - a Crop Image f ield (see below) article_category - a Page f ield (see below) T itle obviously exists already, the next two are f rom the Basic Website http://wiki.processwire.com/index.php/Simple_News_System
18 / 35
Simple News System - ProcessWire
5/04/13
tutorial - they do not require anything special.
Ar ticle T humbnails T his is a special f ield using the T humbnails Module. See Here if you have not already installed it. Create a new f ield, call it article_thumbnails and choose the Cropimage f ield type (this is the thumbnails f ield type). Give it a label of Article Main Image. Save the f ield then go to the Details tab and add "1" to maximum f iles allowed. On the input f ield open Max image dimensions and enter 1000 f or the width and 669 f or the height. Normal camera proportions. Under T humnail settings, enter the f ollowing: thumbnail,360,280 listingthumb,280,170 Save the f ield. Although the normal images f ield allows you to set image sizes on the f ly in the template f iles and will cache that image size in the assets f older, the T humbnails module also allows basic cropping of the images to f it specif ic thumbnail sizes, which is very usef ul! However, it requires the image sizes to be set in advance rather than on the f ly f or this to work.
Ar ticle Categ or y T his is a page f ield, which allows one or more pages to be selected f rom a predetermined set of parameters. Create a f ield called article_category and choose the page f ield type. Give it a label of Category and save. In the Details tab, set it to single - the third option. In the Input tab, change the parent to your Categories page that we created earlier. T his means that only the children of the category page will be listed. Leave the input f ield type as Select, then Save.
Adding Fields to Templates Fields only need to be added to two templates - T UT _news and T UT _news_index. For T UT _news_index, simply add the article_maintext f ield. T his will just be used f or a short, optional introduction to the main news page and the category pages. http://wiki.processwire.com/index.php/Simple_News_System
19 / 35
Simple News System - ProcessWire
5/04/13
For T UT _news, add all the f ields f rom above: article_category article_introtext article_maintext article_thumbnails article_metadescription
Creating Categories Bef ore we create some news and then work on the template f iles, we will need some categories. Go to pages and select the hidden Categories page. Click on new page. You should f ind that you are not given a template option - that has been preselected as T UT _news_index Give your category a title and save. Optionally, add some maintext - this will just be an introductory description f or the category,. Publish. Create a couple more categories in the same way.
Creating News Although we have no way of displaying the articles yet, we can add some news anyway while we are here. On the Pages section, select the hidden page News Articles and create a new page. As with categories, the template will be preselected - in this case T UT _news. Create a handf ul of articles, remembering to choose a category f or each (You may wish to set the category f ield as required on the template)
The Template Files and Functions Most of the work of displaying the articles will be done by the T UT _news_f unctions.inc f ile. T he two template f iles T UT _news_index.php and T UT _news.php will simply render the f unctions within the header/f ooter http://wiki.processwire.com/index.php/Simple_News_System
20 / 35
Simple News System - ProcessWire
5/04/13
template f ramework.
Function newsList() T his f unction is the most complicated of the three f unctions needed f or the news system. Firstly, the f unction gets the name of the current page and checks to see if it is called "news." News is our main news page and will list all recent articles. However, if it is NOT called news, that means it is one of our category pages, and we will only want to show items that are related to that catgegory. We then use f ind() to retrieve all pages where the parent is news-articles, the template is T UT _news and if it is a category page, by the name of the category too. Af ter that, we loop through the results and print out the articles. At the bottom of the f unction, we print out some pagination. Here is the f unction:
/* LIST ARTICLES This displays a list of articles in div containers on the news-index page. */ function newsList(){ // Grab the page name from the url $thisCategory = wire("page")->name;
// If the category is not called "news" then output the category name as a if($thisCategory !="news") { $category = "article_category.name=" . $thisCategory; } // Get the news posts - limited to ten for later pagination
$newsposts = wire("pages")->find("parent=/news-articles/, $category, templ $out =" ";
Notice the use of wire("pages") rather than $pages? T his is because we are //Loop through the pages working within a f unction and $pages would not be understood inside a foreach($newsposts as $newspost){ f unction.
$out .="<div class='clearfix'>"; if($newspost->article_thumbnails){ T he pagination used href='{$newspost->article_thumbnails->url}' the same $newsposts variable as the f oreach loop and $out .="<a class=''>"; $out .="<img class='align_left' src='{$newspost->article_thumbnails so the number of items shown on each page will be set by the limit value on $out .="</a>"; the initial } "f ind" statement. $out .="<a href='{$newspost->url}'><h3>{$newspost->title}</h3></a>"; $out .="<p>{$newspost->article_introtext}</p>"; $outcateg .="</div>"; Function or iesList()
On the} same page, we also want to list our categories. // Pagination http://wiki.processwire.com/index.php/Simple_News_System
21 / 35
Simple News System - ProcessWire
5/04/13
T his is simply a case of f inding the pages where the parent is categories, and the template is T UT _news_index and sort them alphabetically. We can then loop through them and use their URL to link to them. T his URL will, of course use this current template f ile, so we will, in ef f ect be returning here, but with a dif f erent page name - and that def ines our category! Here is the code:
/* CATEGORIES LIST This lists available categories */
function categoriesList(){ $categories = wire("pages")->find("parent=/categories/, template=TUT_news_ $out =" "; foreach($categories as $category){ $out .="<li><a href='{$category->url}'>{$category->title}</a></li>"; } echo "<ul>$out</ul>"; }
T hose two f unctions will both appear on the T UT _news_index.php template f ile. T his template f ile is used both f or the main news and the categories.
Funtion newsDisplay() T his very short f unction just displays the entire article. Obviously, as with the other f unctions, you would customise this depending on how you want the article to be displayed.
/* DISPLAY ARTICLE This displays the article on the news page. You can change the <a> class if you are using a lightbox */ function newsDisplay(){ $newspost = wire("page"); $out =" "; if($newspost->article_thumbnails){ $out .="<a href='{$newspost->article_thumbnails->url}' class=''>"; $out .="<img class='align_right' src='{$newspost->article_thumbnails $out .="</a>"; } $out .="<h2>{$newspost->title}</h2>"; $out .=$newspost->article_maintext; echo "<div class='clearfix'>$out</div>"; }
http://wiki.processwire.com/index.php/Simple_News_System
22 / 35
Simple News System - ProcessWire
5/04/13
T hese three f unctions should be put in the T UT _news_f unctions.inc f ile within PHP tags. T his f ile should be included at the head of T UT _news_index.php and T UT _news.php
Finishing the Template Files T UT _news_index.php Edit the T UT _news_index.php f ile and add the categoriesList() and newsList() f unctions where you wish. For example:
include("./TUT_header.inc"); include("./TUT_news_functions.inc"); // Give the news index page a title an a bit of an intro echo "<h1>{$page->title}</h1>"; echo $page->body; // Render the Category List categoriesList(); // Render the News List newsList(); include("./TUT_footer.inc");
T UT _news.php Edit T UT _news.php and add the newsDisplay() f unction:
include("./TUT_header.inc"); include("./TUT_news_functions.inc"); // Output the newsDisplay function newsDisplay(); include("./TUT_footer.inc");
Finishing Off T he very simple news system should now be working. All that will remain is f or you to style it to suit your needs. You could also extend this using more f ields, creating variations on listing f or side bar recent news lists and so on, using broadly the same principles. As you will realise, the explanation may be quite long, but the actual code http://wiki.processwire.com/index.php/Simple_News_System
23 / 35
Simple News System - ProcessWire
5/04/13
involved is minimal - the PW core is doing all the heavy lif ting allowing you the f reedom to create this small application however you want.
See Also Basic Website T utorial Simple Gallery System Categories: Long T utorials
Draf ts
This page was last modified on 25 March 2013, at 04:54. This page has been accessed 418 times. Privacy policy
http://wiki.processwire.com/index.php/Simple_News_System
About ProcessWire
Disclaimers
24 / 35
Simple Gallery System - ProcessWire
5/04/13
Lo g in
Go
Page Read Discussion View source View history
Search
Simple Gallery System T his Article Stub is work in progress!
Navig atio n Main page
It may contain inf ormation that is incomplete or needs testing
Recent changes Rando m page Article help
Pro ce sswire Ho mepage Do wnlo ads Fo rums
Contents [hide] 1 What You Will Learn 2 Preparat ion 2.1 Installing JQuery and Plugins 2.2 Functions file
T o o lbo x What links here
3 Templat es and Fields 3.1 Template Files
Related changes
3.2 Templates
Special pages
3.3 Fields 3.3.1 Gallery
Printable versio n Permanent link
T his tutorial looks at one simple way of creating a basic gallery system f or a ProcessWire website. It will show how to install a 3rd party JQuery plugin (FlexSlider) to display a gallery and a lightbox, how to display a page of thumbnails and how to create the associated Gallery/Album in ProcessWire
3.3.2 gallery_thumbnail_siz e 3.4 Add the fields to the templates 4 Creat ing Cont ent 5 The Funct ions 5.1 Function albumList() 5.2 Function infoDisplay() 5.3 Function albumGrid() 5.4 Function albumShow() 6 Adding f unct ions t o t he Templat e Files 6.1 TUT_gallery_index.php 6.2 TUT_gallery.php 7 JQuery and Finishing
T he tutorial uses the Basic Website T utorial as a starting point and reuses some of the f ields and design f rom that tutorial, though the techniques demonstrated can easily be copied into any ProcessWire website. It also uses very similar f unctionality to the Simple News T utorial
8 See Also
What You Will Learn Using the Image f ield type f or multiple images Using the built in image size system and making it customisable f rom the back end http://wiki.processwire.com/index.php/Simple_Gallery_System
25 / 35
Simple Gallery System - ProcessWire
5/04/13
Installing and using 3rd party JQuery Plugin Creating f unctions to display the various components.
Preparation I will be starting with the Basic Website T utorial and using the same f ile and f ield naming conventions as I did there. But remember, that this is only one possibly way of creating a gallery and you can call templates and f ields whatever you wish! T he two plugins required are Colorbox and Flexslider 2 and we will also require an up-to-date version of JQuery. As of the writing of this tutorial, that is version 1.9.1
Installing JQuery and Plug ins Download JQuery and copy it to /site/templates/scripts/ f older. Download Colorbox. Copy jquery.colorbox-min.js to the scripts f older and colorbox.css to the /site/templates/styles/ f older. Download Flexslider. Copy jquery.f lexslider-min.js to the scripts f older and f lexslider.css to the /site/templates/styles/ f older. Create a new f ile in the scripts directory and call it T UT .js - we will use this f or additional JQuery where required. Open your f ooter include f ile in /site/templates/. If you are using the Basic T utorial setup, this f ile is called T UT _f ooter.inc Add the f ollowing script ref erences:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.
</div><!-- /content --> <div id="footer"> <?=$pages->get("/site-settings/")->site_footer_text ?> </div> </div><!-- /wrapper --> <script <script <script <script
type="text/javascript" type="text/javascript" type="text/javascript" type="text/javascript"
src="<?php src="<?php src="<?php src="<?php
echo echo echo echo
$config->urls->template $config->urls->template $config->urls->template $config->urls->template
</body> </html>
It is important the the T UT .js is last as this will be used f or any conf iguration related to the other plugins, and theref ore they must be loaded and available. Open your header include - if you are using the Basic T utorial setup, this f ile is T UT _header.inc
http://wiki.processwire.com/index.php/Simple_Gallery_System
26 / 35
Simple Gallery System - ProcessWire
5/04/13
Add the two links to the colorbox css and f lexslider css
1. 2. 3. 4. 5. 6. 7. 8.
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" <meta name="description" content="<?=$pages->get("/site-settings/")->s <title><?=$pages->get("/site-settings/")->site_title ?></title> <link rel="stylesheet" type="text/css" href="<?php echo $config-> <link rel="stylesheet" type="text/css" href="<?php echo $config-> <link rel="stylesheet" type="text/css" href="<?php echo $config-> </head>
You have now installed JQuery and the two required plugins.
Functions file As with the Simple News System I will use a f unctions f ile to create simple f unctions and then just import those into the templates. Create a new f ile in /site/templates/ called T UT _gallery_f unctions.inc If you have done the Simple News System tutorial you will have already created a f ile called T UT _news_f unctions. In a proper site you would probably combine f unctions together in one large f ile and include it on each template. However, f or the sake of keeping these tutorials uncluttered, I will use a f unctions f ile f or each system.
Templates and Fields Just like the Simple News System, I am using three templates, two of which have associated template f iles.
Template Files In /site/templates/ create two f iles T UT _gallery_index.php and T UT _gallery.php Add the f ollowing code to each which just includes the header, f ooter and the f unctions f ile:
1. 2. 3. 4. 5.
<?php include("./TUT_header.inc"); include("./TUT_gallery_functions.inc"); include("./TUT_footer.inc");
Save those f iles and logon to the backend of you ProcessWire site. http://wiki.processwire.com/index.php/Simple_Gallery_System
27 / 35
Simple Gallery System - ProcessWire
5/04/13
Templates Go to Setup > T emplates and click on Create New T emplate. Your two template f iles should be shown - check the boxes next to each and click Save. Edit the T UT _gallery_index template, go to the URLs tab and switch on Use Page numbers - this will be needed f or pagination. Save and close. Click on Create New T emplate again. T his time go to Create New T emplate without a f ile. Call the template albums. Save. Click on the album template to edit it and go to the Family tab. Open the f ield "Allowed templates f or children" and select the T UT _gallery template. T his template will be used as the parent f or all the albums in the gallery. You will note that this is the same procedure as f or the Simple News System, if you have completed that tutorial. Once you have saved the template, go to Pages and create a new page as a child of Home. Call it albums, select the albums template and save. Now, go to the settings tab and set this page as Hidden. Save and return to Pages. Create a new page as a child of home. Call it Gallery and select the T UT _gallery_index template. Save.
Fields We will only require f our f ields f or this system - two of which already exist in the original Basic tutorial. gallery - this is a standard image f ield gallery_thumbnail_size - this is an integer f ield title - this is the standard title f ield that is already available in ProcessWire article_maintext - this is a T extarea/T inyMCE f ield. If you have not done the previous tutorials, simply use the body f ield and substitute it into the rest of the code.
Galler y Go to Setup > Fields and create a new f ield. Call it gallery and select the image f ield type. Save. Under the details tab, the number of images can either be limited (16 or 20 or something) or lef t as 0 f or any number. However, f or a gallery, it probably should be more than 1! http://wiki.processwire.com/index.php/Simple_Gallery_System
28 / 35
Simple Gallery System - ProcessWire
5/04/13
Under the Input tab, scroll down and set the max width f or 1000 and the height f or 669 (35mm dimensions). Set the description rows f or whatever you like (1 is normally f ine) and select the Show T humbnails checkbox. Save and close.
g aller y_thumbnail_size T his f ield will be used in part of the demo to set the size of the thumbnails as squares. Create a new f ield and call it gallery_thumbnail_size. Select the int type, give it a usef ul Label like T humbnail Size and save. You can set minimum and maximum values f or the f ield - I have used 100 and 300.
Add the fields to the templates Add article_maintext (or the body f ield) to both T UT _gallery_index and T UT _gallery. Add the gallery f ield and gallery_thumbnail_size to the T UT _gallery template. T hat is all that will be required f or this system to work.
Creating Content Bef ore moving onto the template f iles and the f unctions, creating content will give something to work with. Go to the Gallery page you created earlier and go into edit. T here are only two f ields available here - title, which is already completed, and article_maintext (or body if you are using that). In article_maintext, just add a f ew lines to introduce your overall gallery, then save. Now go to the hidden "albums" page you created earlier and create a new child page. T his new page should have the T UT _gallery template already since we set that up by limiting which template the children of the albums page can use. Give the new page a title and save. T hen add some introductory text and a selection of images - say around 12. Keep the introductory text short as f or simplicity we are using this text both on the main album page and on the gallery listing page. Finish by entering a width into the thumbnail width box 150, perhaps. Save this page and close. If you wished, you could add several albums, but http://wiki.processwire.com/index.php/Simple_Gallery_System
29 / 35
Simple Gallery System - ProcessWire
5/04/13
one will be enough f or the moment.
The Functions T he f unctions f or the gallery will all be coded into T UT _gallery_f unctions.inc. T hey are: inf oDisplay() - this is just the intro text and title of the album albumGrid() - this will just be a grid or list of thumbnails albumShow() - T his is the slide show with carousel using the same images albumList() - this is the list of albums that is shown on the gallery index page.
Function albumList() I will start with the albumList() f unction. If you have completed the Simple News System tutorial, this f unciton should look very f amiliar to you as I wrote a similar f unction f or listing the news articles. Actually, all I have done here is to remove the category ref erences and changed the name of the variables to better suit out purposes here. T here is another dif f erence that should be noted, however. With the news system, I used the T humbnail module, the cropimage f ield type. Here I have used the normal image f ield, do rather than f etch a thumbnail, I have specif ied a size(280). T his will create a cached version of the image to the size specif ied. Here is the code.
1. function albumList(){ 2. 3. // Get the list of albums - limited to ten for later pagination 4. 5. $albums = wire("pages")->find("parent=/albums/, template=TUT_gallery, 6. 7. $out =" "; 8. 9. //Loop through the pages 10. 11. foreach($albums as $album){ 12. $out .="<div class='clearfix'>"; 13. if($album->gallery){ 14. $out .="<img class='align_left' src='{$album->gallery->first()->siz 15. } 16. $out .="<a href='{$album->url}'><h3>{$album->title}</h3></a>"; 17. $out .="<p>{$album->article_maintext}</p>"; 18. $out .="</div>"; 19. 20. } 21. // Pagination 22. 23. $out .="<div class='pagination'>";
T he code is very simple. http://wiki.processwire.com/index.php/Simple_Gallery_System
30 / 35
Simple Gallery System - ProcessWire
T he code is very simple.
5/04/13
We start by using the search expression "f ind" to f ind all pages where the parent is the page albums and the template is T UT _gallery and we are limiting our search to 10. T his limit will be used by the Pager to paginate af ter 10 entries. Having stored our album pages in a variable called $albums, we then iterate through it using a f oreach loop and print out our album titles, f irst image and article_maintext. Note: notice the use of "f irst()" in the <img line. Since our images f ield has several images associated with it, it returns an array (if we had set it to only allow 1 image, it would return that image and not an array). We can use f irst() to return just the f irst image f rom the array, which will suit our purposes here. If you change the order of the images when editing the page, you can change which image will be f irst in the array. Finally, we use the Pager ref erenced to the $albums variable to print out our pagination. Copy the code f rom above and paste it into T UT _gallery_f unctions.inc, remembering to start with <?php!
Function infoDisplay() T his f unction is a tiny f unction that just returns the title and article_maintext f or the top of the album and the gallery index page. It is probably slightly overkill to do this in this way, but it keeps with the theme! All that is happening is that we are getting the title and the article_maintext and wrapping them up in a div. Copy the f ollowing into your T UT _gallery_f untions.inc f ile:
37. function infoDisplay(){ 38. $info = wire("page"); 39. 40. $out =" "; 41. $out .="<h2>{$info->title}</h2>"; 42. $out .=$info->article_maintext; 43. 44. echo "<div class='clearfix'>$out</div>"; 45. }
Function albumGrid() T his f unction simply returns the list of images f rom our gallery, shoves each in a DIV and links a thumbnail to the f ull size image, displayed in a lightbox. For this we are going to use the gallery_thumbnail_size f ield value to dictate how big our thumbnails are. Here is the code: http://wiki.processwire.com/index.php/Simple_Gallery_System
31 / 35
Simple Gallery System - ProcessWire
5/04/13
46. function albumGrid() { 47. $albumimages = wire("page")->gallery; 48. $thumbsize = wire("page")->gallery_thumbnail_size; 49. $out = " "; 50. 51. foreach ($albumimages as $albumimage) { 52. 53. $out .= "<a href='{$albumimage->url}' title='{$albumimage->des 54. $out .= "<img src='{$albumimage->size($thumbsize, $thumbsize 55. $out .= "</a>"; 56. 57. } 58. 59. echo "<div class='albumgrid'>{$out}</div>"; 60. }
First of all we get the array in our gallery f ield and put it into a variable called $albumimages. Next we get the value of our thumbnail size and put it into a variable called $thumbsize. Af ter that we loop through the array, outputting the images and f inish by wrapping it all up in a div. Notice that on the <img> line, we are using our $thumbsize variable to dictate the size of the thumbnail. It is written twice f or width and height - so these thumbnails will be square. Also, in the <a> tag that wraps around the image, I have added the class "colorbox" and the rel attribute with a value of group. T his is f or the colorbox lightbox plugin f rom Jack Moore which we will initialise later in T UT .js. I have also returned the description part of the image f or the "title" attribute - if you f ill in descriptions f or the images, they will appear on the modal. Paste the above code into T UT _gallery_f unctions.inc
Function albumShow() T his last f unction is f or displaying the image array in a slideshow with accompanying carousel. T his is using the Flexslider 2 plugin f rom Woo T hemes. T his f unction has two main parts - the slideshow and the carousel. In addition, we are using the description f rom the images underneath the slideshow. Here is the code:
61. function albumShow() { 62. 63. $albumimages = wire("page")->gallery; 64. $thumbsize = wire("page")->gallery_thumbail_size; 65. 66. $out =" ";
http://wiki.processwire.com/index.php/Simple_Gallery_System
32 / 35
Simple Gallery System - ProcessWire
5/04/13
67. // Slides 68. $out .="<div id='gallery-slider' class='flexslider'><ul class='slides 69. foreach ($albumimages as $albumimage) { 70. $out .="<li>"; 71. $out .="<img src='{$albumimage->url}'>"; 72. $out .="<div class='gallery-caption'>{$albumimage->description} 73. $out .="</li>"; 74. } 75. $out .="</ul></div>"; 76. // Carousel 77. $out .="<div id='gallery-carousel' class='flexslider'><ul class='slid 78. foreach ($albumimages as $albumimage) { 79. $out .="<li>"; 80. $out .="<img src='{$albumimage->size($thumbsize, $thumbsize)->url}'> 81. $out .="</li>"; 82. } 83. $out .="</ul></div>"; As with84. the grid, we f irst get the images array and the value f rom the echo $out; thumbnail 85. size } f ield.
We run two loops, once f or the slides and one f or the carousel. T he DIV id's and classes are important here as they relate directly to the JQuery we will use shortly. Aside f rom the f act that these use unordered lists, these loops are pretty much the same as used f or the grid f unction. Paste this code into the T UT _gallery_f unctions.inc f ile and save it.
Adding functions to the Template Files All that remains is to add the f unctions to the two template f iles.
TUT_g allery_index.php Open the gallery index php f ile and add two f unctions - inf oDisplay() and albumList(). Your f inal f ile should look like this:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14.
<?php include("./TUT_header.inc"); include("./TUT_gallery_functions.inc"); // Give the news index page a title an a bit of an intro infoDisplay(); // Render the Album List albumList(); include("./TUT_footer.inc");
We have included the header, then the f unctions f ile, added the two f unctions http://wiki.processwire.com/index.php/Simple_Gallery_System
33 / 35
Simple Gallery System - ProcessWire
5/04/13
and then the f ooter. Save the f ile.
TUT_g allery.php For the hell of it, we will put both the grid display of the album images and the Slideshow with carousel all on the same page - just so we know it works.
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16.
<?php include("./TUT_header.inc"); include("./TUT_gallery_functions.inc"); // Output the albumDisplay function infoDisplay(); // Out put the album grid albumGrid(); albumShow(); include("./TUT_footer.inc");
As you can see, it looks pretty much like the gallery index f ile. T his is one of the advantages of using f unctions in this way - the template f iles are very much simplif ied, basically sticking with the major structural layout of the page or site, while the f unctions take care of the logic and minutiae.
JQuery and Finishing T hat is more or less that. However, the two JQuery plugins that are being used need to be initialised. Open T UT .js and add the f ollowing code:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. http://wiki.processwire.com/index.php/Simple_Gallery_System
jQuery(document).ready(function($){ // Initialize colorbox jQuery('a.colorbox').colorbox({ opacity:0.3 , speed: 500, transition: "elastic", slideshow: false, rel:'group', previous:"<span class='colorboxnav'><</span>", next:"<span class='colorboxnav'>></span>", close:"<span class='colorboxnav'>X</span>", maxHeight: "90%" }) // Flex Slider // The slider being synced must be initialized first $('#gallery-carousel').flexslider({ 34 / 35
Simple Gallery System - ProcessWire
5/04/13
20. animation: "slide", 21. controlNav: false, 22. animationLoop: false, 23. slideshow: false, T he parameters used here are just f ollowing the options that are available on 24. itemWidth: 149, the plugin nothing special 25. sites -itemMargin: 5, has been added. 26. asNavFor: '#gallery-slider' 27.f ile and }); f ire up your website! Save the 28. 29. $('#gallery-slider').flexslider({ With any now have "fade", a working gallery/album system, albeit with rather 30.luck you animation: animationSpeed: 1200, a lot of31. images on the album page! However, I leave it up to you to style this 32. controlNav: false, and decide what you want to use when. 33. animationLoop: false, 34. slideshow: false, For instance, you could"#gallery-carousel" add a check box to the gallery template to be checked 35. sync: 36. to}); if you want use the slideshow. T hen add an if (...) to decide whether the grid 37. or the show is used on a page by page basis. 38. });
A lot is possible, with surprisingly little work!
See Also Basic Website T utorial Simple News System Categories: Draf ts
Long T utorials
This page was last modified on 12 March 2013, at 20:21. This page has been accessed 248 times. Privacy policy
http://wiki.processwire.com/index.php/Simple_Gallery_System
About ProcessWire
Disclaimers
35 / 35