Jump to content

Targetting region and display fields names

Recommended Posts


and one more beginner question: I am using the multi-language site profile and having troubles targeting the region I want to populate in my templates due to delayed output. The list is now appearing on top of the nav bar 🙂 and the values of the fields on one line down the title. I want these fields to be displayed in a list underneath the title of the page, and I also would like the name of the field to be displayed as a string in front of the value... I dont know how to do this. Can someone help?

right now my code looks like this: 

<?php namespace ProcessWire;?>

<!DOCTYPE html>

<li class="Pub-profile-info"><?php $content .=page()->Location?></li>
<li class="Pub-profile-info"><?php $content .=page()->Pub_country?></li>
<li class="Pub-profile-info"><?php $content .=page()->Since?></li>
<li class="Pub-profile-info"><?php $content .=page()->Contact?></li>
<li class="Pub-profile-info"><?php $content .=page()->Focus?></li>
<li class="Pub-profile-info"><?php $content .=page()->Members?></li>
<li class="Pub-profile-info"><?php $content .=page()->Location?></li>
<li class="Pub-profile-info"><?php $content .=page()->Decision_making?></li>
<li class="Pub-profile-info"><?php $content .=page()->Financing?></li>
<li class="Pub-profile-info"><?php $content .=page()->History?></li>
<li class="Pub-profile-info"><?php $content .=page()->images?></li>
<li class="Pub-profile-info"><?php $content .=page()->logo?></li>

and the screen looks like that:

Thanks for helping!

Screenshot from 2019-10-16 11-43-18.png

Share this post

Link to post
Share on other sites


No need to concatenate your output which means no need to use <?php $content .= page()->your field; ?>.

Just do this:

<?php  echo page()->your field; ?>


  • Like 1

Share this post

Link to post
Share on other sites

Hi @Lmwt, welcome to the forum! Did you go through the hello worlds tutorial step by step? BTW: You know there's someone in Vienna that knows ProcessWire quite well and is always willing to help? 😉 

Share this post

Link to post
Share on other sites
3 hours ago, ottogal said:

The <li> elements have to be children of an <ul> element (alternatively of an <ol> element).


... and those have to be children of body, not html :-)

7 hours ago, Lmwt said:

due to delayed output

How do you include this list in your main template? regular include() ? In that case, you don't output anything in that partial, just build a string with PHP that you then echo() in your main template. You should definitely look into some beginner tutorials and docs - templating in PW really isn't hard to grasp. For the above list, you could use PHP's heredoc syntax. btw, for your last two fields you would need slightly more, since these are probably file/image fields (like $page->images->first()->url or whatever you need)

  • Like 1

Share this post

Link to post
Share on other sites

Thanks for all the tips! I will definitely go through these hello world tutos they are super clear.

@ Gideon So If I just go echo page()->your field; then the text is displayed above the nav bar, as shown on the screenshot. @dragan: I shouldn't need to include anything, from what I read on delayed output in the "structure your templates" tutorial. The _main.php template is just appended to the template code and if I add an extra html tag into it, it still gets output above the navbar... maybe there is something to look for in the region(...) method, but I couldn't set it up... (I am a beginner also in php language).

In the meantime I found this way to do it. It's working. The problem is that I can't put the second array between <li> tags because the " ." in  "$content .= $page->get($field->name) . " gets read as a string...so i can't apply any style to it 😕 anyone comes up with a different way to put that?

<?php namespace ProcessWire;?>

