Jump to content

Repeating and grouping fields for team page


electricarts
 Share

Recommended Posts

Hi, 

another stupid question from a PW newbie.  :-[

I'm working on a page which displays team members with some information (name, phone number, ...). For the person who edits these infos later i wanna make it as simple as possible to change the entries. I was trying to use the repeater field for some sort of grouping the infos for the several team members in the backend. This works like expected.

But how to display the entries in the frontend? There i need the separate fields (name, number ...) to be able to do a formatting. Is there another way of grouping the fields in the backend, but access the individual fields for displaying in the frontend?

Mario

Link to comment
Share on other sites

If you have team members in a repeater called, say, team, they would be accessible through the API via a foreach(). Something like this-

<dl>
<?php
foreach($page->team as $member){
    echo "<dt>$member->name</dt>";
    echo "<dd>$member->phone</dd>";
}
?>
</dt>

Note the bonus suggestion of using a definition list:P

  • Like 2
Link to comment
Share on other sites

Thanks for your reply, DaveP! That works for a simple HTML structure. And thanks for the suggestion.  :rolleyes:

But do i have to use array_slice to distribute the fields for a encapsulated HTML structure? I have a structure like this:

	<div id="g-wertich" class="uk-modal">
			<div class="uk-modal-dialog">
				<a class="uk-modal-close uk-close"></a>
				<div class="uk-modal-header">
					<h2>Name-Field</h2>
					<img class="uk-thumbnail uk-border-circle team-detail" src="<?php echo $config->urls->templates?>layout_images/g.suhr.jpg" width="100" height="100" alt="$image->description" alt="">
				</div>
				<h3>Aufgabenbereiche</h3>
				<ul class="modal-list">
					Responsible-Field
				</ul>
				<h3>Kontakt</h3>
				<p class="bezeichnung"><span><i class="uk-icon-phone uk-icon-justify"></i></span>Phone-Field</p>
				<p class="bezeichnung"><span><i class="uk-icon-mobile uk-icon-justify"></i></span>Mobile-Field</p>
				<p class="bezeichnung"><span><i class="uk-icon-envelope uk-icon-justify"></i></span><a href="mailto:Mailaddress-Field"> E-Mail senden</a></p>
				<h3>Hobbies</h3>
				<ul class="modal-list">
					Hobbys-Field
				</ul>
				<h3>Motto</h3>
				<blockquote>
					<p><i class="uk-icon-quote-left uk-icon-large uk-icon-left"></i>Blockquote-Field</p>
				</blockquote>
			</div>
		</div>

I need to insert the foreach items as "Name-Field", "Responsible-Field" and so on. So my understanding is, that i have to "split" the array, right?

Mario

Link to comment
Share on other sites

So if I understand correctly, you are going to have each team member listed as a link, bringing up a modal like the code above, when the link is clicked?

Which means you need that code foreach team member. (See what I did there?)

<?php foreach($page->team as $member): ?>
<div id="g-wertich" class="uk-modal">
    <div class="uk-modal-dialog">
	<a class="uk-modal-close uk-close"></a>
	<div class="uk-modal-header">
		<h2><?=$member->name?></h2>
		<img class="uk-thumbnail uk-border-circle team-detail" src="<?php echo $config->urls->templates?>layout_images/g.suhr.jpg" width="100" height="100" alt="$image->description" alt="">
	</div>
	<h3>Aufgabenbereiche</h3>
	<ul class="modal-list">
		<?php foreach($member->tasks as $task){
                echo "<li>$task->description</li>";
                } ?>
	</ul>
	<h3>Kontakt</h3>
	<p class="bezeichnung"><span><i class="uk-icon-phone uk-icon-justify"></i></span><?=$member->phone?></p>
	<p class="bezeichnung"><span><i class="uk-icon-mobile uk-icon-justify"></i></span><?=$member->mobile?></p>
	<p class="bezeichnung"><span><i class="uk-icon-envelope uk-icon-justify"></i></span><a href="mailto:<?=$member->email?>"> E-Mail senden</a></p>
	<h3>Hobbies</h3>
	<ul class="modal-list">
		// Similar to tasks
	</ul>
	<h3>Motto</h3>
	<blockquote>
		<p><i class="uk-icon-quote-left uk-icon-large uk-icon-left"></i><?=$member->quote?></p>
	</blockquote>
    </div>
</div>
<?php endforeach; ?>

I've guessed at tasks (which was a machine translation - it might be 'responsibilities' or something) and Hobbies being something that can be iterated over.

Couple of things to note -

  1. The whole code block for the modal is wrapped in our foreach() using the alternative syntax.
  2. I have used short echo statements - like <?=$foo?> - which have been standard since PHP 5.4.0. (Sometimes known around here as PW's templating language.)

Hope I haven't made too many assumptions and that you don't know all this stuff already.

  • Like 2
Link to comment
Share on other sites

Today i learn more about PHP than in the complete last month. Thanks for your patience! In the meantime i had a working modal for one team member. But then i realized that i need separate entries for many team members. Every team member has a name and a phone number. 

So i tried your code, but it doesn't work. First, could it be that instead of 

<?=$member0>name?>

 it should be 

<?=$member->name?>

? Then there is a error: 

Parse Error: syntax error, unexpected '<' (line 108 of /Users/mario/Sites/marios-imac.local:5757/site/templates/team.php) 

which is the 

</ul>

. I think i've to learn more PHP because i don't understand the first line of your code. The colon is a replacement for the opening brace. But why it's followed by 

?>

which means end of the block?

Link to comment
Share on other sites

These are doing the same just with different syntax:

<?php
foreach($array as $item){
  echo "<h1>test</h1>";
}
?>

<?php foreach($array as $item) : ?>
<h1>test</h1>
<?php endforeach; ?>

The ?> does only convey that the following code is not php code anymore. It does not end anything else.

  • Like 1
Link to comment
Share on other sites

If I'm not wrong...

<?php foreach($page->team as $member): ?>

goes hand in hand with

<?php endforeach; ?>

and allows you to put html code between them, without needing to echo it for instance.

It could be that here

<ul class="modal-list">
		<?php foreach($member->tasks as $task){
                echo "<li>$task->description</li>";
                }
	</ul>

?> is missing between  } and </ul>. Or that you have to remove <?php

NB: I could be wrong, I'm a beginner at PHP...

  • Like 2
Link to comment
Share on other sites

<?=$member0>name?>

 it should be 

<?=$member->name?>

Absolutely right - a typo on my part, which I have corrected above.

Christophe is right about the < error, too - I've put that right, also.

I think the main point of my example is that you can 'mix' PHP and HTML on the page, and it doesn't have to be 'all' PHP. Essentially, the PHP interpretor looks for anything after a <?php (or a <?= which is a shorthand for <?php echo) and will keep trying to process it until it reaches a ?>. Then it hands over to Apache or NGINX, to serve the result to the browser. (Vastly simplified.)

That's where the error Christophe found comes from - because I had missed the closing ?> the PHP interpreter was still trying to make sense of the HTML (</ul>) following what should have been my closing ?>, had I not missed it.

So we can use 

<?php foreach($page->team as $member): ?> 

then do all sorts of things including other bits of PHP, before

<?php endforeach; ?> 

tells PHP that it has reached the end of the loop. If there are 6 team members, PHP will go through the code between those tags once for each (foreach, geddit?) team member.

Perhaps it helps to thing of two 'different' ways of using PHP (bear with me, I'm grossly generalising). One is the 'programming' way, where everything or nearly everything on the page is pure PHP code. (Many of the files in PW's core, for example.) The other is 'PHP as a template language' where most of the page is HTML and a little bit of PHP adds functionality, like the big example above.

  • Like 2
Link to comment
Share on other sites

Thanks for all your help, guys! Ok, i understand the different syntax now. But what i don't understand is the encapsulated structure when working with foreach in PHP. 

In PW i have a field "Teammitglieder" which is the repeater field. It contains the other fields like "Team_Name" or "Team_Hobbies". The first foreach loop 

($page->Teammitglieder as $member): ?>

goes thru the repeater field. For my understanding something like a container (comparable to a div in CSS), right? But now my problem begins.  ???  How do i select the name and "echo" the content of the field "Name"? 

$member->Team_Name

works but is only usable with just one team member. How can i select the right field (the appropriate name of that member)? How can i "extract" all the member infos and insert the right ones at the right place in the HTML? I mean i have 6 div's (with all the HTML for the modal inside). One div for every member. How will the right name of the 3rd member (3rd repeater field in PW backend) be inserted an the right place (3rd div in the team template). 

Maybe it would be easier and more logical to give every team member a site and get the entries in the team template from there?

Link to comment
Share on other sites

Everything inside the foreach loop will be repeatedly parsed for the number of elements $page->Teammitglieder does have. The $member variable will for each cycle be populated with the corresponsing item from $page->Teammitglieder. E.g. first cycle - first member, second cycle - second member, … Therefore will $member->Team_Name will be different for each of those cycles.

Link to comment
Share on other sites

Ok, i thought that something went wrong because when i use that simple example

<?php foreach($page->Teammitglieder as $member): ?>
			<div id="g-godany" class="uk-modal">
				<div class="uk-modal-dialog">
					<a class="uk-modal-close uk-close"></a>
					<div class="uk-modal-header">
						<h2><?=$member->name?></h2>
						<img class="uk-thumbnail uk-border-circle team-detail" src="<?php echo $config->urls->templates?>layout_images/g.godany.jpg" width="100" height="100" alt="$image->description" alt="">
					</div>
				</div>
			</div>
		<?php endforeach; ?>

in the frontend i see just "1461499306-79-1" instead of the name in the <h2>. Is this foreach loop correct? 

 
Link to comment
Share on other sites

Ahh, i see. But my main problem of understanding is still there. This code below now works for one member. 

<?php foreach($page->Teammitglieder as $member): ?>
			<div id="g-suhr" class="uk-modal">
				<div class="uk-modal-dialog">
					<a class="uk-modal-close uk-close"></a>
					<div class="uk-modal-header">
						<h2><?=$member->Team_Name?></h2>
						<img class="uk-thumbnail uk-border-circle team-detail" src="<?php echo $config->urls->templates?>layout_images/g.wertich.jpg" width="100" height="100" alt="$image->description" alt="">
					</div>
				</div>
			</div>
		<?php endforeach; ?>

What do i have to do for the rest of the members? I can't copy this block for the next member, because the name would be (of course) the same. 

Link to comment
Share on other sites

If your repeater items do have different names than this code should reflect that and output these different names. But I'm seeing you're using modals. It might be, that you're triggering the same modal over and over, because the id 'g-suhr' is used for all different instances, which is invalid markup. The id does need to be unique.

<?php foreach($page->Teammitglieder as $key => $member) : ?>
<div id="<?php echo 'g-suhr-' . $key; ?>">[…]
<?php endforeach; ?>
Link to comment
Share on other sites

Oh god, i think i'm too dumb for such things.  :-[ Maybe i shouldn't do anything related to PHP in the future and should stick to the design things.  ;)

