***** The Process *****
Lets discuss how this process works first to better understand whats going on here.
First we created a jrCore_List which is located below:
{jrCore_list module="jrProfile" order_by="_created desc" search1="profile_active = 1" template="index_list_profiles.tpl" limit="5" require_image="profile_image"}
This filtered out all of our profiles to 5 of the newest ones.
also this data was told to be sent to the template "index_list_profiles.tpl" inside you skin directory.
Its important to note that all the template .tpl files are always located in the root directory of your skin directory.
******** Time to get started with index_list_profiles.tpl **************
Ok now lets look at the first bit of code inside of index_list_profiles.tpl
{if isset($_items)}
{foreach from=$_items item="row"}
<div style="display:table">
<div style="display:table-cell">
<a href="{$jamroom_url}/{$row.profile_url}">{jrCore_module_function function="jrImage_display" module="jrProfile" type="profile_image" item_id=$row._profile_id size="small" crop="auto" alt=$row.profile_name title=$row.profile_name class="iloutline"}</a>
</div>
<div class="p5" style="display:table-cell;vertical-align:middle">
<a href="{$jamroom_url}/{$row.profile_url}" class="media_title">{$row.profile_name}</a>
</div>
</div>
{/foreach}
{if $info.total_pages > 1 && $info.page == 1}
One thing to note is everything we stored from our jrCore_List is getting saved inside $_items.
So for our first line of code we need to check and make sure if we are on this page with data to list otherwise "else" next step.
{If isset($_items)} is saying if the data has been set go forward with the code. If no data was set for ($_items) "else" next step.
moving forward here, our next line is {foreach from=$_items item="row"}
Now this line of code will create a row for each of your $_items and item="row" is setting to display the data from $_items in rows.
Its important to remember that each $_item returned should have been returned with all of the data fields you filtered and asked Jamroom to bring you.
In our case we asked for 5 of the newest profiles with a picture descending.
so with out the actual pictures and to keep this simple I will use words to represent the pictures representing our data example.
Our results would look something like for $_items.
row 1)John, (Johns picture)
row 2) Adam, (Adams Picture)
row 3) Jessica, (Jessicas Picture)
row 4) Erica, (Ericas Picture)
row 5) Candice, (Candice Picture)
This is the data you have just passed to $_items. where john representing #1 would be you newest jrProfile and they are descending in that order.
The next lines are some ways to display the rows and data
<div style="display:table">
<div style="display:table-cell">
This div style "display:table" added to your div tag will Let the element behave like a <table> element.
and "display:table-cell" will Let the element behave like a <td> element.
Now we can insert this data to the table.
we do that with a simple line of code.
<a href="{$jamroom_url}/{$row.profile_url}">{jrCore_module_function function="jrImage_display" module="jrProfile" type="profile_image" item_id=$row._profile_id size="small" crop="auto" alt=$row.profile_name title=$row.profile_name class="iloutline"}</a>
To break down this code as simple as possible it reads back almost exactly as it looks.
So We will use John for this example and it would read like this.
<a href="{$jamroom_url}/{$row.profile_url}">
A clickable link => {Jamroom Site Directory} / {Profile Url} /
which translates to => http: //www yoursite com/john/
Next we need to bring in the picture. There could be many pictures with johns profile. We need to be clear on what we are asking Jamroom here.
so we are going to use a function to bring the correct picture to this row
Now we are going to call a function. ==> {jrcore_module_function
And ask the function to be displayable ==> function="jrImage_display"
We are using the module jrImage_display ==> "jrProfile"
and we are asking for the type to be profile image ==> type="profile_image
we are taking the "item_id which is equal to this ==>
item_id=$row._profile_id size="small" crop="auto" alt=$row.profile_name title=$row.profile_name class="iloutline"}
so the entire code looks like this
{jrCore_module_function function="jrImage_display" module="jrProfile" type="profile_image" item_id=$row._profile_id size="small" crop="auto" alt=$row.profile_name title=$row.profile_name class="iloutline"}</a>
next you will see a closing /div and
a couple lines
<div class="p5" style="display:table-cell;vertical-align:middle">
<a href="{$jamroom_url}/{$row.profile_url}" class="media_title">{$row.profile_name}</a>
</div>
which are displaying the Jamroom profile name in a clickable link.
Notice it says $row.profile_url and $row.profile_name
These are important to note as they are reffering to the individual row we are currently working through.
and last but not least you see the old famous /foreach
The script will go back to step 1 and loop this process foreach $_items in your jrCore_List.
Since we limited our search to 5 it will repeat this process foreach $_items and create a table row of 5 data entries of your newest jrProfiles.
The rest of the code listed below the /foreach controls the pages which we will cover next.
*** one important thing to note whats going on here is this page does not display the content it has just generated. It processes all requests and sends them back to the previous page that called this file.
So it has only generated the tables and rows with our data. populated them and sends the data back before you ever knew it left. If this concept is new to you please refer to this link for refrence
MVC "Module View Controller"
http://php-html.net/tutorials/model-view-controller-in-php/
Jamroom is a powerful tool and you can take this concept and build on it to endless possibilities.
I haven't even started to proof this. but heres a good sketch up for you. That took longer then I expected and I can barely keep my eyes open. Not sure if this will work but its all I can do for now.
Thanks.
updated by @developer-networks: 11/12/13 03:42:51AM