Learn & Launch project

[MilenKo]

Robin, your remark was well noted. I took out the active link out of the "foreach cycle" as it would really cause issues where multiple parents appear. Sooner or later I would have noticed it not showing up correctly however I only have a single level menu and that was not an issue. I am not 100% aware of the semantically proper markup, however, the You are here text to me is a static HTML code and as such, I took it outside of the list (for the same reasons you mentioned).

In case somebody copies the code, I corrected it in my previous post to avoid the long posts flooding. Anyway, the plan would be to put a proper how-to when all bits and pieces are tied up together, so these posts are just some reminders for the steps taken so far.

Thanks for the remarks and I hope you keep on doing it in the future. The point is to learn best practices so even if you are not sure of something but it looks better than mine - it is a step closer

[MilenKo]

OK, so a bit of an update on the progress of the themifying the HTML theme to a fully dynamic PW.

Yesterday I felt like it is time to move to the more dynamic part of the theming - adding pages and showing them to the appropriate places. The first step of the progress was to pick a news and articles page and randomly copy 10-15 topics containing image and video. For the moment, as far as in the official HTML theme News inner page contains video and the Articles inner page contains an image, I decided to create two separate fields and allow the possibility to add/show both if available.

So I added the news and articles in the database deleting all the repetitive code and left only one for each template where I added the title, image/video and the body content of the page (that was for the inner page view). For the listing I followed the original theme so in the Articles I only had the title as a field assigned to the template and called a foreach loop to show them all.

For the news inner - I applied the same trick as with the Articles, however for the listing page I had an image to add and the body content with a limit of the text other than the title.

Technically all dynamic calls are done, so FAQ, Articles and News works to list what was added as pages and childs however I am facing two issues so far to deal with:

1. The listings template is showing all pages available and not pass through a pagination.

2. The News page containing the body text in the listings template needs to have a limit per words/letters. 

So for the articles template I used this code:

<div class="archive-list archive-article">

	<?php if($page->numChildren) {
			$result = $page->children("limit=10");
			
			// render the children 
			echo "<article class='hentry'>";
			
				foreach($result as $child) { ?>
					<header class="entry-header">
						<i class="fa fa-list-alt fa-2x fa-fw pull-left text-muted"></i>
						<h2 class="entry-title h4"><a href="<?php echo $child->url;?>" rel="bookmark"><?php echo $child->title;?></a></h2>
					</header><!-- .entry-header -->
						
					<footer class="entry-footer">
						<div class="entry-meta text-muted">
							<span class="date"><i class="fa fa-clock-o fa-fw"></i> <time datetime="2013-10-22T20:01:58+00:00">about 5 days ago</time></span>
							<span class="category"><i class="fa fa-folder-open-o fa-fw"></i> <a href="#">Mobile Apps</a></span>
						</div><!-- .entry-meta -->
					</footer><!-- .entry-footer -->
				<?php }
			
			echo "</article><!-- .hentry -->";

			// render pager again? ok
			
		};?>

</div><!-- .archive-list -->

To learn of the code above I just read this post  and followed up implementing it, however there is still an issue with the styling where I would have to style the pagination using classes different from my original code. So am I missing something in here or I can just add some variables for the Prev, Next, 1-10 pages etc. to my code and imply it?

P.S. In case someone is following up my steps and get its links pointing to ?page=2 than this would simply mean that they will have to go to their template that calls for the pagination and allow it in through the admin: Admin -> Template -> URL -> Allow Page Numbers ...

For the text limit I am sure there will be a simple limit, but I will need to look at it when I have some time. Any ideas/suggestions are more than welcome

[MilenKo]

OK. I got some rest from my home renovations and have continued playing with my theme to see what else can I improve and make dynamic. So I went to the Articles page and found that the date there is listed in a format: XX days ago. Now that was a challenge to concur as I know PHP support some date formats but thought that this would require some additional coding. Well googling the days ago in PW pointed me to a module that does exactly that. 

So to display the date it is showing in the template I added two variables to _init.php (please note that this date format is used on main and articles, so worth making it global  ): 

$time_format = $modules->get('ToolsTimeFormat');
$postedago = $time_format->ago($page->created);

