From 270ebecf6ebe3171fcebc0bd33f6796f97cece26 Mon Sep 17 00:00:00 2001 From: Amigo <49749100+aamigo@users.noreply.github.com> Date: Thu, 15 Aug 2019 16:44:17 +0200 Subject: [PATCH] Updated 017 Layout Setup (markdown) --- 017-Layout-Setup.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/017-Layout-Setup.md b/017-Layout-Setup.md index f0ead57..ea11348 100644 --- a/017-Layout-Setup.md +++ b/017-Layout-Setup.md @@ -11,25 +11,25 @@ With setting up layouts there are some nice ways to reuse code across multiple t [00:00:34](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m34s) -I've added a little string in the dynamic get since each dynamic get targets only a specific site view. Open sermon (preacher.id) which would primarily be used in preacher side view. Look at the custom script, where I added a view key called preacher. Since this dynamic get is only used in the preacher view, when the layout is called and you in your component, you'd only pass one item, not the whole list of items. [00:00:59](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m59s) This specific item calls from preacher, on which basis you can do a certain implementation to ensure that the layout displays the way you expected. [00:01:24](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m24s) +I've added a little string in the dynamic get since each dynamic get targets only a specific site view. Open sermon (preacher.id) which would primarily be used in preacher side view. Look at the custom script, where I added a view key called Preacher. Since this dynamic get is only used in the preacher view, when the layout is called and you in your component, you'd only pass one item, not the whole list of items. [00:00:59](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h00m59s) This specific item calls from Preacher, on which basis you can do a certain implementation to ensure that the layout displays the way you expected. [00:01:24](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m24s) ### How Templates Call Layouts [00:01:39](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m39s) -Open the template that calls the layout. We want to see the initial setup. One of the templates that illustrates this well is the sermon list. [00:01:54](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m54s) Open sermon list where you'd see that I'm looping through the items then adding some parameters to the item object. One of them is the params, the other takes the description, making sure that it's escaped and no longer than 90 characters. [00:02:26](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m26s) I add that back to the description without the full name, then add the item to the 'JlayoutHelper::render(study class render)(sermonlist item)' as the layout name which will populate the script between the list items that will be placed in an unordered list on the sermon list page. [00:02:46](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m46s) +Open the template that calls the layout. We want to see the initial setup. One of the templates that illustrate this well is the sermon list. [00:01:54](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h01m54s) Open sermon list where you'd see that I'm looping through the items then adding some parameters to the item object. One of them is the params, the other takes the description, making sure that it's escaped and no longer than 90 characters. [00:02:26](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m26s) I add that back to the description without the full name, then add the item to the 'JlayoutHelper::render(study class render)(sermonlist item)' as the layout name which will populate the script between the list items that will be placed in an unordered list on the sermon list page. [00:02:46](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h02m46s) ### Sermon List - Item Layout [00:03:08](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m08s) -Let's look at this specific layout: 'JlayoutHelper::render(study class render)(sermonlist item)'. Look for sermon list item in layouts. In sermon list item you will see that I'm using the global; the item being passed is placed inside the displayed data. Display data is the item object. [00:03:43](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m43s) Since the parameters are placed in it, you can use the get method with the specific global field name, set in the components global settings. +Let's look at this specific layout: 'JlayoutHelper::render(study class render)(sermonlist item)'. Look for Sermon list item in layouts. In sermon list item you will see that I'm using the global; the item being passed is placed inside the displayed data. Display data is the item object. [00:03:43](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m43s) Since the parameters are placed in it, you can use the get method with the specific global field name, set in the components global settings. ### Using The View Key [00:03:56](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h03m56s) -Since I'm targeting a specific view, I use the view key, adding it to the string, checking the value for this specific view in the global of the component. [00:04:02](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m02s) On that basis I'm able to make this view dynamic; and can use it through multiple layouts based on that view key. If others want to use the layout in their components extending this one might not work too well, but since we use it for our own component and implementation, it's not too big of a deal. [00:04:31](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m31s) At the same token I am able to check what the view key is. Is it preacher, series, or category? On that basis I ask different questions and have different implementation of certain values like series name, preacher name, and category. +Since I'm targeting a specific view, I use the view key, adding it to the string, checking the value for this specific view in the global of the component. [00:04:02](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m02s) On that basis I'm able to make this view dynamic; and can use it through multiple layouts based on that view key. If others want to use the layout in their components extending this one might not work too well, but since we use it for our own component and implementation, it's not too big of a deal. [00:04:31](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h04m31s) At the same token I am able to check what the view key is. Is it preacher, series, or category? On that basis, I ask different questions and have different implementation of certain values like series name, preacher name, and category. ### Layout To Template Custom Scripting @@ -47,25 +47,25 @@ Since this template has to be dynamic it should dynamically add the site view's [00:06:25](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m25s) -Look at it in the code, 'category', 'preacher' and 'series' open. 'Sermon-grid', 'sermon-list', and 'sermon-table' are added to them all. If 'sermon-list' in 'series' is opened, the 'name' had been changed to 'series'. If 'sermon-list' in 'preacher' is opened, it had been changed to 'preacher'. [00:06:53](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) If it is opened in 'category', 'category' has been added to it. Consequently the place holder had been dynamically updated by Component Builder. +Look at it in the code, 'category', 'preacher' and 'series' open. 'Sermon-grid', 'sermon-list', and 'sermon-table' are added to them all. If 'sermon-list' in 'series' is opened, the 'name' had been changed to 'series'. If 'sermon-list' in 'preacher' is opened, it had been changed to 'preacher'. [00:06:53](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h06m53s) If it is opened in 'category', 'category' has been added to it. Consequently, the place holder had been dynamically updated by Component Builder. ### Config.xml [00:07:17](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m17s) -Where is it getting these values? In the component in the back end open 'config file' and scroll down. An area called 'preacher_custom_config' can be seen, which is a tab, 'preacher'. [00:07:48](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m48s) In this tab there are 'value_preacher_display', 'preacher_box_contrast', 'preacher_list_style'. Scroll down, and see 'preachers_sermon_count', 'preacher_email', 'preacher_website', 'preacher_sermon_display', and 'preacher_sermon_list_display'. Take the 'sermon_list_display' and search for it across the file. [00:08:13](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m13s) Make it cap sensitive. There are 3 matches: 'Category' 'Series' and 'Preacher', the three different views making use of the 'series list style'. [00:08:33](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m33s) The 'series list style' is then implemented on the basis of the dynamic updating of the string. It gets the style, does a switch statement, and sets it accordingly. This is a nice tool to make a template more dynamic. [00:08:57](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m57s) As already mentioned a template can be built and reused in multiple site views with this place holder,''[[[sview]]]' called site view. +Where is it getting these values? In the component in the back end open 'config file' and scroll down. An area called 'preacher_custom_config' can be seen, which is a tab, 'preacher'. [00:07:48](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h07m48s) In this tab there are 'value_preacher_display', 'preacher_box_contrast', 'preacher_list_style'. Scroll down, and see 'preachers_sermon_count', 'preacher_email', 'preacher_website', 'preacher_sermon_display', and 'preacher_sermon_list_display'. Take the 'sermon_list_display' and search for it across the file. [00:08:13](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m13s) Make it cap sensitive. There are 3 matches: 'Category' 'Series' and 'Preacher', the three different views making use of the 'series list-style'. [00:08:33](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m33s) The 'series list-style' is then implemented on the basis of the dynamic updating of the string. It gets the style, does a switch statement, and sets it accordingly. This is a nice tool to make a template more dynamic. [00:08:57](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h08m57s) As already mentioned a template can be built and reused in multiple site views with this place holder,''[[[sview]]]' called site view. ### Layout Concept [00:09:26](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h09m26s) -The layout concept is more or less the same as with templates.It has a layout area in which you place your script; here the key replacing is used. (See video.) If certain dynamic gets are selected , the liberty is taken to show that we start with display data. But these snippets might not correspond to what you're doing because you can pass anything to a layout. (See video.) We assume that if you're using the dynamic get, you might pass it in this or that way. [00:10:06](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m06s) You can't necessarily copy and paste this. At least when you look at a specific dynamic get you'd know the values in it and can try figuring out which ones to use. You can only use this if you are aware that PHP will do the implementations. [00:10:34](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m34s) If you are not familiar with it, it is not necessary to use layouts. The entire front end may be build in the site view. It will work, although it might be a lengthy script. Layouts and templates had been added for convenience. +The layout concept is more or less the same as with templates. It has a layout area in which you place your script; here the key replacing is used. (See video.) If certain Dynamic gets are selected, the liberty is taken to show that we start with display data. But these snippets might not correspond to what you're doing because you can pass anything to a layout. (See video.) We assume that if you're using the dynamic get, you might pass it in this or that way. [00:10:06](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m06s) You can't necessarily copy and paste this. At least when you look at a specific dynamic get you'd know the values in it and can try figuring out which ones to use. You can only use this if you are aware that PHP will do the implementations. [00:10:34](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h10m34s) If you are not familiar with it, it is not necessary to use layouts. The entire front end may be built in the site view. It will work, although it might be a lengthy script. Layouts and templates had been added for convenience. ### Layout Custom Script Area [00:11:02](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m02s) -In layouts the same concept of adding custom scripting which will be placed in the head of the file is found. Remember that the global data or the data being passed is in 'display data.' [00:11:14](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m14s) This is a HTML area but you can go into PHP and check some values, on the basis of which you can do the necessary implementations. +In Layouts the same concept of adding custom scripting which will be placed in the head of the file is found. Remember that the global data or the data being passed is in 'display data.' [00:11:14](https://www.youtube.com/watch?v=52OLSZio0F8&list=PLQRGFI8XZ_wtGvPQZWBfDzzlERLQgpMRE&t=00h11m14s) This is an HTML area but you can go into PHP and check some values, on the basis of which you can do the necessary implementations. ### A Note: Use Layout in a Layout