The id is of course different for all instances. There are two "blocks" on the team member page. This 

div class="uk-grid uk-text-center team-thumbnails">
		<div class="uk-width-1-5 uk-container-center">
			<img class="uk-thumbnail uk-border-circle" data-uk-modal="{target:'#g-wertich'}" src="<?php echo $config->urls->templates?>layout_images/g.wertich.jpg" width="130" height="130" alt="$image->description" alt="">
			<div class="uk-thumbnail-caption">Gisela Wertich</div>
			<a class="more-infos" href="#g-wertich" data-uk-modal>Mehr Infos ...</a>
		</div>
		<div class="uk-width-1-5 uk-container-center">
			<img class="uk-thumbnail uk-border-circle" data-uk-modal="{target:'#g-suhr'}" src="<?php echo $config->urls->templates?>layout_images/g.suhr.jpg" width="130" height="130" alt="$image->description" alt="">
			<div class="uk-thumbnail-caption">Gabi Suhr</div>
			<a class="more-infos" href="#g-suhr" data-uk-modal>Mehr Infos ...</a>
		</div>
</div>

is for displaying member photos in a row (just 2 for this example) with the name underneath and a "Mehr Infos" link. When clicking the link, the appropriate modal comes up. The code for this is

<?php foreach($page->Teammitglieder as $member): ?>
			<div id="g-wertich" class="uk-modal">
				<div class="uk-modal-dialog">
					<a class="uk-modal-close uk-close"></a>
					<div class="uk-modal-header">
						<h2><?=$member->Team_Name?></h2>
						<img class="uk-thumbnail uk-border-circle team-detail" src="<?php echo $config->urls->templates?>layout_images/g.wertich.jpg" width="100" height="100" alt="$image->description" alt="">
					</div>
				</div>
			</div>
		<?php endforeach; ?>

		<?php foreach($page->Teammitglieder as $member): ?>
			<div id="g-suhr" class="uk-modal">
				<div class="uk-modal-dialog">
					<a class="uk-modal-close uk-close"></a>
					<div class="uk-modal-header">
						<h2><?=$member->Team_Name?></h2>
						<img class="uk-thumbnail uk-border-circle team-detail" src="<?php echo $config->urls->templates?>layout_images/g.wertich.jpg" width="100" height="100" alt="$image->description" alt="">
					</div>
				</div>
			</div>
		<?php endforeach; ?>

