From 2547b34d74aedda9be369d0268b97be6bc038fef Mon Sep 17 00:00:00 2001 From: ursbraem Date: Sat, 22 Mar 2014 22:53:21 +0100 Subject: [PATCH 01/10] added tutorial on dataselect rendering --- templates/render-dataselect-relations.md | 157 +++++++++++++++++++++++ 1 file changed, 157 insertions(+) create mode 100644 templates/render-dataselect-relations.md diff --git a/templates/render-dataselect-relations.md b/templates/render-dataselect-relations.md new file mode 100644 index 0000000..76621db --- /dev/null +++ b/templates/render-dataselect-relations.md @@ -0,0 +1,157 @@ +Created by: Urs Braem +Created date: 2014-03-22 +Last updated: 2014-03-22 +Authors: Urs Braem +Title: How do I use Perch to manage and render related items? +Tags: templates + +# How do I use Perch to manage and render related items? + +## You want to use Perch to manage relational content items and output fully rendered templates with perch:content. + +In the backend, use the "dataselect" field type (http://docs.grabaperch.com/docs/templates/attributes/type/dataselect/) to refer to other items. + +In the frontend, use the "each" callback function (http://docs.grabaperch.com/docs/content/perch-content-custom/). + +## Example + +Your client is a company that manufactures everything. Ah no. Let's stay real, it's a theatre company that has done a bunch of plays. In our case (we're retrofitting an existing site), each play's entry just consists of a title and a link. + +They have several lists they are now managing with Perch: an event calendar and several statistics. In each list, the plays' titles and links are used. To avoid errors, for convenience etc., we want them to enter the play's details only once. + +Of course, in the rendered template, e.g. the calendar, we then want the link and play title to render based on a template. + +In the example, we'll stick with the event calendar. + +## Define the play template: play.html + +Create a template for a play. Just a regular perch template in perch/templates/content + +``` +"> + + +``` + +Note: don't forget that ID's can't have dashes (play-html) and that tags must always be properly closed or self-closing. + + +## Seize the plays: plays.php + +Create a new page plays.php + +``` + +``` + +Load it in the browser, go to Perch, assign the play.html template to the region, add some plays. + +You also make the region shared (see below). + +## Define an event: event_be.html and event_fe.html + +Now we define the template for the event calendar. + +For the example's sake, let's say it's that basic it only features the play's title, a link and some text (of course, this would have date etc. added). + +Note: I like to divide my templates into frontend and backend templates, so I can move stuff freely for the backend and have less clutter in the already cluttered frontend template. If you do so too, you can also use separate folders for FE and BE templates. + +Of course, you can put everything into one template and hide / suppress fields for the front- and backend. + +So in my case it's: + +event_be.html +``` + + +``` + +Note: if you have set the 'Plays' region to "shared", you have to write set the attribute page="*". + +event_fe.html +``` +
+ + +
+``` + +(I'm pretending HTML5 here to compensate the fact that the page I'm retrofitting is XHTML 0.1.5 or so.) + +Note: The FE template doesn't even need the dataselect field. Instead we give it a field play_html we will fill later. But you have to add encode="false" to achieve proper rendering. + +And: If you add to the FE template, you'll see that the dataselect field only returns it's value. Not the entire template of the linked item. That's why we have to do some more rendering. + +## Put it together: events.php + +On the page events.php, finally, we use the "each" callback of perch_content_custom. + +Use perch_content('Events') to create the region and remove it after you've mapped it to events_be.html. + +Enter some Events in Perch. You will be able to select a play for each entry via the dataselect dropdown, the value being the play's ID. + +Note: I have one remaining issue here: I wasn't able to use the text used as "option" in the dataselect as item title in the Perch Backend. Ugly workaround would be to have editors enter the play's title again manually for better recognition in perch and use that as the item's title. I hope there's a better solution. + +Back in events.php, use perch_content_custom to render not only the events list, but also the referred "play" entry. + +For this, we'll use perch_content_custom's "each" callback to fill the `````` tag from our events_fe.html template. + +``` +perch_content_custom('Events',array( + 'template'=>'events_fe.html', + 'each' => function($item) { + // fill the slot we've prepared in the FE template + $item['play_html'] = perch_content_custom('Plays', array( + // use this as a "sub" template + 'template'=>'play.html', + // perch sees the region only on the page we've put it on, so tell it to look there + // remove if using a shared region + 'page'=>'/plays.php', + // now it would render all items. we don't want all items + // just the one where the play's id + 'filter'=>'_id', + // is equal to + 'match'=>'eq', + // the play's id we've selected in the dataselect + 'value'=>$item['playID'], + // return : true + ),true); + // and return the item to the callback + return $item; + } + )); +``` + +Note: We're using the template for the play item type as a "sub" template for rendering. That's not mandatory, we could also write another custom FE template and use that. + +Note: If it's becoming confusing, I use in the template and in PHP, e.g. after `'each' => function($item) {`: + +echo '
';
+print_r($item);
+echo '
'; + +That's it! The "subtemplate" will be included into the region's main template. + +Here's the desired output: + +``` +
+The play's title +

The play's description

+
+``` + +Now you can use Perch to manage and output all kinds of related data. + + + + + + + + + + + From 2bcc13fceec1ccd14c853f606894176dc6746cf1 Mon Sep 17 00:00:00 2001 From: ursbraem Date: Sat, 22 Mar 2014 22:56:57 +0100 Subject: [PATCH 02/10] hands are typing --- templates/render-dataselect-relations.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/templates/render-dataselect-relations.md b/templates/render-dataselect-relations.md index 76621db..4bcbb85 100644 --- a/templates/render-dataselect-relations.md +++ b/templates/render-dataselect-relations.md @@ -41,9 +41,10 @@ Note: don't forget that ID's can't have dashes (play-html) and that tags must al Create a new page plays.php ``` - + ``` Load it in the browser, go to Perch, assign the play.html template to the region, add some plays. From 15c2d0a59b3695d7f3a779df4923253c5003031d Mon Sep 17 00:00:00 2001 From: ursbraem Date: Sat, 22 Mar 2014 22:58:14 +0100 Subject: [PATCH 03/10] edited formatting --- templates/render-dataselect-relations.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/templates/render-dataselect-relations.md b/templates/render-dataselect-relations.md index 4bcbb85..46b3f5f 100644 --- a/templates/render-dataselect-relations.md +++ b/templates/render-dataselect-relations.md @@ -101,8 +101,8 @@ For this, we'll use perch_content_custom's "each" callback to fill the ```'events_fe.html', - 'each' => function($item) { + 'template'=>'events_fe.html', + 'each' => function($item) { // fill the slot we've prepared in the FE template $item['play_html'] = perch_content_custom('Plays', array( // use this as a "sub" template @@ -129,9 +129,11 @@ Note: We're using the template for the play item type as a "sub" template for re Note: If it's becoming confusing, I use in the template and in PHP, e.g. after `'each' => function($item) {`: +``` echo '
';
 print_r($item);
 echo '
'; +``` That's it! The "subtemplate" will be included into the region's main template. From e3b45a28ba94d157efe7e635d0da7a23e39f4eed Mon Sep 17 00:00:00 2001 From: ursbraem Date: Sat, 22 Mar 2014 23:00:42 +0100 Subject: [PATCH 04/10] edited formatting --- templates/render-dataselect-relations.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/templates/render-dataselect-relations.md b/templates/render-dataselect-relations.md index 46b3f5f..ce1c11c 100644 --- a/templates/render-dataselect-relations.md +++ b/templates/render-dataselect-relations.md @@ -33,7 +33,7 @@ Create a template for a play. Just a regular perch template in perch/templates/c ``` -Note: don't forget that ID's can't have dashes (play-html) and that tags must always be properly closed or self-closing. +> Note: don't forget that ID's can't have dashes (play-html) and that tags must always be properly closed or self-closing. ## Seize the plays: plays.php @@ -57,7 +57,7 @@ Now we define the template for the event calendar. For the example's sake, let's say it's that basic it only features the play's title, a link and some text (of course, this would have date etc. added). -Note: I like to divide my templates into frontend and backend templates, so I can move stuff freely for the backend and have less clutter in the already cluttered frontend template. If you do so too, you can also use separate folders for FE and BE templates. +> Note: I like to divide my templates into frontend and backend templates, so I can move stuff freely for the backend and have less clutter in the already cluttered frontend template. If you do so too, you can also use separate folders for FE and BE templates. Of course, you can put everything into one template and hide / suppress fields for the front- and backend. @@ -69,7 +69,7 @@ event_be.html ``` -Note: if you have set the 'Plays' region to "shared", you have to write set the attribute page="*". +> Note: if you have set the 'Plays' region to "shared", you have to write set the attribute page="*". event_fe.html ``` @@ -79,9 +79,7 @@ event_fe.html ``` -(I'm pretending HTML5 here to compensate the fact that the page I'm retrofitting is XHTML 0.1.5 or so.) - -Note: The FE template doesn't even need the dataselect field. Instead we give it a field play_html we will fill later. But you have to add encode="false" to achieve proper rendering. +> Note: The FE template doesn't even need the dataselect field. Instead we give it a field play_html we will fill later. But you have to add encode="false" to achieve proper rendering. And: If you add to the FE template, you'll see that the dataselect field only returns it's value. Not the entire template of the linked item. That's why we have to do some more rendering. @@ -93,7 +91,7 @@ Use perch_content('Events') to create the region and remove it after you've mapp Enter some Events in Perch. You will be able to select a play for each entry via the dataselect dropdown, the value being the play's ID. -Note: I have one remaining issue here: I wasn't able to use the text used as "option" in the dataselect as item title in the Perch Backend. Ugly workaround would be to have editors enter the play's title again manually for better recognition in perch and use that as the item's title. I hope there's a better solution. +> Note: I have one remaining issue here: I wasn't able to use the text used as "option" in the dataselect as item title in the Perch Backend. Ugly workaround would be to have editors enter the play's title again manually for better recognition in perch and use that as the item's title. I hope there's a better solution. Back in events.php, use perch_content_custom to render not only the events list, but also the referred "play" entry. @@ -125,9 +123,9 @@ perch_content_custom('Events',array( )); ``` -Note: We're using the template for the play item type as a "sub" template for rendering. That's not mandatory, we could also write another custom FE template and use that. +> Note: We're using the template for the play item type as a "sub" template for rendering. That's not mandatory, we could also write another custom FE template and use that. -Note: If it's becoming confusing, I use in the template and in PHP, e.g. after `'each' => function($item) {`: +> Note: If it's becoming confusing, I use in the template and in PHP, e.g. after `'each' => function($item) {`: ``` echo '
';

From 3f3b1af13de92b68d282b507d29200807f409cfa Mon Sep 17 00:00:00 2001
From: ursbraem 
Date: Sat, 22 Mar 2014 23:07:13 +0100
Subject: [PATCH 05/10] added a word

---
 templates/render-dataselect-relations.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/render-dataselect-relations.md b/templates/render-dataselect-relations.md
index ce1c11c..80f9d21 100644
--- a/templates/render-dataselect-relations.md
+++ b/templates/render-dataselect-relations.md
@@ -49,7 +49,7 @@ Create a new page plays.php
 
 Load it in the browser, go to Perch, assign the play.html template to the region, add some plays.
 
-You also make the region shared (see below).
+You can also make the region shared (see below).
 
 ## Define an event: event_be.html and event_fe.html
 

From c70d71e18c9b96fb7abfc715a50e578873bd6b5e Mon Sep 17 00:00:00 2001
From: ursbraem 
Date: Sat, 22 Mar 2014 23:09:31 +0100
Subject: [PATCH 06/10] still formatting

---
 templates/render-dataselect-relations.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/templates/render-dataselect-relations.md b/templates/render-dataselect-relations.md
index 80f9d21..804b096 100644
--- a/templates/render-dataselect-relations.md
+++ b/templates/render-dataselect-relations.md
@@ -57,9 +57,9 @@ Now we define the template for the event calendar.
 
 For the example's sake, let's say it's that basic it only features the play's title, a link and some text (of course, this would have date etc. added).
 
-> Note: I like to divide my templates into frontend and backend templates, so I can move stuff freely for the backend and have less clutter in the already cluttered frontend template. If you do so too, you can also use separate folders for FE and BE templates.
+> Note: I like to divide my templates into frontend and backend templates, so I can move stuff freely for the backend and have less clutter in the already cluttered frontend template. If you do so too, you can also use separate folders for FE and BE templates. 
 
-Of course, you can put everything into one template and hide / suppress fields for the front- and backend.
+> Of course, you can also put everything into one template and hide / suppress fields for the front- and backend.
 
 So in my case it's:
 
@@ -69,7 +69,7 @@ event_be.html
 
 ```
 
-> Note: if you have set the 'Plays' region to "shared", you have to write set the attribute page="*".
+> Note: if you have set the 'Plays' region to "shared", you have to set the attribute ```page="*"```.
 
 event_fe.html
 ```

From aec3a7ddc9a65df4189cd4579df2976c4584c077 Mon Sep 17 00:00:00 2001
From: ursbraem 
Date: Sat, 22 Mar 2014 23:15:28 +0100
Subject: [PATCH 07/10] last edits

---
 templates/render-dataselect-relations.md | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/templates/render-dataselect-relations.md b/templates/render-dataselect-relations.md
index 804b096..7531379 100644
--- a/templates/render-dataselect-relations.md
+++ b/templates/render-dataselect-relations.md
@@ -81,7 +81,7 @@ event_fe.html
 
 > Note: The FE template doesn't even need the dataselect field. Instead we give it a field play_html we will fill later. But you have to add encode="false" to achieve proper rendering.
 
-And: If you add  to the FE template, you'll see that the dataselect field only returns it's value. Not the entire template of the linked item. That's why we have to do some more rendering.
+> And: If you add  to the FE template, you'll see that the dataselect field only returns it's value. Not the entire template of the linked item. That's why we have to do some more rendering.
 
 ## Put it together: events.php
 
@@ -91,7 +91,7 @@ Use perch_content('Events') to create the region and remove it after you've mapp
 
 Enter some Events in Perch. You will be able to select a play for each entry via the dataselect dropdown, the value being the play's ID.
 
-> Note: I have one remaining issue here: I wasn't able to use the text used as "option" in the dataselect as item title in the Perch Backend. Ugly workaround would be to have editors enter the play's title again manually for better recognition in perch and use that as the item's title. I hope there's a better solution. 
+> Note: I have one remaining issue here: I wasn't able to use the text used as "option" in the dataselect as item title in the Perch Backend. An ugly workaround would be to have editors enter the play's title again manually for better recognition in perch and use that as the item's title. I hope there's a better solution. 
 
 Back in events.php, use perch_content_custom to render not only the events list, but also the referred "play" entry.
 
@@ -108,12 +108,12 @@ perch_content_custom('Events',array(
           // perch sees the region only on the page we've put it on, so tell it to look there
           // remove if using a shared region
 		  		'page'=>'/plays.php',
-          // now it would render all items. we don't want all items
-          // just the one where the play's id
+          // now it would render all items. but we don't want all items,
+          // just the one where the play's ID
 		  		'filter'=>'_id',
           // is equal to
 		  		'match'=>'eq',
-          // the play's id we've selected in the dataselect
+          // the ID of the play we've selected in the dataselect
 		  		'value'=>$item['playID'],
 	  			// return : true
           ),true);
@@ -123,14 +123,17 @@ perch_content_custom('Events',array(
 	  	));
 ```
 
-> Note: We're using the template for the play item type as a "sub" template for rendering. That's not mandatory, we could also write another custom FE template and use that.
+> Note: We're using the template for the play item (play.html) type as a "sub" template for rendering. That's not mandatory, we could also write another custom FE template and use that.
 
-> Note: If it's becoming confusing, I use  in the template and in PHP, e.g. after `'each' => function($item) {`:
+> Note: If it's becoming confusing, I use ``````in the template.  And of course, to analyse the output:
 
 ```
+...
+'each' => function($item) {
 echo '
';
 print_r($item);
 echo '
'; +... ``` That's it! The "subtemplate" will be included into the region's main template. From 8ea5f840f1a24725fce729fade0df20bcd4aa95b Mon Sep 17 00:00:00 2001 From: ursbraem Date: Sat, 22 Mar 2014 23:30:06 +0100 Subject: [PATCH 08/10] added workaround for title issue: not using id as identifier --- templates/render-dataselect-relations.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/templates/render-dataselect-relations.md b/templates/render-dataselect-relations.md index 7531379..72a81e3 100644 --- a/templates/render-dataselect-relations.md +++ b/templates/render-dataselect-relations.md @@ -91,7 +91,9 @@ Use perch_content('Events') to create the region and remove it after you've mapp Enter some Events in Perch. You will be able to select a play for each entry via the dataselect dropdown, the value being the play's ID. -> Note: I have one remaining issue here: I wasn't able to use the text used as "option" in the dataselect as item title in the Perch Backend. An ugly workaround would be to have editors enter the play's title again manually for better recognition in perch and use that as the item's title. I hope there's a better solution. +> Note: I have one remaining issue here: I wasn't able to use the text used as "option" in the dataselect as item title in the Perch Backend. A workaround would be to have editors enter the play's title again manually for better recognition in perch and use that as the item's title. I hope there's a better solution. + +> Another, probably not recommendable workaround would be not to use the ID as field value at all: `````` (then you would have to modify perch_content_custom in the last part as well) Back in events.php, use perch_content_custom to render not only the events list, but also the referred "play" entry. From a8993fcf02d3b59d474b39c489986cc5a203616f Mon Sep 17 00:00:00 2001 From: Urs Braem Date: Tue, 2 Sep 2014 21:23:08 +0200 Subject: [PATCH 09/10] Shortened this a lot --- templates/render-dataselect-relations.md | 102 ++++------------------- 1 file changed, 14 insertions(+), 88 deletions(-) diff --git a/templates/render-dataselect-relations.md b/templates/render-dataselect-relations.md index 72a81e3..cdd9b1d 100644 --- a/templates/render-dataselect-relations.md +++ b/templates/render-dataselect-relations.md @@ -15,87 +15,36 @@ In the frontend, use the "each" callback function (http://docs.grabaperch.com/do ## Example -Your client is a company that manufactures everything. Ah no. Let's stay real, it's a theatre company that has done a bunch of plays. In our case (we're retrofitting an existing site), each play's entry just consists of a title and a link. +Your client is a theatre company that has done a bunch of plays. In the website, each play's entry just consists of a title and a link. We will use the data from the plays in an event calendar. -They have several lists they are now managing with Perch: an event calendar and several statistics. In each list, the plays' titles and links are used. To avoid errors, for convenience etc., we want them to enter the play's details only once. +## Add some plays -Of course, in the rendered template, e.g. the calendar, we then want the link and play title to render based on a template. +Create a new page plays.php, create a multi-item region "Plays", e.g. with perch_content_create() and a corresponding perch template. Add a few entries in the backend. -In the example, we'll stick with the event calendar. +## Add some events -## Define the play template: play.html +On another page, events.php, add a multi-item region for events. The template could look like this: -Create a template for a play. Just a regular perch template in perch/templates/content - -``` -"> - - -``` - -> Note: don't forget that ID's can't have dashes (play-html) and that tags must always be properly closed or self-closing. - - -## Seize the plays: plays.php - -Create a new page plays.php - -``` - -``` - -Load it in the browser, go to Perch, assign the play.html template to the region, add some plays. - -You can also make the region shared (see below). - -## Define an event: event_be.html and event_fe.html - -Now we define the template for the event calendar. - -For the example's sake, let's say it's that basic it only features the play's title, a link and some text (of course, this would have date etc. added). - -> Note: I like to divide my templates into frontend and backend templates, so I can move stuff freely for the backend and have less clutter in the already cluttered frontend template. If you do so too, you can also use separate folders for FE and BE templates. - -> Of course, you can also put everything into one template and hide / suppress fields for the front- and backend. - -So in my case it's: - -event_be.html -``` - - -``` - -> Note: if you have set the 'Plays' region to "shared", you have to set the attribute ```page="*"```. - -event_fe.html +event.html ``` +
- +
``` -> Note: The FE template doesn't even need the dataselect field. Instead we give it a field play_html we will fill later. But you have to add encode="false" to achieve proper rendering. - -> And: If you add to the FE template, you'll see that the dataselect field only returns it's value. Not the entire template of the linked item. That's why we have to do some more rendering. - -## Put it together: events.php - -On the page events.php, finally, we use the "each" callback of perch_content_custom. +> Note: if you have set the 'Plays' region to "shared", you have to set the attribute ```page="*"``` instead of ```page="/plays.php"```. -Use perch_content('Events') to create the region and remove it after you've mapped it to events_be.html. +We suppress the dataselect field in the frontend - we will place some content from it into "play_html" later on. Make sure to add encode="false" to achieve proper rendering. -Enter some Events in Perch. You will be able to select a play for each entry via the dataselect dropdown, the value being the play's ID. +Enter some data for the events. You'll already be able to select plays via the dataselect dropdown - without effect in the frontend yet though. -> Note: I have one remaining issue here: I wasn't able to use the text used as "option" in the dataselect as item title in the Perch Backend. A workaround would be to have editors enter the play's title again manually for better recognition in perch and use that as the item's title. I hope there's a better solution. +> Try adding to the FE template. You'll notice that the dataselect field only returns it's value. Not the entire template of the linked item. That's why we have to do some more rendering. -> Another, probably not recommendable workaround would be not to use the ID as field value at all: `````` (then you would have to modify perch_content_custom in the last part as well) +## Render the whole template -Back in events.php, use perch_content_custom to render not only the events list, but also the referred "play" entry. +Finally, we use the "each" callback of perch_content_custom to render the whole, referenced "play" template. For this, we'll use perch_content_custom's "each" callback to fill the `````` tag from our events_fe.html template. @@ -125,18 +74,6 @@ perch_content_custom('Events',array( )); ``` -> Note: We're using the template for the play item (play.html) type as a "sub" template for rendering. That's not mandatory, we could also write another custom FE template and use that. - -> Note: If it's becoming confusing, I use ``````in the template. And of course, to analyse the output: - -``` -... -'each' => function($item) { -echo '
';
-print_r($item);
-echo '
'; -... -``` That's it! The "subtemplate" will be included into the region's main template. @@ -150,14 +87,3 @@ Here's the desired output: ``` Now you can use Perch to manage and output all kinds of related data. - - - - - - - - - - - From 32422414b25e0eb66bce49aa64cef23d2341f6e5 Mon Sep 17 00:00:00 2001 From: Urs Braem Date: Tue, 2 Sep 2014 22:29:31 +0200 Subject: [PATCH 10/10] Added variant for use with repeaters --- templates/render-dataselect-relations.md | 39 ++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/templates/render-dataselect-relations.md b/templates/render-dataselect-relations.md index cdd9b1d..11bdd22 100644 --- a/templates/render-dataselect-relations.md +++ b/templates/render-dataselect-relations.md @@ -87,3 +87,42 @@ Here's the desired output: ``` Now you can use Perch to manage and output all kinds of related data. + +# Addition: Render repeating regions + +When working with repeating regions, the above won't work. It's fairly easy to do, though. + +``` + + + + +``` + +> Note that the rendered perch tag is outside the repeater. + +and the php: when parsing the callback, simply loop through the repeaters: + +``` +perch_content_custom('Case Studies',array( + 'template'=>'data/casestudy.html', + 'page' => '/data.php', + 'filter' => 'hide', + 'match' => 'neq', + 'value' => 'false', + 'each' => function($item) { + $item['project_html'] = ''; + foreach($item['projects'] as $itemRepeater){ + $item['project_html'] .= perch_content_custom('Projects', array( + 'template'=>'data/project.html', + 'page'=>'/data.php', + 'filter'=>'_id', + 'match'=>'eq', + 'value'=>$itemRepeater['projectID'], + // return : true + ),true); + } + return $item; + } +)); +```