MilenKo

Hello again guys. Reworking my Knowledge theme, I was asked by my colleagues to add a table of content where one can click and be lead straight to the point (anchor to a paragraph or else). I was checking a few hours now as to how can this be done and I am not sure I have found an answer. Now, to better understand the need, the idea is that I have a multi line text field that would be filled up with some text so I am aiming at showing some anchors automatically upon some action from the editor's side or else. So far the only doable way I think could work is to have a keyword, class or other html chunk that would be added to the text and then the whole field content scanned for that specific code/text and added to the anchors link in the sidebar. But if that is the best approach, I am not sure yet. Btw, I am not looking at just creating anchor to a specific text inside the field, but show a table of contents outside of the echoed field (like in a sidebar or else). Writing this now, I just got another idea of creating a new field where I would have content like: title, url (where title would be presented as the anchor text and url would be the link to the content) but it gets way more complicated and I am sure there was already someone else who have thought about this and have a more elegant way of achieving the goal. I attached a demo image, where the content is $page->body and the table of content is the h1/2/3 etc. tags inside of the text field.

Guys, I just edited the sidebar code as I noticed that both templates (listing and inner) were pulling the widgets from listing one only. Besides that I removed the $parent variable and inserted its value in the $widgets that now holds the proper query to listing or inner depending on the fact if the page is the parent or a child. Now it is working fine and the code got a bit shorter

After rethinking the Simple Widget Logic mechanism, I decided to try to unify the sidebar code, so that it can be included on every template where a need is. To make it work for all my listing and inner view templates, I needed to add some more logic to it. So here are the extra steps I took to make it happen: 1. All page listing template selectors variable was made identical (in the example bellow I am showing the change for Recipes parent template): before: //Build a selector and limit page results to 5 $recipes_list = $page->children("limit=5, sort=-created"); after: //$list variable would be used for every parent template to unify the sidebar query $list = $page->children("limit=4, sort=-created"); 2. Removed the $parent selector from every template. 3. Changed the variable in the page rendering code from $recipes_list to $list. 4. Copied the code for the sidebar and put it in a separate file, called _sidebar.php in the main template folder. In the sidebar I had the logic now: <div class="col-md-4 col-lg-3"> <aside> <div class="side-bar"> <?php //Check if the present page has children if($page->hasChildren()) { //Grab the parent from $list and set the widgets source to listing_widgets field $widgets = $list->first()->parent()->listing_widgets; } else { //If the page is a child, grab the parent and set the widgets source to inner_widgets field $widgets = $page->parent()->inner_widgets; } //Loop through all the widgets setup in the parent template foreach ($widgets as $w) { //Including all the widgets by file name and order set in the parent widgets field include ('./includes/widget-' . $w->title . '.php'); } ?> </div> </aside> </div> 5. Included the _sidebar.php in every template (listing and inner): <!-- Sidebar --> <?php include ('./_sidebar.php') ?> <!-- Sidebar --> And voila, now the sidebar markup is unified and depending on which template is rendered the $parent is pulling its name and then all the widgets selected in the parent field are applied. An improvement would be to make the system work with a delayed output, but I am not yet there. Hopefully I will switch to it in my profile v. 2 Note: There is only one issue I see with this approach - if I decide to move the _sidebar.php to the include folder where all the widgets resign, changing the path of the widgets to: include ('./widget-' . $w->title . '.php'); works only for the parent template, but not for the children. While browsing the children pages, it shows that the widgets path is not found. That is why I had to move the _sidebar.php to the main templates folder so that the path is working for both. Maybe someone knows a way to have that fixed so that I could move the sidebar file back to /includes/ folder?

I am starting to think that this approach can be used to widget-ize a profile completely if the widget names are descriptive and their code inserted in the right spot. I have had a theme for WordPress where initially there was nothing on the main page but a bunch of widgets and a big list of widget areas to insert them. Sky is the limit, but some more extent might be needed for the things to work perfectly Will try to take the approach on next project and see how it goes...