After which in the proper template spot I simple called the $postedago:

<span class="date">
  <i class="fa fa-clock-o fa-fw"></i> 
  <time datetime="<?php echo date('Y-j-d, G:i', $page->created); ?>"><?php echo $postedago;?></time>
</span>

I have a little issue here as all my posts show like being added 3 days ago instead of the actual date but it might be caused by the fact that I move my work between to computers I work locally on so the DB import might be messing up with it. For sure, if I change the date of my computer, the counter moves up properly so I think this should be working fine but would still check it later to make sure of it.

If anybody else have stumbled across such an issue and/or have a simpler solution that avoids using additional plugins, please share. I have seen some suggestions with  strtotime but so far I wasn't able to make it work.

As far as the date was added, it came the time to link the post/page to the parent and show the parent as well. To achieve that I simply used the $page->rootParent. Here is the full code of the block with the variables in:

// render the children 
echo "<article class='hentry'>";

	foreach($result as $child) { ?>
		<header class="entry-header">
			<i class="fa fa-list-alt fa-2x fa-fw pull-left text-muted"></i>
			<h2 class="entry-title h4"><a href="<?php echo $child->url;?>" rel="bookmark"><?php echo $child->title;?></a></h2>
		</header><!-- .entry-header -->
			
		<footer class="entry-footer">
			<div class="entry-meta text-muted">
				<span class="date"><i class="fa fa-clock-o fa-fw"></i> <time datetime="<?php echo date('Y-j-d, G:i', $page->created); ?>"><?php echo $postedago;?></time></span>
				<span class="category"><i class="fa fa-folder-open-o fa-fw"></i> <a href="<?php echo $page->rootParent->url?>"><?php echo $page->rootParent->title;?></a></span>
			</div><!-- .entry-meta -->
		</footer><!-- .entry-footer -->
	<?php }

echo "</article><!-- .hentry -->";

As always, I am really open minded and looking forward to suggestions how to improve the code simplicity and elegance wise.

 

[MilenKo]

Ok, my next step is to figure out how can I convert the markup for the pagination:

<footer class="archive-footer text-center">
								
	<ul class="MarkupPagerNav" role="navigation" aria-label="Pagination links">
		<li aria-label="Page 1, current page" class="MarkupPagerNavOn MarkupPagerNavFirst MarkupPagerNavFirstNum" aria-current="true"><a href="/articles/"><span>1</span></a></li>
		<li aria-label="Page 2" class="MarkupPagerNavLastNum"><a href="/articles/page2/"><span>2</span></a></li>
		<li aria-label="Next page" class="MarkupPagerNavNext MarkupPagerNavLast"><a href="/articles/page2/"><span>Next</span></a></li>
	</ul> <!-- Render the pager call -->

</footer>

into the properly styled code in the original template:

<footer class="archive-footer text-center">
	<ul class="pagination pagination-custom">
		<li class="disabled"><a href="#">&laquo;</a></li>
		<li class="active"><a href="#">1</a></li>
		<li><a href="#">2</a></li>
		<li><a href="#">3</a></li>
		<li><a href="#">4</a></li>
		<li><a href="#">5</a></li>
		<li><a href="#">&raquo;</a></li>
	</ul><!-- .pagination -->
</footer><!-- .archive-footer -->

Again, for sure I can define the styles as per the example above and make it work, however, I am trying to learn how to style a template without adding additional classes to CSS. 

This is where I shall stop for today as it is late again and will have to look at it tomorrow unless somebody has some mercy and decides to make my life easier

[adrian]

1 hour ago, MilenKo said:

Well googling the days ago in PW pointed me to a module that does exactly that. 

This module is very old and I am not sure if it is still maintained - maybe it's just fine, but you might also find what you need in this PW core function: wireRelativeTimeStr()

https://github.com/processwire/processwire/blob/d935e9b6995124d76e6fda17fd47ab46dc4d3a3c/wire/core/Functions.php#L283

[Robin S]

See the pagination docs for how to change the markup/classes output by MarkupPagerNav: https://processwire.com/api/modules/markup-pager-nav/

[MilenKo]