Here i copied this first (working) foreach block and changed the id. But as i said, this doesn't work and i'm too dumb to understand what i have to do to use this logic to make it work for all team members. 

Link to comment
Share on other sites

No need to duplicate any code here. The foreach is there to run multiple times on it's own.

<div class="uk-grid uk-text-center team-thumbnails">
	<?php foreach($page->Teammitglieder as $member): ?>
		<div class="uk-width-1-5 uk-container-center">
			<img class="uk-thumbnail uk-border-circle" 
				data-uk-modal="{target:'#<?php echo $member->id; ?>'}" 
				src="<?php echo $config->urls->templates?>layout_images/g.wertich.jpg" width="130" height="130" alt="$image->description" alt="">
			<div class="uk-thumbnail-caption"><?php echo $member->Team_Name; ?></div>
			<a class="more-infos" href="#<?php echo $member->id; ?>" data-uk-modal>Mehr Infos ...</a>
		</div>
	<?php endforeach; ?>
</div>
<!-- And later -->
<?php foreach($page->Teammitglieder as $member): ?>
	<div id="<?php echo $member->id; ?>" class="uk-modal">
		<div class="uk-modal-dialog">
			<a class="uk-modal-close uk-close"></a>
			<div class="uk-modal-header">
				<h2><?php echo $member->Team_Name; ?></h2>
				<img class="uk-thumbnail uk-border-circle team-detail" 
					src="<?php echo $config->urls->templates?>layout_images/g.wertich.jpg" 
					width="100" height="100" alt="$image->description" alt="">
			</div>
		</div>
	</div>
<?php endforeach; ?>
  • Like 1
Link to comment
Share on other sites

Yes! Thanks for that! Works like a charm.

One last question before i try to learn the next PHP "thing": How do i deal with the path for the image? I've a image field "Team_Photo" inside of the repeater. The Maximum files setting under the Details Tab is set to 1. 

src="<?php echo $image->url; ?>">

Would be nice for me, but it doesn't work. 

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

×
×
  • Create New...