Hey everyone. I am at a stage of code cleaning for my first PW profile where I decided to implement some sidebar widget logic that would allow me to remove code repetition. I read about a few widget logic approaches that were working fine but that seemed too complicated for my needs so decided to implement something really simple that would do just that - widget logic that can be changed through the admin but not through code editing. So before I share my idea, I would give you some info of the structures I have: -- Recipes ---- Child 1 ---- Child 2 -- Ingredients ---- Child 1 ---- Child 2 So in my project needs, I wanted to have a solution that would allow me to set through the profile admin one or group of widgets per template (it would allow unlimited widgets as far as I have the code for it). So to achieve this functionality, I took the following steps: 1. Create a template, called widget_logic and set the allowed template for children to be itself (widget_logic) 2. Create a page Site Widgets and assign to it the widget_logic template. 3. Create a field called listing_widgets and set its type to Page Reference. 4. In Details tab select Multiple Page Array to allow multiple widgets to be selected. 5. In the input tab chose Page Auto Complete as input field type. 6. In Selectable pages point the parent to your widgets page name (Site Widgets in this example) and set the widgets_logic as the template. 7. Repeat the steps 3-6 creating another field: inner_widgets (this would allow you to have different widgets per listing template and inner page ) 7. Add manually the child pages with the widgets names in Site Widgets page you just created. 8. Assign the fields to the parent templates that you want the widgets to be pulled from (in this case: Recipes, Blog etc.) 9. In the template code, pull the page parent through API using the loop you use to list the results in the page. For this tutorial I will set the widgets to Recipes template that shows a listing of all the recipes matching my criterias: //Build a selector and limit page results to 5 $result = $page->children("limit=5, sort=-published"); //Pull the parent of the first child-page to be used for widget logic $parent = $result->first()->parent(); 10. Once we know the parent and we know the field names assigned to it containing the widgets, we use a simple loop in each template to get the selected widgets name and include them where needed. Note, for the widgets naming I used: widget-XXX-YYY.php (eg. widget-recipe-top.php). If you prefer other naming, make sure you change the include line to match the new names. //Loop through all the widgets setup in the parent template foreach ($parent->listing_widgets as $w) { //Including all the widgets by file name and order set in the parent widgets field include ('./includes/widget-' . $w->title . '.php'); 11. In the Recipe-inner template I would do the same: $parent = $page->parent(); //Loop through all the widgets setup in the parent template foreach ($parent->inner_widgets as $w) { //Including all the widgets by file name and order set in the parent widgets field include ('./includes/widget-' . $w->title . '.php'); } NOTE: in the inner page template I changed the field name to inner_widgets to pull the widgets for the inner page. 12. Now all that is left is to assign the two fields to every parent and/or inner page template that you would like to use the simple widget logic and select the widgets for each one. It might not be the best approach, however it is super simple to setup and allows me to have different widgets on any template now. The variety of widgets could be extended at any time by just adding the new widget, create the page with the name for it and assign it to the chosen template. Having the Page Auto Select field would allow you to drag and drop the widgets to reorder them so it suited my needs perfectly. Hope it would for you as well. Any code improvements are more than welcome (as usual P.S. On the image of widgets view, I set the size of both fields to be 50% so that they show up on the same line and save the space and scrolling.

@kongondo Thanks for the link. I checked it up and it is interesting approach, however it seems like the post author was trying to render two sources on the same page and paginate the results where in my case I am just trying to show the results of two queries but pagination is needed only for the one.Will try to test the solution provided there, but it is not yet clear for me how that approach would fit in my scenario. Edit: I found a simple way to fix the issue, and it was right under my nose in the pagination markup explanation. To make the queries work where I do not want the PageRendering to happen, I just added start=0 into the find query: $favorite_books = $pages->find("template=books-inner, sort=-random, start=0, limit=3"); Thanks again for pointing me to the initial link which gave me an idea how to phrase my search and bring me to the right spot. As far as I wanted to pull N-random requests, it works perfect. One more step closer to the end

