017 Layout Setup

LAYOUT SETUP

Layouts

Let's look at setting up layouts. Setting up layouts there are some nice ways to reuse code across multiple templates or site views. We want to know which side view is calling the layout on which basis we can use global settings related to that specific site view. 00:00:31

How Layouts Work With Dynamic Gets

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 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

How Templates Call Layouts

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 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 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

Sermon List - Item Layout

Let's look at this specific layout: 'JlayoutHelper::render(study class render)(sermonlist item)'. 00:03:15 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 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

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 On that basis I'm able to make this view dynamic; I 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 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

In the template, go back here and go to custom scripting. (See video.) 00:05:11 There is the [sview] placeholder. The [sview] placeholder will be replaced with the actual view's name. This is a template since we use a template here. 00:05:32 I'm adding the template (this sermon list) to multiple site views, not to one site view.

<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

Dynamic Custom Views using Template

Since I want this template again to be dynamic, so wherever I add it, I want it to dynamically add to that site views name. 00:05:57 Then as you can see I'm actually asking the global parameters for that site view sermon list style. That means it is going to add for example preacher there, or it's going to add series there, or it is going to add category there. It will say category, sermons, list, style.

Above In The Code

Let me show you that in the code. I have category open, I've got preacher open, as well as series. 00:06:30 You can see that I'm adding sermon-grid, sermon-list, sermon-table to them all. If I was to open sermon-list in series, you will see that name was changed to series. If I was going to open sermon-list in preacher, 00:06:53 you will see it was changed preacher. If I open it in category, you will see that it added category. That means that our little place holder was dynamically updated by component builder on the build, then it behaves as you expect.

Config.xml

Now you would know where is it getting these values? 00:07:20 If we go to the component in the back end, a we can open it's config file. Scroll down. We get an area called 'preacher_custom_config' which is a tab, and the tab's name is preacher. In this tab we have these: value_preacher_display, 00:07:48 preacher_box_contrast, preacher_list_style. We scroll down, we see preachers_sermon_count, preacher_email, preacher_website, and then preacher_sermon_display, and preacher_sermon_list_display. Now if we take that sermon_list_display, and search for it across the file, say I make it 00:08:13 cap sensitive, we see that it has 6 matches. That means there is 6 places, actually 3. Because one of the other 6 are in the comments, one is category one is series and one is preacher. 00:08:33 Those are the three different views. Let make use of that series list style. Now the series list style is then being implemented on the basis of that dynamic updating of the string here. It's simply getting the style. Then doing a switch when setting it accordingly. that is another nice 00:08:57 to have tool. To again make a template more dynamic. You can build a template and you can reuse it in multiple site views. Simply with this place holders which is called site view. I should have mentioned that in the templates explanation, but since we only came across it now I mentioning it here.

Layout Concept

Going back to the layouts. Your layout 00:09:27 concept is more or less the same as templates. It has a layout area in which you put your script and here you can see we are using that(see video) key replacing. You can see that if you select certain dynamic gets, we are take the liberty of showing you that we are starting with display data. But this snippets here(see video), might not correspond what you're doing because you can really pass anything to a layout. We are just assuming that if you're using that dynamic get, you possibly passing it in this 00:10:06 way or that way. You can't just copy and paste this necessarily. At least you can know when you look at a specific dynamic get here, what are the values in it? And how you can try figure out which ones to use here. This again will be only really something you need to use if or can use if you are actually aware of our php and everything will 00:10:34 do the implementations here. And if you're not familiar, you don't need layouts. I mean you can build your whole front end right in your site view. It might be a long lengthy script, but it still work. The reason we added layouts and templates is simply for our own convenience. If it's little confusing to you, you can skip this whole area for the meantime.

Layout Custom Script Area

Begin at layouts you have the same concept of adding custom scripting. Which will be placed in the head of the file. Remember that your global data or the data being passed is in 00:11:14 display data. Here again you have your html area. But you can jump into php and check some values and on the basis of that, do your certain implementations. That is really setting up a layout.

A Note: Use Layout in a Layout

Just another note you can actually use a layout in a layout. You can pass values, any value you like. 00:11:42 I realized that 'this' here is maybe not that appropriate. You need to keep a heads up for that. This doesn't exist on the layout page. You need to use the display data as the global or as the main object from which to start your implementation.