Adrian, thank you very much. My initial goal was to stick to the out-of-the-box PW and avoid complicating the things. Honestly, I could easily just switch to the standard year-date time format etc. however decided for the practice sake to accomplish what was on the theme. So will check your suggestion and apply the changes promptly.

Robin S, thank you too. I was going there as my next point to try. It won't be that difficult to add a few extra classes and then apply my styling to them. Let me see what would happen and will share the code as always.

[MilenKo]

Adrian, I cannot express my gratitude. It was really SO SIMPLE to achieve but so far away when you are pointing to the wrong direction. So here is the code I used and it started showing up properly the date as in the original format:

<time datetime="<?php echo date('Y-j-d, G:i', $child->created); ?>"><?php echo wireRelativeTimeStr($child->created);?></time>

One thing came weird though. It is not as important but I am trying to understand it...

I tried to assign a variable in _init.php: $postedago = $child->created. Then I would expect to have the code above like this:

<time datetime="<?php echo date('Y-j-d, G:i', $postedago); ?>"><?php echo wireRelativeTimeStr($postedago);?></time>

But as soon as I changed the line and it shows datetime=1969-31-31, 19:00 and the second date = Never. I am wondering why having the $child->created works but echoing the variable does not?

[adrian]

3 hours ago, MilenKo said:

I tried to assign a variable in _init.php: $postedago = $child->created.

What did you set $child to?

[MilenKo]

Well I just assumed that I would assign the "$child->created" value to the $postedago and then echo it but obviously it does not work that way

[adrian]

It should work that way. I am just guessing that $child is not defined in the _init.php file, so your $postedago variable is blank/null

[MilenKo]

Well I have some other variables defined in _init.php:

$aboutus = $page->about;
$logo = $pages->get("/")->logo->url . $pages->get("/")->logo;
$homeurl = $config->urls->root;
$templateurl = $config->urls->templates;
$title = $page->title;
$headline = $page->headline;
$body = $page->body;
$image = $page->image->url . $page->image;
$postedago = $child->created;

so I though that analogically $child->created would equal to the child creation date, but it does not. for $page it works, but not with the $child

[adrian]

But a page can have more than one child

You can define it as $page->child() or $page->children()->first() and you'll get the first child, but you need to define what child you are after!

[MilenKo]

Anyway, as far as I got it working, it is not an issue to leave it like that.

Now I am trying to make the pagination work and that seems like a more complex task than anything I have done so far - to implement my styles into the markup. I am playing with the code but got internal error 500:

<footer class="archive-footer text-center">
	
	<?php echo $results->renderPager(array(
			'numPageLinks' => "10",
			'previousItemLabel' => "Prev",
			'listMarkup' => "<ul class='pagination pagination-custom'>{out}</ul>",
			'nextItemLabel' => "Next",
			'itemMarkup' => "<li class='{class}'>{out}</li>",
			'linkMarkup' => "<a href='{url}'>{out}</a>",
		)); ?><!-- .pagination -->	
</footer><!-- .archive-footer -->

What I am having difficulty to understand is how to add to the array the class="active", class="disabled" and the <li>code...

[MilenKo]

I found a topic where a person spoke about modifying bootstrap theme for the pagination here, however at the end he just say he made it work and that was it.

Following his examples I ended up with this code:

<?php echo $results->renderPager(array(
	'listMarkup' => "<div class='pagination'>\n<ul>{out}\n</ul>\n</div>",
	'currentItemClass' => 'active',
	'itemMarkup' => "\n\t<li class='{class}'>{out}</li>", // List item markup. Place {class} for item class (required), and {out} for item content.
	)); 
?>	

which leads me to the page opening and showing Internal Server Error where the pagination is supposed to be. So any ideas where I am going wrong and how would that be fixed?

[Robin S]

5 hours ago, MilenKo said:

Well I have some other variables defined in _init.php:

$aboutus = $page->about;
$logo = $pages->get("/")->logo->url . $pages->get("/")->logo;
$homeurl = $config->urls->root;
$templateurl = $config->urls->templates;
$title = $page->title;
$headline = $page->headline;
$body = $page->body;
$image = $page->image->url . $page->image;
$postedago = $child->created;