Hello guys. I am super happy to be passing to the final cleanup of my first custom build theme and to start applying the SEO optimization modules/code. I noticed something strange this morning and can't find out where exactly is my issue. Hopefully it is a quick fix or silly miss on my side. So here is the issue: I am generating a list of all my recipes in the db using the following query: <?php if($page->numChildren) { //Build a selector and limit page results to 10 $recipe_results = $page->children("limit=4"); //Assign results of the array to $listing foreach($recipe_results as $index => $listing) { //Limit the text content to 160 chars using the function in function.php $text = $sanitizer->textarea(truncate("$listing->recipe_intro_text", 160)); ?> Then follows the boring part of html insert of the variables, clases etc. The listing works fine. So as far as there would be more than the planned results per page, I implemented the page rendering using the following code: <!-- Pagination --> <?php echo $recipe_results->renderPager(array( //Show font awesome right hand icon for next page 'nextItemLabel' => __("<i class='fa fa-hand-o-right'></i>"), //Show font awesome left hand icon for previous page 'previousItemLabel' => __("<i class='fa fa-hand-o-left'></i>"), //Define the active class of current page 'currentItemClass' => "current", //Define the block markup code 'listMarkup' => "<ul class='page-nav'>{out}</ul>", //Define the item markup code and applying currentItemClass 'itemMarkup' => "<li class='{class}'>{out}</li>", //Generating the link appearance of all buttons 'linkMarkup' => "<a href='{url}'>{out}</a>", )); ?> <!-- Pagination --> And again, everything worked perfectly after I allowed page numbers. So then I implemented a few similar queries in the sidebar of my website, listing content from other page parents/children. Here is one example: <?php $favorite_books = $pages->find("template=books-inner, sort=-random, limit=3"); foreach($favorite_books as $b) { if (count($b->book_images)) { $thumb = $b->book_images->first->size(70,60)->url; $desc = $b->book_images->first->description; } else { $thumb = $settings->small_thumb->url; $desc = "NoThumb"; } ?> <li> <div class="thumb"> <a href="<?php echo $b->url?>"> <img src="<?php echo $thumb?>" alt="<?php echo $desc?>"/> </a> </div> <div class="detail"> <a href="<?php echo $b->url?>"><?php echo $b->title?></a> </div> </li> <?php } ?> It was all working fine, until I started browsing page 2, 3, etc. It appears for some reason, that the pageRendering is applied not only to $recipe_results, but also to all requests from the widgets. So on page 1, I get the proper number of recipes and proper number of results in the widgets (books in this example). If I browse to page two, I still see the proper recipes number and everything else, but the widgets show only 1 result (as far as I have imported 4 test posts only). On page 3, it shows notihing in the widgets, but recipes are OK again. As far as to render pages I am using $recipe_results and the pageRender is called for that variable, I am not sure why it is also applied to $favorite_books and other widgets. Any suggestions or ideas what is going on? I tried to change every variable on the page thinking that I might be having a call to the same one, but it is obvious in the example that they do not match...

Hello guys. Does anyone has a working example of showing comment listing and comment form via the API that would include the page rating and comments voting? For sure I could edit the FieldTypeComments to apply the new code, but I find it much easier to call the comments via API. Unless there are some reasons to astray from using the API and use the official rendering methode?

@fbg13 & @abdus I really liked your approach as it allows much more simplicity and would avoid bulking up the _function.php . So for the record, here is my code that is fully operational and now shorter and simpler: <?php $com_heading = ''; //Counts the number of comments to list $count = count($page->comments); //Define comment header text $com_heading = "Only $count " . _n('person', 'persons', $page->comments->count) . " commented this recipe. Be the next one!"; //Render comment list echo $page->comments->render(array( //Insert the custom code for the CommentList headline 'headline' => '<h3 class=\'lined\'>' . $com_heading . '</h3>', )); ?>

Hey everyone. I was reading carefully today almost any post about custom comment listing and forms styling and am super thankful to everyone that shared their knowledge so that a newbie like me could manage to get the comment listing properly applying my custom styles. As far as the the Comment header I have required to post the number of persons that have commented the page, I was facing an issue of singular/plural of the word persons (in my case but could be comment/s etc.) of the count. Looking for a lazy way to achieve that, I found one small function that takes the check for me. If someone is interested to test it, feel free to add this code to your _functions.php or include it in your template code: //Original code: https://stackoverflow.com/questions/4728933/function-switching-between-singular-and-plural function plural( $amount, $singular = '', $plural = 's' ) { if ( $amount === 1 ) { return $singular; } return $plural; } And in my template comments rendering call I used it like this: <?php $com_heading = ''; $count = count($page->comments); $person = ' person' . plural($count); if($count) { $com_heading = "Only " . $count . $person . " commented this recipe. Be the next one!"; } echo $page->comments->render(array( 'headline' => '<h3 class=\'lined\'>' . $com_heading . '</h3>', )); ?> Maybe there is an easier/smarter way to achieve this, but this works fine for my needs and thought someone might find it useful one day...

Just to add for those who might be taking my steps, it is not just enough to refresh the Modules, but there are 3 files to point to the new location which would appear in the notifications - module, form and list. I thought I was going crazy as even if I delete the whole file content, it was still showing the comments after I changed the first file path, but not all of them.

Oh boy, that was easy... Ok, one thing less to worry (thanks to you again!!!) Now the fun part would be how to edit the module to make it match my markup of the comments list and the form, but will see what's how now when jquery and module copy are out of the way. Thanks again, @abdus

@abdus How can this be done? I have not activated the cache on the template to avoid similar issues, but is there another place to do clear as well for the module? So to be clear, I just copies the folder FieldtypeComments from /wire/modules/Fieldtype and pasted it to /site/modules/ Then went to clear the whole cache folder /site/assets/cache and I am still seeing the path of the FieldTypeComments to point to /wire/... Trying to edit some of the code in /site/modules/FieldTypeComments is not showing on the frontend, but if I edit /wire/ one it does.

