Pagebreak Documentation

Developer Networks
Developer Networks
@developer-networks
11 years ago
566 posts
I was digging in the documentation for some information on Pagebreaks and how they work.

pagebreak=$_conf.mySkin_default_artist_pagebreak page=$_post.p}

Just wanted to make a suggestion for more information about this function.

Maby just a few examples of how set up a pagebreak on an audio and video list.

This might help a lot of people just starting to learn Jamroom out a lot.

updated by @developer-networks: 12/13/13 11:00:22AM
michael
@michael
11 years ago
7,718 posts
pagebreak=1 page=1}
will show 1 item per page and show page 1
pagebreak=5 page=1}
will show 5 items per page and show page 1
pagebreak=5 page=2}
will show 5 items per page and show page 2
pagebreak=5 page=$_post.p}
will show 5 items per page and show page whatever p= is in the url. if its page/?p=4 it will show page 4

$_conf.mySkin_default_artist_pagebreak
is some config setup by the skin. its probably settable in the skins settings page.
Developer Networks
Developer Networks
@developer-networks
11 years ago
566 posts
If am trying to do a pagebreak on a youtube video list.

currently this is what i have

  <div class="row"> {jrCore_list module="jrYouTube" template="list_youtube.tpl" pagebreak="20"}  </div>

But i would like to add a pagebreak to this list so i can view all of the videos.

so i tried adding

pagebreak=$_conf.mySkin_default_artist_pagebreak page=$_post.p}

and then tried realized just needed
pagebreak=20 page=$_post.p}

but it dosent create the arrows seperating the list.

so i added...

    {if $info.total_pages > 1}
    <div class="block">
        <table style="width:100%;">
            <tr>

                <td style="width:25%;">
                    {if isset($info.prev_page) && $info.prev_page > 0}
                        <input type="button" value="{jrCore_lang module="jrCore" id=26 default="&lt;"}" class="form_button" onclick="window.location='{$info.page_base_url}/p={$info.prev_page}'">
                    {/if}
                </td>

                <td style="width:50%;text-align:center;">
                    {if $info.total_pages <= 5 || $info.total_pages > 500}
                        {$info.page} &nbsp;/ {$info.total_pages}
                        {else}
                        <form name="form" method="post" action="_self">
                            <select name="pagenum" class="form_select" style="width:60px;" onchange="var sel=this.form.pagenum.options[this.form.pagenum.selectedIndex].value;window.location='{$info.page_base_url}/p=' +sel">
                                {for $pages=1 to $info.total_pages}
                                    {if $info.page == $pages}
                                        <option value="{$info.this_page}" selected="selected"> {$info.this_page}</option>
                                        {else}
                                        <option value="{$pages}"> {$pages}</option>
                                    {/if}
                                {/for}
                            </select>&nbsp;/&nbsp;{$info.total_pages}
                        </form>
                    {/if}
                </td>

                <td style="width:25%;text-align:right;">
                    {if isset($info.next_page) && $info.next_page > 1}
                        <input type="button" value="{jrCore_lang module="jrCore" id=27 default="&gt;"}" class="form_button" onclick="window.location='{$info.page_base_url}/p={$info.next_page}'">
                    {/if}
                </td>

            </tr>
        </table>
    </div>
    {/if}
{/if}


copied from an example i was using.


Quote: I tried looking for an example how to set up a pagebreak other then the code i was breaking apart and learning from.

Ill figure it out soon, this is easy to understand and work out.. I just dont know much yet about smarty and im still learning how it works.

The reason i posted this however was you were asking everyone if we could find suggestions for documentation and i was thinking that showing a user this process in more depth is a good way to break the ice as far as:

getting started with developing your Jamroom site. And it can also introduce the user to the power and functionality that Jamroom has.



updated by @developer-networks: 11/10/13 02:09:50AM
michael
@michael
11 years ago
7,718 posts
Awesome. I know there is a file you can include instead of writing all the pagingination code yourself. Just not sure of the name right now. (not all setup for dev).

So look for an include file to include. perhaps use 'if $info.total_pages > 1' as a search string to find that file.

if you cant find it, ill find it tomorrow.
SteveX
SteveX
@ultrajam
11 years ago
2,584 posts
pagebreak=$_conf.jrNova_default_pagebreak page=$_post.p pager=true}
Not sure, but are you adding pager=true ? Its used in Nova and I don't see it in your codeabove - does that make the arrows appear?


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

updated by @ultrajam: 11/11/13 05:13:32AM
Developer Networks
Developer Networks
@developer-networks
11 years ago
566 posts
That was exactly it Steve I was missing
 pager=true 
from my code. Many Thanks!


So hopefully this helps others starting out missing this info.

so the proper way was:

<div class="row"> {jrCore_list module="jrYouTube" template="list_youtube.tpl" pagebreak="20" pager=true}  </div>