so I though that analogically $child->created would equal to the child creation date, but it does not. for $page it works, but not with the $child

$page is an API variable, so it's already defined at the time your _init.php runs. $child is not an API variable - it's a variable that you have defined yourself. So you need to make sure it is defined before you try and do anything with it such as $child->created. I don't see $child being defined in your _init.php.

 

5 hours ago, MilenKo said:

I am playing with the code but got internal error 500

I tried both the renderPager() examples you gave and they execute fine. There must be something else that is causing the 500 error. Check your error logs to see if that sheds any light. Are you developing locally or on a live server? If it's a live hosting you may be getting false positives from mod_security if that is installed, so ask your host to disable mod_security in that case.

[MilenKo]

Hello Robin S.

I was working on my remote host, however, found to be more flexible working on a local server as sometimes my work keeps me waiting in a port or airport with no Internet so having the local server is allowing me to work and kill my time.

I will check the logs as it seemed strange, however, if I don't use the array parameters, the renderPager() works fine.

Thanks for pointing out the missing bits. Hopefully I will be able to resolve it as sometimes a few silly things can stop the progress

[MilenKo]

Hello again. As Robin suggested I cleared out the logs to make sure I have the latest errors and avoid looking at the wrong location, so added the pagination code to Articles and opened the page a few times.

Here is the pagination code I used:

<footer class="archive-footer text-center">
	<?php echo $results->renderPager(array(	
		'listMarkup' => "<div class='pagination'><ul>{out}</ul></div>",
		'currentItemClass' => 'active',
		'itemMarkup' => "<li class='{class}'>{out}</li>", // List item markup. Place {class} for item class (required), and {out} for item content.
		)); 
	?>	
</footer><!-- .archive-footer -->

And got again the Internal Server Error (500). The logs point me to this:

2016-12-15 14:16:29    guest   http://nowknow.pw/articles/  Error:     Call to a member function renderPager() on a non-object (line 55 of C:\OpenServer\domains\nowknow.pw\site\assets\cache\FileCompiler\site\templates\articles.php)

I am starting to wonder, would that be something that is cached and causing the issue or it is what the error says in reality. FYI, I did not enable cache so far on any of the templates as during the development I am really trying to avoid an issue with the previous cache.

Will read the earlier mentioned topic and try to just add the classes for the pagination, however, this is not the best approach to me as it would just be done so it works and not so that I can understand it (and all others who might read this topic one day looking for similar answers). From my earlier readings, it seems as the pagination gets a bit more complicated when the template is using Bootstrap because of the additional classes in it (disabled and active).

The discussion to be continued later when I have some time to play with it more. Once the pagination is also done, I will finalize the News the same way and eventually add some checkings for showing post images in there as for the moment I just made the code working with images, however, if there are none, it shows like missing one. I am not sure which way I should go yet, however, most likely would select a default image in a case of missing one so that the styling of the theme does not align incorrectly later.

[MilenKo]

When I make the code like this:

<footer class="archive-footer text-center">
  <div class='pagination'>
    <ul><?php echo $result->renderPager("id>1, limit=10"); ?></ul>
  </div>
</footer><!-- .archive-footer -->

it shows properly the pagination and it works as it should, however, the styles are not applied. This points me to the conclusion that issue is not caused by some service of the local server and/or lack of resources but purely somewhere in my approach/code. To prove this I will have to upload the code to my online server and try it there even though I am certain of the result already. 

[AndZyk]

Hello @MilenKo,

maybe you get the error, because you try to output $results instead of $result, which seems to work.

Regards, Andreas

[MilenKo]

AndZyk, you are a genius! Hahaha, I was looking and looking at the commas, semicolons etc., read 10 times the instructions and at the end, a silly typo was causing the issue...

Thank you very much. Now I will try to move my code to the array and see if that would solve the pagination styling issue.

[AndZyk]

Glad that was it. For further development I can recommend you enabling debug mode in your config.php, if you haven't already, and checking out the almighty Tracy Debugger module. 

[MilenKo]

AndZyk,