Ok. I seem to have another issue indirectly connected to the comments - the HTML theme is build on jquery 1.11.3 so the comments are not working (rating and vote). At first I tried to replace the call for 1.11.3 with the 3.2.1 but that breaks the pre-loader and the jquery popups. Tried to include both for the test, but it did not work either, so I will have to find a way to find the difference between 1.11.3 and 3.2.1 and update the jquery in order to use the proper functionality. As far as my custom form is working for now, I don't think this is the best way to approach it, so will try to render the comments and edit the code to match my markup. This way will know that all the built in code would work fine. P.S. Moving the files to my /js/ folder seemed to work now. Go figure what was the problem, but I am now with a working comments form and listings (rating, vote etc.) so will see what needs to be edited in the code to make it work and move on.

@abdus Thank you very much for the precious advice. Will try that for sure to get how the system is working. For the moment I decided to not edit the default module code, rather than using custom code that I used in a previous project and it worked sort of OK. I am saying sort of OK as I am not sure of a few things how to implement yet: 1. The time format of (X days ago) that is working fine if I render comments but in the custom code - not clear yet (how to call $cite or {cite} in my custom form without the use of external functions to iterate the date format. 2. How can I call the stars rating in my custom code. 3. Same thing for the comments voting.

Ok, I figured out why the comments rating and up/down vote system was not working. Initially I thought that I did not include the comments.css and comments.js files but they were included and the path was correct. The issue seemed to be with jquery that was loaded locally from the theme files. I am not sure why it would work for the rest but not for the comments, however as soon as I included the cdn version of 3.2.1, it all started working fine so now it is just to apply the custom style to render the comments as they should be in the theme. I decided to copy the /wire/modules/Fieldtype/FieldtypeComments to my site modules folder /site/modules/FieldtypeComments and apply the modifications I need there, however I am not sure if that is the only requirement as far as any modifications that I have to site/modules instance are not applied, but those from /wire/ are showing... Anything I am missing here?

Oh, that would explain why the stars are pulling up that field as well as everything else. Thank you very much @abdus. In regards to the custom comments form/listings which way you would go to style everything if you would use custom HTML provided? I am sure if I am building my htmls myself I would apply the default styles and simply render the forms, but am not yet there

Hello all. I have almost completed my recipe project and am now again at a stage of implementing the comments and comments rating system. From my past notes of NowKnow I am able to make the custom form using the API sample here however I had no need to allow rating the comments and eventually use the comments to rate the recipe. Now I decided to try to implement the comments system by the standard way of rendering them. For the purpose I created a field 'comments' and assigned it to my recipes_inner template. After adding a feew comments I was able to see them in the page as well as the form to add a few new. So this proved that the setup works and now I am at a stage of applying my custom styles to make the comments and the submission form appear properly. So reading any posts in regards to that matter i got a bit confused as to should I make a copy of the fieldtypecomment in my site/modules folder and apply the modifications directly there, or use some of the arguments provided here . As far as I am not in a need of some heavy modifications of the code, other than applying my styles, would it be possible to apply all my classes via the arguments or it would still make more sense to edit the code of the module to make the changes there? I am facing a few strange issues with the stars rating and comments votes: 1. When I mouse over to the stars, I am shown a number field above them with the chance to select a number from 1 to 5 instead of just hovering to the stars to set the rating. 2. When I select the rating to 0 using the down arrow and then try to go lower than 0, I get a message: Automatic Credit Card filing is disabled because this form does not use a secure connection 3. If I click on the comment voting buttons (up/down arrows) the number does not increase or decrease other than bringing me to the comment posting form. At first I thought I am doing something wrong, but I do not have anywhere in my code the error about the credit card, so smth. else is happening. Would a behavior of point 1, 2 or 3 be normal for the out-of-the box module installation and my calls: <div class="recipe-comments"> <?php $count = count($page->comments); // Count the comments number echo $page->comments->render(array( 'headline' => '<h3 class="lined">There are (' . $count . ') opinions about this recipe</h3>', 'commentHeader' => '<h5><a href="#">{cite}</a></h5><span class="time">({created})</span> {stars} {votes}', )); ?> </div> <div class="comment-form"> <?php echo $page->comments->renderForm() ?> </div> Besides that, what would you consider best option of applying my custom styles, as I don't see a way to provide any arguments for styling the comment appearance (other than the one for the comments posting) ?

@abdus Thanks for the suggestion and the array approach. I tested out the code and it shows the values, but the markup it returns is not correct and that messes up the appearance. Here is the original markup: <div class="nutritional"> <h3>Nutritional</h3> <div class="nutrition-detail"> <div class="left-box"> Protine <br> <span>6.60g</span> </div> <div class="right-box"> Fat Saturated <br> <span>39.5g</span> </div> </div> <div class="separator-post"></div> <div class="nutrition-detail"> <div class="left-box"> Deitary Fiber <br> <span>50g</span> </div> <div class="right-box"> Sodium <br> <span>10g</span> </div> </div> <div class="separator-post"></div> </div> And here is what the array code generates: <div class="nutritional"> <h3>Nutritional Info</h3> <div class="right-box"> Calories<br> 1000 kj </div> </div> <div class="separator-post"></div> <div class="right-box"> Saturated<br> 2 gr </div> </div> <div class="separator-post"></div> The way I see it, it does not insert nutrition-detail div at all as well as does not apply class left-box. Also it inserts a </div> on every odd row that is closing the main "nutritional" div and moves the rest out of it. I will play with the code to see where it goes wrong

@szabesz you are perfectly right about regexp but I found a way to generate it using different sources from Internet and try/error. @abdus - your code looks much better to understand so I decided to give it a try and use it, however it did not apply the divs properly. I noticed a small typo that was causing the values not to show - in the checks line it was $item->value, so I changed it to $item->unit and it showed the results. There was an issue where the first value was coming with right-box so I had to change $i = 1 and it worked. Besides that, I added the separator div that was not applied and added a check to avoid showing the separator on the last line (as it is in the theme). Here is the final code: Thanks again for the code and idea. Now I can move to the next part...

@szabesz I found the idea in your links and made it to work perfectly for my needs so far:

@szabesz I must have copied here one of the tests I ran. so $i = 1 and at the end of the loop I am increasing it: $i++; I edited the example code. I thought to give a try of YAML, but the initial idea to get the nutrition into a text field is to simply copy the values from a specific program that we use to generate the totals for a specific group of ingredients. @kongondo Initially I started with a repeater, but I find it to be too much to add 10-12 values in the repeater. I do use the repeater for the recipe steps where I need to have images, text, step timing etc. and it works great, but for the nutrition I think it is much easier in my case to copy/paste the generated values. Will see the chessboard examples for a hint. I might also edit the CSS to avoid the insertion of the row div for left and right block. I find it to be much better coded if all the boxes are using the same class and adding two keeps them on the same row, but the third shows on the next one and so fort. This way a simple FOR loop would do the trick super easy. The question is more like if it ever happens to deal with such scenario how to find a suitable working example

Hello guys. I am almost on the final line of building my second complete website with ProcessWire and got stuck a bit on the recipe nutrition presentation. I am not sure if I would be able to explain it promptly, but will do my best. So I have the code in my HTML template: So to fill up the values in the frontend, I am using a simple TextArea field and dropping the following content: As far as I needed to split the text field into separate lines and every line into 3 parts (nutrition name, quantity and measure) I used regex code to sort everything through and the results are OK. Now the issue I am facing is that as per the theme, I need to assign class to left or right block and on top of that to close the nutrition-detail div after every right-box div. For the class I added $counter and using odd:even managed to assign the class of left-box & right-box. But I am having difficulty to insert the opening div of nutrition-detail on the beginning of every row and the closing div after the second block. Here is the code that sort of works, but is not inserting the divs properly: Any suggestions how to go around or some simple function to introduce to make it work? I tried to add another check for odd:even and if the result is odd, to insert the <div class="nutrition-detail"> and close the div if even, but I am still missing something...

Thank you @abdus and @bernhard for sharing your ways. It is always interesting to find out some ways to have an easier and lighter approaches. Will try the next theme to accomplish the multiple use of single fields and setting up the differences in the code.

Hello all. I know it might sound silly, but wanted to check how are you guys proceeding if in the theme development you have a need of some fields that are repeating in several templates. For example, I am having an image field that can be used as the site logo in "Settings" template or as to show the page image in the markup of the inner page template or else. I am aware, that if I leave the resizing in the markup, than the field can be used on multiple templates, but the field has some specific label/description, notes and/or placeholder that would be not-related. Sticking to the logo example, I have a label saying: Add your logo image here. So if I use the same field for something else, the same text would show while editing the new next page calling for image. How are you guys taking care of this? Are you creating specific fields for every aspect of your theme or there are some tricks I am missing in the big picture? P.S. Besides the descriptive text of the field some might require to have a single image and some an array (e.g. you don't need to upload multiple logos, unless you want to randomize or call one based on some criterias, but for a gallery - sure I would have multiple)