<?php  foreach ($page->template->fields as $field) {
    $content .= "<li class='pub-field'>$field->label: <br> </li>";
    $content .= $page->get($field->name) . "<br> <br>"; 


Share this post

Link to post
Share on other sites

Just paste the content of your _main.php file and your ##yourtemplatename##.php file and we can show you what to do 😉 

Share this post

Link to post
Share on other sites

Here is my _main.php code:

<?php namespace ProcessWire;

 * _main.php
 * Main markup file (multi-language)

 * MULTI-LANGUAGE NOTE: Please see the README.txt file
 * This file contains all the main markup for the site and outputs the regions 
 * defined in the initialization (_init.php) file. These regions include: 
 *   $title: The page title/headline 
 *   $content: The markup that appears in the main content/body copy column
 *   $sidebar: The markup that appears in the sidebar column
 * Of course, you can add as many regions as you like, or choose not to use
 * them at all! This _init.php > [template].php > _main.php scheme is just
 * the methodology we chose to use in this particular site profile, and as you
 * dig deeper, you'll find many others ways to do the same thing. 
 * This file is automatically appended to all template files as a result of 
 * $config->appendTemplateFile = '_main.php'; in /site/config.php. 
 * In any given template file, if you do not want this main markup file 
 * included, go in your admin to Setup > Templates > [some-template] > and 
 * click on the "Files" tab. Check the box to "Disable automatic append of
 * file _main.php". You would do this if you wanted to echo markup directly 
 * from your template file or if you were using a template file for some other
 * kind of output like an RSS feed or sitemap.xml, for example. 
?><!DOCTYPE html>
<html lang="<?php echo _x('en', 'de'); ?>">
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title><?php echo $title; ?></title>
	<meta name="description" content="<?php echo $page->summary; ?>" />
	<link rel="preload" href="<?php echo $config->urls->templates?>styles/main.css" as="style">
	<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates?>styles/main.css" />

	// handle output of 'hreflang' link tags for multi-language
	// this is good to do for SEO in helping search engines understand
	// what languages your site is presented in	
	foreach($languages as $language) {
		// if this page is not viewable in the language, skip it
		if(!$page->viewable($language)) continue;
		// get the http URL for this page in the given language
		$url = $page->localHttpUrl($language); 
		// hreflang code for language uses language name from homepage
		$hreflang = $homepage->getLanguageValue($language, 'name'); 
		// output the <link> tag: note that this assumes your language names are the same as required by hreflang. 
		echo "\n\t<link rel='alternate' hreflang='$hreflang' href='$url' />";

<body class="<?php if($sidebar) echo "has-sidebar"; ?>">

	<a href="#main" class="visually-hidden element-focusable bypass-to-main"><?php echo _x('Skip to content', 'bypass'); ?></a>

	<!-- language switcher / navigation -->
	<ul class='languages' role='navigation'><?php
		foreach($languages as $language) {
			if(!$page->viewable($language)) continue; // is page viewable in this language?
			if($language->id == $user->language->id) {
				echo "<li class='current'>";
			} else {
				echo "<li>";
			$url = $page->localUrl($language); 
			$hreflang = $homepage->getLanguageValue($language, 'name'); 
			echo "<a hreflang='$hreflang' href='$url'>$language->title</a></li>";

	<!-- top navigation -->
	<ul class='topnav' role='navigation'><?php
		// top navigation consists of homepage and its visible children
		foreach($homepage->and($homepage->children) as $item) {
			if($item->id == $page->rootParent->id) {
				echo "<li class='current' aria-current='true'><span class='visually-hidden'>" . _x('Current page:', 'navigation') . " </span>";
			} else {
				echo "<li>";
			echo "<a href='$item->url'>$item->title</a></li>";

		// output an "Edit" link if this page happens to be editable by the current user
		if($page->editable()) echo "<li class='edit'><a href='$page->editUrl'>" . __('Edit') . "</a></li>";

<div id="site-headline" >
   <?php echo "<a href='{$config->urls->root}'><h1 id='logo'>{$homepage->headline}</h1></a>"; ?>

	<main id='main'>
		<!-- main content -->
		<div id='content'>
			<h1><?php echo $title; ?></h1>
			<?php echo $content; ?>
		<div id='pubs-ul'></div>

		<!-- sidebar content -->
		<?php if($sidebar): ?>
		<aside id='sidebar'>
			<?php echo $sidebar; ?>
		<?php endif; ?>


	<!-- search engine -->
	<form class='search' action='<?php echo $pages->get('template=search')->url; ?>' method='get'>
		<label for='search' class='visually-hidden'><?php echo _x('Search:', 'label'); ?></label>
		<input type='text' name='q' id='search' placeholder='<?php echo _x('Search', 'placeholder'); ?>' />
		<button type='submit' name='submit' class='visually-hidden'><?php echo _x('Search', 'button'); ?></button>

	<!-- footer -->
	<footer id='footer'>
		<div class="col">
		if($user->isLoggedin()) {
			// if user is logged in, show a logout link
			echo "<a href='{$config->urls->admin}login/logout/'>" . sprintf(__('Logout (%s)'), $user->name) . "</a>";
		} else {
			// if user not logged in, show a login link
			echo "<a href='{$config->urls->admin}'>" . __('Admin Login') . "</a>";
		<address>Kienitzerstr. usw Neukölln, Impressum</address>
		<a href='http://www.fairyfiles.org/en/contact/'><?php echo __('Email: team@fairyfiles.org'); ?></a> &nbsp; / &nbsp; 
    <div class="col">
    Thumbnails here?
    <div class="col">
    	<div class="fb-like-box" data-href="https://de-de.facebook.com/QueeresVerlegen/" data-width="255" data-height="280" data-colorscheme="dark" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>


and here is my publishers.php template code:

<?php namespace ProcessWire;?>

<?php  foreach ($page->template->fields as $field) {
    $content .= "<li class='pub-field'>$field->label: <br> </li>";
    $content .= $page->get($field->name) . "<br> <br>"; 

Thanks A LOT !

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 DV-JF
      Hey all, hope you're feeling well these days!
      Short question: Under "Setup > Templates" it's possible to sort the templates by last modified. Is this possible for fields view to?
      Long explanation:
      Currently I am in the process of programming a reusable template and often have to copy several fields & templates from different PW installations into my "master version".
      Therefore it would be good to see already in the field list when the last modification has taken place.
      Stay healthy & don't forget to wash you hands - many greets!
    • By Lmwt
      Hi forum,
      I have this list of fields with labels and I want to skip the displaying of labels for fields left empty (e.g. if field "logo" is not filled with an image, but it could also be text fields). Using count() and "continue" will always output either nothing or all labels.
      Is there a way to use the "skipLabel" method in the loop?
      foreach ($page->template->fields as $field) { if(!count($page->$field->logo)) {continue;} else { $etikette = $field->getLabel(); //get label in the current user language $content .= " <br><li class='pub-field'>$etikette<br> </li>"; //display labels as li $content .= $page->get($field->name) . "<br>"; // display values as li } } Thanks for your help!
    • By louisstephens
      So I was tinkering around with the "select fields" field type and added it to a repeater. My thoughts were I could have a user select a field (textarea, text, etc etc) that I defined and give it a name (another field in the repeater) and create their own form on the page. To be honest, I am now a little lost with rendering the form and mailing the results as potentially the form will be unique and custom every time.  The only way I know to handle the output is by going about it this way:
      $forms = $page->form_select_fields; foreach($forms as $form) { if($form->name === "form_input") { //output input with custom name } elseif($form->name === "form_textarea") { //output input with custom name } } Is there a better way to go about rendering the elements from the repeater? As far as the custom sending goes, I am really at a loss since it would be pretty dynamic. Has anyone used this type of approach, and if so, how did you handle this without going insane?
    • By NorbertH
      I have trouble exporting fields via the buildin export. 
      For example when i export a single field  i get:
      { "bestellung_status_name": { "id": 194, "type": "FieldtypeText", "flags": 0, "name": "bestellung_status_name", "label": "Status Intern", "textformatters": [ "TextformatterEntities" ], "collapsed": 0, "minlength": 0, "maxlength": 100, "showCount": 0, "size": 0, "pattern": "[a-z\\A-Z\\(\\)]+", "showIf": "", "themeInputSize": "", "themeInputWidth": "", "themeOffset": "", "themeBorder": "", "themeColor": "", "themeBlank": "", "columnWidth": 100, "required": "", "requiredAttr": "", "requiredIf": "", "stripTags": "", "placeholder": "" } } exporting a secon single field i get :
      { "bestellung_status_name_ext": { "id": 195, "type": "FieldtypeText", "flags": 0, "name": "bestellung_status_name_ext", "label": "Status Extern", "textformatters": [ "TextformatterEntities" ], "collapsed": 0, "minlength": 0, "maxlength": 100, "showCount": 0, "size": 0, "pattern": "[a-z\\A-Z\\(\\)]+", "showIf": "", "themeInputSize": "", "themeInputWidth": "", "themeOffset": "", "themeBorder": "", "themeColor": "", "themeBlank": "", "columnWidth": 100, "required": "", "requiredAttr": "", "requiredIf": "", "stripTags": "", "placeholder": "" } } So far everything works fine .
      When i try to export both fields together  i get only an error message :
      Call to a member function getModuleInfo() on null File: .../wire/modules/Fieldtype/FieldtypeText.module:171 I added " bd($textformatter);" on line 170 to see whats wrong. so have a look at the screenshot i apended to this post.
      Its perfectly possible that one textformater module got removed by accident while experimenting whith some textformaters but my question is how to fix this maybe somewhere in the DB and possibly what went wrong?
      ProcessWire 3.0.120 © 2019
      Apache/2.4.25 (FreeBSD) OpenSSL/1.0.2k mod_fcgid/2.3.9
      PHP 7.1.2

      Edit: After adding
      if ($textformatter ===NULL) continue; I can export my fields , as there arent any Textformater missing in the fields , i get a perfect result. but still there is one textformater whith a NULL value.  
    • By MoritzLost
      This will be more of a quick tip, and maybe obvious to many of you, but it's a technique I found very useful when building display options. By display options I mean fields that control how parts of the page are displayed on the frontend, for example background colors, sizing, spacing and alignment of certain elements. I'll also touch on how to make those options intuitive and comfortable to use for clients.
      It basically involves setting up option values that can be used directly in CSS classes or as HTML elements and mapping those to CSS styling (which can be quickly generated in a couple of lines using a pre-processor such as SASS). Another important aspect is to keep the option values seperate from their corresponding labels; the former can be technical, the latter should be semantically meaningful. The field type that lends itself to this this seperation of concerns is the Selectable Options field, the following examples mostly use this field type. Note that this module is part of the ProcessWire core, but not installed by default.
      The following examples all come from real projects I built (though some are slightly modified to better demonstrate the principle).
      #1: Headline levels & semantics
      For a project that had many pages with long texts, I used a Repeater field to represent sections of text. Each section has a headline. Those sections may have a hierarchical order, so I used a Selectable Option field to allow setting the headline level for each section (you can guess where this is going). The definition of the options looks something like this (those are all in the format value|label, with each line representing one option, see the blogpost above for details):
      h2|Section headline h3|Sub-section headline Of course, the PHP code that generates the corresponding HTML can use those values :
      // "sections" is the repeater field foreach ($page->sections as $section) { // create an h2 / h3 tag depending on the selected option (called headline_level here) echo "<{$section->headline_level->value}>{$section->headline}</{$section->headline_level->value}>"; echo $section->body; } That's a pretty obvious example, but there are two important takeaways:
      I only used two options. Just because there are six levels of headlines in HTML, doesn't mean those are all relevant to the client. The less options there are, the easier it is to understand them, so only the options that are relevant should be provided. In this case, the client had provided detailed, structured documents containing his articles, so I could determine how many levels of hierarchy were actually needed. I also started at h2, since there should be only one h1 per page, so that became it's own field separate from the repeater. The two options have a label that is semantically relevant to the client. It's much easier for a client who doesn't know anything about HTML to understand the options "Section headline" and "Sub-section headline" than "h2" and "h3". Sure, it can be cleared up in the field description, but this way it goes from something that's quickly explained to something that needs no explanation at all. #2: Image width and SASS
      In the same project, there was also an image section; in our layout, some images spanned the entire width of the text body, others only half of it. So again, I created an options field:
      50|Half width 100|Full width In this case, I expected the client to request different sizes at some point, so I wanted it to be extensible. Of course, the values could be used to generate inline styles, but that's not a very clean solution (since inline styled break the cascade, and it's not semantic as HTML should be). Instead, I used it to create a class (admittedly, this isn't strictly semantic as well):
      <img src="..." class="w-<?= $section->image_width->value ?>"> With pure CSS, the amount of code needed to write out those class definitions will increase linearly with the number of options. In SASS however, you only need a couple of lines:
      @each $width in (50, 100) { .w-#{$width}{ max-width: percentage($width/100); } } This way, if you ever need to add other options like 25% or 75%, you only need to add those numbers to the list in parenthesis and you're done. You can even put the definition of the list in a variable that's defined in a central variables.scss file. Something like this also exists in Bootstrap 4 as a utility, by the way.
      It also becomes easier to modifiy those all at once. For example, if you decide all images should be full-width on mobile, you only need to add that once, no need to throw around !important's or modify multiple CSS definitions (this is also where the inline styles approach would break down) :
      # _variables.scss $image-widths: (25, 50, 75, 100); $breakpoint-mobile: 576px; # _images.scss @import "variables"; @each $width in $image-widths { .w-#{$width}{ max-width: percentage($width/100); @media (max-width: $breakpoint-mobile) { max-width: 100%; } } } One important gotcha: It might be tempting to just use an integer field with allowed values between 10 - 100. In fact, the amount of SASS code would be identical with a @for-directive to loop throuh the numbers. But that's exactly what makes point-and-click page builders so terrible for clients: too many options. No client wants to manually set numerical values for size, position and margins for each and every element (looking at you, Visual Composer). In fact, having too many options makes it much harder to create a consistent layout. So in those cases, less is more.
      #3: Multiple options in one field
      Another example for repeatable page sections, this time for a two-column layout. The design included multiple variants regarding column-span and alignment. Using a 12-column grid, we needed a 6-6 split, a centered 5-5 split, a left-aligned 6-4 split and a right-aligned 4-6 split. I didn't want to litter the repeater items with options, so I decided to put both settings in one field (called something like Column layout) :
      center_6_6|6 / 6 (Centered) center_5_5|5 / 5 (Centered) left_6_4|6 / 4 (Left-aligned) right_4_6|4 / 6 (Right-aligned) As long as the value format is consistent, the individual options can be quickly extracted and applied in PHP:
      [$alignment, $width['left'], $width['right']] = explode('_', $section->column_layout->value); echo '<section class="row justify-content-' . $alignment . '">'; foreach (['left', 'right'] as $side) { echo '<div class="col-lg-' . $width[$side] . '">'; echo $section->get("body_{$side}"); echo '</div>'; } echo '</section>'; If you don't recognize the syntax in the first line, it's symmetric array destructuring, introduced in PHP 7.1. For older versions you can use list() instead. This example uses Bootstrap 4 grid classes and flexbox utility classes for alignment. The corresponding CSS can be quickly generated in SASS as well, check the Bootstrap source code for a pointer.
      Again, I'm limiting the options to what is actually needed, while keeping it extensible. With this format, I can easily add other column layouts without having to touch the code at all.
      #4: Sorting page elements
      A final example. In this case I was working on a template for reference projects that had three main content sections in the frontend: A project description, an image gallery and embedded videos (each using their own set of fields). The client requested an option to change the order in which those sections appeared on the page. Had I known this earlier, I maybe would have gone for a Repeater Matrix approach once again, but that would have required restructuring all the fields (and the corresponding code), so instead I used a Selectable Option field (labelled "Display order"). My approach is similar to the one from the last example:
      body_gallery_embeds|Description - Gallery - Videos body_embeds_gallery|Description - Videos - Gallery gallery_body_embeds|Gallery - Description - Videos gallery_embeds_body|Gallery - Videos - Description embeds_body_gallery|Videos - Description - Gallery embeds_gallery_body|Videos - Gallery - Description Since there are six possibilities to sort three items, this is the expected number of options. So I decided to include them all, even though some are probably never going to be used. I also tried to use a predictable order for the options (i.e. the options come in pairs, depending on what element is first). And here is the code used on the frontend:
      // render the template files for each section and store the result in an associative array $contents = [ 'body' => wireRenderFile('partials/_section-body.php', $page), 'gallery' => wireRenderFile('partials/_section-gallery.php', $page), 'embeds' => wireRenderFile('partials/_section-embeds.php', $page), ]; // e.g. 'gallery_body_embeds' => ['gallery', 'body', 'embeds']; $order = explode('_', $page->display_order->value); // echo the contents in the order defined by the option value foreach ($order as $item) { echo $contents[$item]; } You can see how it will be easy to add an additional section and integrate it into the existing solution. Though a fourth item would result in 4! = 24 possibilities to sort them, so at that point I'd talk to my client about which layouts they actually need 🙂
      I always try to keep my code and the interfaces I create with ProcessWire extensible and intuitive. Those are a couple of solutions I came up with for projects at work. They are certainly not the only approach, and there is nothing super special about those examples, but I found that putting a little more effort into defining options with meaningful labels and using option values that I can use directly in my templates makes the result less verbose and more maintainable. Some or most of this tutorial may be immediately obvious to you, but if you made it this far, hopefully you got something out of it 🙂
      Feel free to share your own methods to create display options, or how you would've approached those problems differently. Thanks for reading!
  • Create New...