updated by @developer-networks: 11/11/13 05:35:40AM
Developer Networks
Developer Networks
@developer-networks
11 years ago
566 posts
Oh Cool! That deffinatly works for me.

What I was reffering to however was this:

I was thinking of something for a beginner just getting started coding their Jamroom. Wrote so simple a child could follow along.

** now this is just an example and ive had a long day so forgive me if theres a ton of errors here...

Something like:

 {jrCore_list module="jrProfile" order_by="_created desc" search1="profile_active = 1" template="index_list_profiles.tpl" limit="5" require_image="profile_image"} 

Here is my example of the [jrCore_list] function breaking it down as it reads:


The first call is
jrCore_list
which is the function we are calling. Its action will be to generate a list when executed.

Next we tell Jamroom where to look for the list. Since our goal here is to list 5 new active profiles we need use the jrProfile module. We have to tell Jamroom to look in the modules/jrProfile for profiles. So we type
module="jrProfile" 

We would like to list the returned result to show only 5 of the newest files.
so we tell Jamroom to "order_by"

and since we want it to list the newest 5 we need it "_created desc" which stands for created descending.

** [TIP] Consider "Order_by, Search1, limit, and require_image like filters on the return results of your list.

So far the code should look like this:
{jrCore_list module="jrProfile" order_by="_created desc" 

ok from here we will call our search. We could call multiple searches "search1, search2, search3 ect. But to keep it simple we will just use one.

So our next piece of code we have to add is:
Search1="profile_active = 1"

* Heres a recap
so far we have requested that Jamroom returns to us with a list.

The jrCore_list is called and directing to the module jrProfiles expecting a return with the newest created desending profile. Also we want to make sure the profile is active. So we need to include "profile_active = 1".

Congradulations, now the list has filtered out only profiles that are currently active on Jamroom.

Now that we have the data we need we have to direct traffic here and tell Jamroom what to do with this data we have.

So next we will be including the location of our .tpl file which processes the returned data from jrCore_list.
template="intex_list_profiles.tpl"


Great! Currently the result will return all profiles that are active. We only want to see the last 5. So to achieve that you will have to tell Jamroom to limit the results
you do that by adding a limit filter. (I called this a filter, but im sure theres a better name for it)
limit="5"


Now only 5 profiles will be returned in the data sent to intex_list_profiles.tpl .

And last but not least we also want to require the returned results to have a picture. so we will add this filter here.
 require_image="profile_image"

That's it! The jrCore_List Function broken down as Jamroom reads it.

Your final code should look like this:

{jrCore_list module="jrProfile" order_by="_created desc" search1="profile_active = 1" template="index_list_profiles.tpl" limit="5" require_image="profile_image"}


After writing all this I do understand it would take a lot of time so im not sure you could or would even do something like this. But it sure would help teach a lot more people and also could bring more people on board if it was laid out with instructions so even a child or teenager could follow along.



updated by @developer-networks: 11/12/13 01:12:51AM
michael
@michael
11 years ago
7,718 posts
Wow. Thats fantastic. I put it up here with thanks to you at the bottom.
http://www.jamroom.net/the-jamroom-network/documentation/howto/1080/howto-jrcore-list-step-by-step
Developer Networks
Developer Networks
@developer-networks
11 years ago
566 posts
I dunno if you should. Im reading it back and its long I was going to delete it.. lol a ton of typos.. I like it simple how you've wrote it because its easy to understand.. but the reason I wrote that long one was just an example.. It was targeted to include a broad audience that might be new to Jamroom.
updated by @developer-networks: 11/12/13 01:23:30AM
michael
@michael
11 years ago
7,718 posts
im editing it now. need the contents of index_list_profiles.tpl shown and explained too because it feels like it ends at: "what goes in that template file. I created a blank place holder for it and there are no profiles showing."

--edit--
its good. Ill use it as a script for the next course im going to create "developers guide to customizing Jamroom"

updated by @michael: 11/12/13 01:28:07AM
Developer Networks
Developer Networks
@developer-networks
11 years ago
566 posts
You made it look good.. Thank You!

* one edit I found is:

The left hand side of search1="profile_active = 1" is profile_active.

You can use any of the other profile_something fields that exist in the datastore. Use the datastore browser to see the available field names.


what you are trying to say here is:

the word "active" is like an array and can be swapped out with other functions. Use the datastore browser to see the available field names.


updated by @developer-networks: 11/12/13 01:47:18AM
michael
@michael
11 years ago
7,718 posts
still needs that index_list_profiles.tpl explained. feel like doing that?
Developer Networks
Developer Networks
@developer-networks
11 years ago
566 posts
yes give me a few min
Developer Networks
Developer Networks
@developer-networks
11 years ago
566 posts
***** 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
Developer Networks
Developer Networks
@developer-networks
11 years ago
566 posts
Looks good Michael. Glad to help.

Tags