The following discussion explains how to achieve the functionality for a readable, bookmark-able presentation of book-length materials with both page and next/previous pagination, chapters, a sidebar that shows story and current chapter in a nested and interactive display, and multiple stories, only showing chapters for the selected story in the nested display. [Reference this forum thread for full discussion].
I used the Simple Pagination plugin, which uses a tag-pair to display content up to a {pagebreak} tag manually inserted within the documents, with next and previous links as well as page number links and first and last links. Story titles are categories, which include description fields and could also use custom category fields if desired. Chapter headings are pulled from the entry title, with one entry pertaining to a complete chapter. Note, I had to increase the database max size of a text area in order to fit an entire chapter into a body field, by doing as this link shows how to do.
See my page for an example where this is working. Note how the URL segments are allowing easy bookmarking by the browser of the page being viewed. (There also is a somewhat superfluous “Bookmark This Page” permalink at the bottom of each page, but many people would enjoy the reminder!) Also note how the sidebar is showing only the chapters for the selected story. Thanks to spacewalk for the embedded template code that made that work!
All of this is driven by the index page - there is no “articles” page - the index is serving as the single-entry page. A multiple entries page is not necessary for this section, as all of the entries here are long ones and usually part of a larger whole.
There also is one embedded template in particular, for the masthead, which includes all the html header code, the CSS assignment, and especially, the title bar customized according to the entry being read. That part I’ll show first for a quickie:
Embed Masthead template first thing! (note- you may have to remove the extra spaces around the embed= tags that I had to include to get them to display in the Wiki.)
{ embed="weblog_globals/_masthead"
section_name="writing"
page_title="Writing: {exp:weblog:category_heading}{category_name}{/exp:weblog:category_heading} -- {exp:weblog:entries limit="1" entry="{current_entry}"} {title}
{/exp:weblog:entries} "
}
The “page_title= ” section above places much information automatically into the title bar and tabs of the browser. Very handy and nice looking! Here is the _masthead embedded template:
Masthead Embedded Template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{embed:page_title} | My Website Name!</title>
<link rel='stylesheet' type='text/css' media='all' href='{stylesheet=weblog_globals/weblog_CSS3}' />
<style type='text/css' media='screen'>@import "{stylesheet=weblog_globals/weblog_CSS3}";</style>
</head>
Pagination
OK, now here is how the pagination is done, plus study this a bit to see how I created a special “landing page” condition if no story has been selected yet (arrived at when selecting the (example:)main nav link at the top of the page.) Notice that {simplepaginate} is a two-part tag with a {/simplepaginate} companion. I had already placed the trigger it looks for, {pagebreak}, which is merely text inserted in the document, where I wished the page breaks to occur.
Weblog Entries Tag:
<div id="blog">
{if segment_2==''} {!-- <----- If segment_2 is empty --}
{ embed="writing/_stories2" my_cat="1" my_entry="93" } {!-- see the _stories2 template in
the post following this one. Used as a landing page generator. --}
{if:else}
{exp:weblog:entries weblog="{master_weblog_name}" limit="1"}
You are here: {categories}<a href="{path=writing/index}">{category_name}</a> > {/categories}{title}
{/exp:weblog:entries}
{exp:weblog:category_heading weblog="writing"}
<h1>{category_name}</h1>
{/exp:weblog:category_heading}
{exp:weblog:entries weblog="{master_weblog_name}" limit="1"}
<h2 class="title">{title}</h2>
{exp:pagination paginate="bottom"}
{body}
{simplepaginate}
{if "{total_pages}" != 1}
<center>* * *</center>
<div class="pagination">{if next_page}
<p class="next_page"> <a href="{next_auto_path}">Next Page</a> »</p>
{/if}
<h1 class="title">{title}</h1>
<p class="status">Page {current_page} of {total_pages}<p>
{if previous_page}
<p class="prev_page">« <a href="{previous_auto_path}">Previous Page</a>
{/if} </p>
<p>{pagination_links}</p>
{if:else}
<h2 class="title">{title}</h2>
{/if}
{/simplepaginate}
{/exp:pagination}
<div class="posted">Posted by <a href="{profile_path=member/index}">{author}</a> on {entry_date format='%m/%d'} at {entry_date format='%h:%i %A'}
<br />
{!-- the following generates a bookmarking link including the page number --}
<a href="{url_title_path=writing/index}{segment_3}"><h3>Bookmark This Page!</h3> (Right-click and select Bookmark This Link...)</a>
</div>
{/exp:weblog:entries}
</div>
{/if}
That’s the pagination part! Next for the navigation section.
——————————————————————————————
Navigation ala spacewalk!(inspired by his use of embeds and conditionals)
FIRST!
Use the Fresh Variables module to define two variables:
current_category = {exp:weblog:entries limit=‘1’}{categories}{category_id}{/categories}{/exp:weblog:entries}
current_entry= {exp:weblog:entries limit=‘1’}{entry_id}{/exp:weblog:entries}
Then embed the nested menu in the main template’s sidebar with this line:
{ embed="writing/_stories" my_cat="{current_category}" my_entry="{current_entry}" }
Or for a more robust solution that doesn’t show the embed but rather shows category links instead upon the (example:)initializing page load:
{if segment_2 == ""}
{ embed="writing/_stories3" my_cat="{current_category}" my_entry="{current_entry}" } {!-- _stories3 is a fake,
non-existing template, needed to hide the embedded sidebar but still assign my_cat early
so the category list will work -- see *Note below}
<h2 class="sidetitle">Stories</h2>
<p>
{exp:weblog:categories weblog="{master_weblog_name}" style="nested" show_empty="no"}
<a href="{path=writing/index}">{category_name}</a>
{/exp:weblog:categories}
</p>
{if:else}
{ embed="writing/_stories" my_cat="{current_category}" my_entry="{current_entry}" }
{/if}
_stories template
<div id="clients_menu">
<h1>Stories</h1>
<ul>
{exp:weblog:categories weblog="writing" style="linear" show_empty="no" category_group="1"}
{if segment_3 == "C{category_id}" OR "{category_id}" == "{embed:my_cat}" }
<li class="nav_active">{category_name}</li>
{ embed="writing/_chapters" my_cat="{current_category}" my_entry="{current_entry}" }
{if:else}
<li><a href="{path=writing/index}">{category_name}</a></li>
{/if}
{/exp:weblog:categories}
</ul>
<!-- close clients_menu --></div>
_chapters template is used within the _stories template to show the chapters.
<div id="chapters_menu">
<ul>
{exp:weblog:entries weblog="writing" category="{embed:my_cat}" dynamic="off" sort="asc"}
{if (segment_3 == "{entry_id}") OR ("{embed:my_entry}" == "{entry_id}") }
<li class="subnav_active">{title}</li>
{if:else}
<li><a href="{permalink="writing/index"}">{title}</a></li>
{/if}
{/exp:weblog:entries}
</ul>
<!-- close chapters_menu --></div>
[n]Note- Always make the first chapter “sticky” in publish options to force it to be the topmost selection when you return to the category base.
I also used a _stories2 template in the main page where the {if segment_2 == “”} appears at the top of the blog div in the post above. This was to generate a landing page where story names would be presented along with comments (category description fields) for first arrival where no story has been selected yet (as from the main nav at the top of the page). Same as _stories but without the chapters being shown. It is where you will wind up if you click on this link to my site.
_stories2 template
<div id="clients_menu">
<h1>Stories</h1>
<ul>
{exp:weblog:categories weblog="writing" style="linear" show_empty="no" category_group="1"}
{if segment_3 == "C{category_id}" OR "{category_id}" == "{embed:my_cat}" }
<li class="nav_active">{category_name}</li>
{ embed="writing/_chapters" my_cat="{current_category}" my_entry="{current_entry}" }
{if:else}
<li><a href="{path=writing/index}">{category_name}</a></li>
{/if}
{/exp:weblog:categories}
</ul>
<!-- close clients_menu --></div>
*Note:
It was a little odd to me that I had to include an embed of a “dummy” (non-existing) template (“_stories3” doesn’t exist), while still assigning the category to “my_cat”, in order to keep my category listing display working on the initial page (the entry page where no story category has been selected yet, that I simply show the category/story title list on).
(this is the code segment I’m discussing here:){if segment_2 == ""}
{ embed="writing/_stories3" my_cat="{current_category}" my_entry="{current_entry}" } {!-- _stories3 is a fake,
non-existing template, needed to hide the embedded sidebar but still assign my_cat early
so the category list will work --}
<h2 class="sidetitle">Stories</h2>
<p>
{exp:weblog:categories weblog="{master_weblog_name}" style="nested" show_empty="no"}
<a href="{path=writing/index}">{category_name}</a>
{/exp:weblog:categories}
</p>
{if:else}
{/if}I’m not clear why _stories3 was needed, or even why it worked!
Terry
Category:Embeds Category:Pagination Category:Categories Category:Navigation Category:EE Coding Category:Tricks