As I was working on two different computers, I thought I have enabled the debug mode, however on the machine I was on had the $config->debug = false. I changed it to true and will make sure to check the Tracy Debugger module as being a newbie it is not that hard to make a typo and spend a few days of wondering. 

As far as I had some time to follow up the menu logic, I was able to make it fully working by simply adding two lines to wrap the <div> and <ul> tags. Now I am really happy that with the help of all of you I can move on finding the next issue to fix/learn.

Here is the code that I used to make the Bootstrap pagination fully working:

<footer class="archive-footer text-center">
  	<?php echo $result->renderPager(array(	
	"nextItemLabel" => __("Next"),
	"previousItemLabel" => __("Prev"),
	"listMarkup" => "<ul class='pagination pagination-custom'>{out}</ul>",									
	//"firstNumberItemClass" => "pagination__item--first-num",
	//"lastNumberItemClass" => "pagination__item--last-num",	
	//"previousItemClass" => "pagination__item--prev",
	//"nextItemClass" => "pagination__item--next",
	//"firstItemClass" => "pagination__item--first",
	//"lastItemClass" => "pagination__item--last",
	//"currentItemClass" => "pagination__item--active",
	//"itemMarkup" => "<li class='pagination__item {class}'>{out}</li>",
	//"linkMarkup" => "<a class='pagination__item-link' href='{url}'><span>{out}</span></a>"
	));
?>	
</footer><!-- .archive-footer -->

Please note that I left a few extra lines commented as they are a good reminder of the functions that I can use in other templates. Also, by default the pagination has Prev and Next already defined so unless you want to change the text (another language or else), you can simply remove them and have a final version like this:

<footer class="archive-footer text-center">
	<?php echo $result->renderPager(array(	
		"listMarkup" => "<ul class='pagination pagination-custom'>{out}</ul>",									
		));
	?>	
</footer><!-- .archive-footer -->

Again, I am amazed by the elegance and simplicity of the final code. My whole idea to start such a "complicated theme" was to learn most of the aspects of the web-theming but not just some basic pages with no pagination, no menus, no other challenges that you can meet for your next project.

Moving forward to News listings and inner pages now.

[MilenKo]

Oops, I got too excited and removed the line with the class for the active page. Having it removed shows all the pages in the same color as well as while on the N-page the link is still clickable (which does not make much sense). I am adding the final code with the active lines and I changed the Prev/Next text strings with the one in the theme:

<footer class="archive-footer text-center">
	<?php echo $result->renderPager(array(	
		"nextItemLabel" => __("»"),
		"previousItemLabel" => __("«"),				
		"currentItemClass" => "active",
		"listMarkup" => "<ul class='pagination pagination-custom'>{out}</ul>",										
		));
	?>	
</footer><!-- .archive-footer -->

Ok, now triple checked - everything matches the original design, so moving forward 

[MilenKo]

Btw, I have noticed something strange - quite a lot of PW users are either Russians or germans. In youtube, I found two series of videos with how-to theme PW and they were both either on German or on English but done by German. Is there any specific reason for this fact, or it just happened to be like it?

What is interesting also is the fact that most of the technical videos done for PW or any other CMS/CMF can be watched and almost perfectly understood and followed with zero knowledge of the language as far as we just look and try to understand the goal of the video and how it was achieved by the example. I started watching the German series (around 22 videos) and am surprised that I can either understand or guess most of the talk but the video examples are a cool thing for me to learn and eventually improve my existing code.

So if you are like me wondering how to fix this/that or how to make it work, do not get desperate and try to find the answers yourself. Do not be afraid to get wrong or make mistakes as we are all there at some point that TOGETHER we get better, smarter and make the efforts worth as a final result.

I am moving forward to the News listings where I discovered some issues with showing the image thumbs of the news, so will have to work on that to make it work. I am realizing looking at the Skyscrapers and other examples that once I finish with the theme and it is in the desired finalized state, I will start looking at how to make fewer template files and apply the best practices of the Delayed output. So far I created a few templates and call there the $body etc. but once I am finished, the $body might be turned into $content and called in _main.php etc. So the fun will continue even after the HTML code is themed (again for the sake of learning and knowing it for the next project in line  )