MilenKo

Ok. Now it is time to move on to the search functionality. I am presently looking at skyscrapers to see how is done the search there. Should not be that difficult but will see. Any suggestions, ideas, warnings etc. are more than welcome. The difficulty for me would be to make it work with the drop down list of a child where the Articles, News and FAQ's are added as well as add another criteria - the page format (video, image, text). It's time for fun guys...

Hahah, Canucks I guess you call me because of the Canadian location of residence? I am not really Canadian even though I live here for a long time. Originally I am from a small sunny country located on the Black Sea Coast called Bulgaria But, no offense taken at all...

Adrian, your code did the trick perfectly. To be honest, at the beginning I created an image field and assigned it to the logo and anywhere else an image is needed, however, these days I decided to split them as somewhere I might need to allow a single image, somewhere an array, have different requirements for empty field etc. It won't hurt if you have a few different image fields, eg. logo, body_image, background or anything else. At least it does not make any template heavier... I will redo the images call everywhere now and move on. Thanks again, adrian for the suggestions and feedback. The reason I think PW is my final stop is that the community is GREAT!!!

AndZyk, I have tried to implement your suggestion as it looked much much clear and easy to digest, however it seems like PW is not thinking the same way. Here is the result when I inserted your code in the place of the image: Fatal error: Exception: Method Pageimages::size does not exist or is not callable in this context (in C:\OpenServer\domains\nowknow.pw\wire\core\Wire.php line 476) #0 C:\OpenServer\domains\nowknow.pw\wire\core\WireArray.php(2163): ProcessWire\Wire->___callUnknown('size', Array) #1 [internal function]: ProcessWire\WireArray->___callUnknown('size', Array) #2 C:\OpenServer\domains\nowknow.pw\wire\core\Wire.php(374): call_user_func_array(Array, Array) #3 C:\OpenServer\domains\nowknow.pw\wire\core\WireHooks.php(549): ProcessWire\Wire->_callMethod('___callUnknown', Array) #4 C:\OpenServer\domains\nowknow.pw\wire\core\Wire.php(399): ProcessWire\WireHooks->runHooks(Object(ProcessWire\Pageimages), 'callUnknown', Array) #5 C:\OpenServer\domains\nowknow.pw\wire\core\Wire.php(402): ProcessWire\Wire->__call('callUnknown', Array) #6 C:\OpenServer\domains\nowknow.pw\wire\core\Wire.php(402): ProcessWire\Pageimages->callUnknown('size', Array) #7 C:\OpenServer\domains\nowknow.pw\site\assets\cache\FileCompiler\site\templates\news-inner.php(25): ProcessWire\Wire->__call('size', Array) #8 and quite a few similar lines. Seems like it is unhappy to pass the thumbnail size. Any suggestions/ideas?

Woow.. Something good is going to come out of the Launch and learn Thank you Robin S and AndZyk for the useful corrections and the bonus info provided. Will start "fixing" the stuff to make the proper calls and then after finishing will move to the next step - the search. I see that New Zealand is also proud to have ProcessWire Masters

Francicio, my opinion would not differ from the rest here. I have always thought that a good editor should have everything in it (color changes, anchors, and all the cool features), however I came to the conclusion that I am losing control over the content and if for some reason I decide to switch to another editor, then some or all of the codes, styles etc. might break and cause big headaches. That is why I am trying to type most of the commands manually, type the stylings manually and define them in separate CSS (depending on the case) so the code is clear having just the styles call and the rest is done by CSS. In your case the code become much easier to read: <p class="blablabla" ; >This is a paragraph.</p> And in CSS you add the desired styling to .blablabla {....} Adding code inline would require you to change it on every instance once you change your mind for the appearance and in some cases having 10-20K of pages might be the worst nightmare. Having to change a few CSS lines of the .blablabla would be the cool and easy fix

Ok, so I worked today on the News template and I can say that so far I had no issues. I just noticed a strange mistake I made where the image of the inner pages was not showing. The issue was caused by an attempt to assign a variable for the inner page images by $child->image, where it was already described earlier, was not the right call. The code that shows properly the image and inserts the alt is this: <img src="<?php echo $page->image->url . $page->image;?>" alt="<?php echo $page->title;?>" width="600" height="480" class="entry-thumbnail" /> Another challenge was to make the date format in the inner pages appear as it is in the template (it is different in Articles and News listings, where in Articles shows N-days ago, but News shows the month day, year format). Here is the call I used to make it match 100%: News-inner: <time datetime="<?php echo date('Y-j-d, G:i', $page->created); ?>"><?php echo date('F j, Y', $page->created); ?></time> For the articles-inner, I did not add it yet but would use the same structure with just playing with the php date function and matching the appearance. Once done, I will share it with the rest of the progress. I have not yet determined what would be the next step as it might have some challenges - the search functionality with the dropdown box for searching within specific child pages or the comments. Most likely I will start implying the search in order to be able to start adding real content and searching for it. Any tips, tricks, ideas and so forth would be highly appreciated (as always). What I will be trying to implement is a good ajax search that would show some results or can search for any, or etc. Let's see how easy it is to make a search with PW. So far I am extremely pleased with the functionality so hopefully the rest of the theme won't change my mind

AndZyk, I wish I have studied German now knowing that youtube has some gorgeous PW series about how to do everything Thanks for the region function. It looks really cool and would help me better define the variables so that they does not overlap in my projects. Being a newbie means that sometimes I use variables that can fit the purpose, however, it is not a rare case to match purposes in different areas and has issues that would be hard to troubleshoot without the proper knowledge, tools etc.

Hello everyone. I am at a point of my template where I need to limit the text output to specific number of words, so so far I found two good suggestions - one is of Ryan and others in this topic and other one is of Soma. I tested both solutions and they seem to work, however I am just curious should I use that or there is something that have been implemented into the core? Honestly, I would think it would be nice to have a simple hook added which would make the text output limiter work with PW out of the box, however I am just a new user of PW so can't think of all the pros and cons of having done that. So far I added a functions.php file in my theme files and call it where the function is needed. One thing I am wondering is about the right way of including the file. Should I go with include in the templates where I need the text output to be limited or I should use require once?

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 )

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

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.

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.

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.

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.

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

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?

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

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

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

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

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.

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