Roych Posted March 1, 2018 Share Posted March 1, 2018 Hello Im having some problems creating sortable portfolio I tried everything that I could think of, but as I'm not a coder this is just to much I guess. So as I said I'm making a simple sortable portfolio, where the portfoio items shuffle between categories on click. For categories I'm using pagefield so that for every item you can select or give a new category. (logo, graphics, photography, websites, etc.) The HTML code looks like this: <div class="container"> <div class="portfolio-content"> <div class="portfolio-filter-wrap text-center" > <ul class="portfolio-filter hover-style-one"> <li class="active"><a href="index.htm#" data-filter="*"> All</a></li> <li><a href="index.htm#" data-filter=".cat1">Graphic</a></li> <li><a href="index.htm#" data-filter=".cat2">Branding</a></li> <li><a href="index.htm#" data-filter=".cat3">Coding</a></li> <li><a href="index.htm#" data-filter=".cat4">Photography</a></li> <li><a href="index.htm#" data-filter=".cat5">Development</a></li> </ul> </div> <div class="portfolio portfolio-gutter portfolio-container portfolio-masonry portfolio-column-count-3"> <div class="portfolio-item cat1 cat3 "> <div class="portfolio-item-content"> <div class="hover-3"> <div class="overlay3"> <a href="single-details-two.html"><i class="fa fa-link"></i></a> </div> <img src="img/portfolio/3-column-gutter/1.jpg" alt=""> </div> </div> </div> <div class="portfolio-item cat1 cat2 "> <div class="portfolio-item-content"> <div class="hover-3"> <div class="overlay3"> <a href="img/portfolio/3-column/2.jpg" class="portfolio-gallery-set"><i class="fa fa-eye"></i></a> </div> <img src="img/portfolio/3-column/2.jpg" alt=""> </div> </div> </div> </div> <div class="pagination-area"> <div class="load-more text-center"> <a class="button-hover" href="index.htm#">View More <i class="fa fa-long-arrow-right"></i></a> </div> </div> </div> </div> Si I've tried with something like this. I can see the categories menu but it just wont work. <div class="container"> <div class="portfolio-content"> <div class="portfolio-filter-wrap text-center" > <ul class="portfolio-filter hover-style-one"> <li class="active"><a href="index.htm#" data-filter="*"> All</a></li> <li> <?php foreach($pages->find("parent=1034") as $item) { echo "<li><a href='index.htm#' data-filter='.{$item->select->category}'>$item->title</a></li>"; } ?> </li> </ul> </div> <div class="portfolio portfolio-gutter portfolio-style-3 portfolio-container portfolio-masonry portfolio-column-count-3"> <?php foreach ( $pages->find('template=portfolio-detail, sort=-created') as $single ):?> <div class="portfolio-item {$item->select->title}<?php echo $single->select->title ?> "> <div class="portfolio-item-content"> <div class="item-thumbnail"> <img src="<?=$single->images->first->url ?>" alt="<?= $single->images->description->first ?>"> </div> <div class="portfolio-description"> <div class="action-btns"> <a href="<?=$single->url?>"><i class="fa fa-eye"></i></a> </div> </div> </div> <div class="portfolio-bottom"> <h4><?=$single->title?></h4> <h6><?php foreach($single->category as $item) { echo "<li><a href='$item->url'>$item->title</a></li>";} ?> </h6> </div> </div> <? endforeach; ?> </div> <div class="pagination-area"> <div class="load-more text-center"> <a class="button-hover" href="index.htm#">View More <i class="fa fa-long-arrow-right"></i></a> </div> </div> </div> </div> So the template is called portfolio-detail and the pagefield name is category with parent ID of 1034. I hope u understand what I mean. Or is there any easier way to do that? Oh, the View More button is also the thing on how to do it, but not so important. Thank you very much. R Link to comment Share on other sites More sharing options...
elabx Posted March 1, 2018 Share Posted March 1, 2018 I think your are outputing things wrong I see this line: <?php foreach($pages->find("parent=1034") as $item) { echo "<li><a href='index.htm#' data-filter='.{$item->select->category}'>$item->title</a></li>"; } ?> </li> You say the category field is named category? what is that select field you are accessing? I would have expected the code to be like this: <?php foreach($pages->find("parent=1034") as $item) { echo "<li><a href='index.htm#' data-filter='.{$item->title}'>$item->title</a></li>"; } ?> </li> This should output the category title. And on the actual portolio items: <div class="portfolio-item {$item->category->title}<?php echo $single->category->title ?> "> 2 Link to comment Share on other sites More sharing options...
Roych Posted March 2, 2018 Author Share Posted March 2, 2018 hello, thank you for helping. I tried your code and now the menu itself is working great, but gives no results, it tryes to shuflle but it gives empty page. So I think there is a problem with this here. <div class="portfolio-item {$item->category->title}<?php echo $single->category->title ?> "> I think by looking at HTML it should be the same as data-filter in menu but not working. Or maybe there is something wrong with my settings in the page field? Thank you R Link to comment Share on other sites More sharing options...
szabesz Posted March 2, 2018 Share Posted March 2, 2018 @Roych I pasted your code of the first post and it has syntax errors, so you should sort those out first. I recommend you follow guidelines such us: https://www.ntchosting.com/encyclopedia/scripting-and-programming/php/php-in/ In the article there is the "Possible yet not recommended usage:" section. Do not do that For example, do not do this: <?php foreach($pages->find("parent=1034") as $item) { echo "<li><a href='index.htm#' data-filter='.{$item->select->category}'>$item->title</a></li>"; } ?> instead: <?php foreach ($pages->find("parent=1034") as $item) : ?> <li> <a href='index.htm#' data-filter='<?= $item->select->category ?>'> <?= $item->title ?> </a> </li> <?php endforeach; ?> Much cleaner and a harder to make mistakes. But most importantly, do not mix coding styles 4 Link to comment Share on other sites More sharing options...
Roych Posted March 5, 2018 Author Share Posted March 5, 2018 On 2. 3. 2018 at 9:55 PM, szabesz said: Much cleaner and a harder to make mistakes. But most importantly, do not mix coding styles Thank you I will try to keep it clean. I'm still lost on this one any help on how would be the best way to do this kind of sortable portfolio. I tried everything nothing sems to work. Thank you R 1 Link to comment Share on other sites More sharing options...
szabesz Posted March 6, 2018 Share Posted March 6, 2018 7 hours ago, Roych said: I'm still lost on this one any help on how would be the best way to do this kind of sortable portfolio. I tried everything nothing sems to work. Could you please post your current ("cleaned up?") code? When you post it, you might want to put long blocks of code in a "spoiler" (eye icon in the toolbar) so that the whole thread is easier to follow. 1 Link to comment Share on other sites More sharing options...
Roych Posted March 6, 2018 Author Share Posted March 6, 2018 ok, here is my clean (hope so) code that I currently have but not working. Spoiler <!-- Portfolio content --> <div class="container"> <div class="portfolio-content"> <div class="portfolio-filter-wrap text-center" > <ul class="portfolio-filter hover-style-one"> <li class="active"><a href="index.htm#" data-filter="*"> All</a></li> <?php foreach ($pages->find("parent=1061") as $item) : ?> <li> <a href='index.htm#' data-filter='<?= $item->title ?>'> <?= $item->title ?> </a> </li> <?php endforeach; ?> </ul> </div> <div class="portfolio portfolio-gutter portfolio-style-3 portfolio-container portfolio-masonry portfolio-column-count-3"> <?php foreach ( $pages->find('template=portfolio-detail, sort=-created') as $single ) : ?> <div class="portfolio-item <?= $item->title ?> "> <div class="portfolio-item-content"> <div class="item-thumbnail"> <img src="<?=$single->images->first->url ?>" alt="<?= $single->images->description->first ?>"> </div> <div class="portfolio-description"> <div class="action-btns"> <a href="<?=$single->url?>"><i class="fa fa-eye"></i></a> </div> </div> </div> <div class="portfolio-bottom"> <h4><?=$single->title?></h4> </div> </div> <? endforeach; ?> </div> <div class="pagination-area"> <div class="load-more text-center"> <a class="button-hover" href="index.htm#">View More <i class="fa fa-long-arrow-right"></i></a> </div> </div> </div> </div> <!-- portfolio content end --> Ok what I have done in detail. I have template (portfolio-list) with the above code. Each of the single item has the template (portfolio-detail) I created a page field with name category (Type=PageReference, Details=Multiple, Input -> AsmSelect, Parent of selectable page(s)=Kategorije(created hidden page with children), Selectable template= portfolio-detail, Allow new ... (field is added to portfolio detail template) That is all I have done, or do I need to have any additional templates for this ... Looking at the HTML on my first post it should work, or am I missing something. Not a coder and new to PW, also first time making this kind of sorting. Thank you R 1 Link to comment Share on other sites More sharing options...
szabesz Posted March 6, 2018 Share Posted March 6, 2018 Thanks for the code. First of all it is missing the word "php" from the second loop's end: instead of <? endforeach; ?> it should be: <?php endforeach; ?> Next, your second loop variable is $single, but you have a <?= $item->title ?> in the code, it might be possible that it should be <?= $item->single ?> but maybe not, because you also have <h4><?= $single->title ?></h4> in the loop so what is that title you are trying to output in the second loop? You cannot simply reference the previous loop's variable like this, because that value is already discarded by the time the code execution gets here (that is: we have two different variable scopes). 23 minutes ago, Roych said: I created a page field with name category (Type=PageReference, Details=Multiple, Input -> AsmSelect, Parent of selectable page(s)=Kategorije(created hidden page with children), Selectable template= portfolio-detail, Allow new ... (field is added to portfolio detail template) Where is this category in your code? I cannot see it being used. 1 Link to comment Share on other sites More sharing options...
Roych Posted March 6, 2018 Author Share Posted March 6, 2018 6 minutes ago, szabesz said: Where is this category in your code? I cannot see it being used. The page field would not be outputed on front end (only ) and is only used for shuffling between categories. If you look at my code above I bolded the code that should be changed for it to work. (at least from looking at the original html it should) The (data-filter='<?= $item->title ?>') and <div class="portfolio-item <?= $item->title ?> "> should somehow be connected, but with the category field, so Im not sure how to do that. ... The <h4><?= $single->title ?></h4> is only used to output the title of a single item nothing more (used by the default title field) Posting an image of what Im creating. Link to comment Share on other sites More sharing options...
Christophe Posted March 6, 2018 Share Posted March 6, 2018 Hi, <a href='index.htm#' data-filter='<?= $item->title ?>'> Why single quotes here? <div class="portfolio-item <?= $item->title ?> "> Space not needed before the closing double quote? <img src="<?=$single->images->first->url ?>" alt="<?= $single->images->description->first ?>"> Order of the "description" code? (Sometimes you may need the use of curly braces in order to make the code work when there are quite a few "->".) Do you have code highlighting (for html, css, php...) available/activated in your code editor? It helps. Often, a little detail can make it not work. 1 Link to comment Share on other sites More sharing options...
szabesz Posted March 7, 2018 Share Posted March 7, 2018 (edited) On 3/6/2018 at 3:53 PM, Roych said: The (data-filter='<?= $item->title ?>') and <div class="portfolio-item <?= $item->title ?> "> should somehow be connected, but with the category field, so Im not sure how to do that. ... I'm not quite sure how the original shuffling masonry gallery needs the css classes to be applied, but you probably need nested loops, something like: Spoiler <?php namespace ProcessWire; $cat_items = $pages->find("parent=1061"); //If you have Tracy Debugger module installed with bd() enabled, you can uncomment this: //bd($cat_items); // alternative use this: error_log(print_r($cat_items,true)); // and find the output in site's PHP log file $portfolio_details = $pages->find('template=portfolio-detail, sort=-created'); //If you have Tracy Debugger module installed with bd() enabled, you can uncomment this: //bd($portfolio_details); // alternative use this: error_log(print_r($portfolio_details,true)); // and find the output in site's PHP log file ?> <div class="container"> <div class="portfolio-content"> <div class="portfolio-filter-wrap text-center" > <ul class="portfolio-filter hover-style-one"> <li class="active"><a href="index.htm#" data-filter="*"> All</a></li> <?php foreach ($cat_items as $item) : ?> <li> <a href="index.htm#" data-filter=".<?= $item->title ?>"> <!-- should data-filter=". start with dot or not? --> <?= $item->title ?> </a> </li> <?php endforeach; ?> </ul> </div> <div class="portfolio portfolio-gutter portfolio-container portfolio-masonry portfolio-column-count-3"> <?php foreach ($cat_items as $item) : ?> <?php foreach ($portfolio_details as $single) : ?> <div class="portfolio-item cat1 <?= $item ?> "> <div class="portfolio-item-content"> <div class="item-thumbnail"> <img src="<?= $single->images->first->url ?>" alt="<?= $single->images->description->first ?>"> </div> <div class="portfolio-description"> <div class="action-btns"> <a href="<?= $single->url ?>"><i class="fa fa-eye"></i></a> </div> </div> </div> <div class="portfolio-bottom"> <h4><?= $single->title ?></h4> </div> </div> <?php endforeach; ?> <?php endforeach; ?> </div> <div class="pagination-area"> <div class="load-more text-center"> <a class="button-hover" href="index.htm#">View More <i class="fa fa-long-arrow-right"></i></a> </div> </div> </div> </div> Note that in your original sample code I see this: data-filter=".cat4" meaning there is prefixing a dot there but not in your code. I also recommend storing the result of the page find selectors in variables, so that you can test easily what you really have. Assigning them to variables also makes it possible to reuse them, which will be needed if you need nested loops. I'm not saying the above code is what you need, because I do not get how the masonry should be assembled in the first place. Can you provide a working demo by any chance? Edited March 7, 2018 by szabesz typo 2 Link to comment Share on other sites More sharing options...
Roych Posted April 3, 2018 Author Share Posted April 3, 2018 Hello, first I'm sorry for my laaate reply to this, I was away from my PC and couldn't post anything. Have to say Im still stuck on this. @szabesz I tried your code above but it's not working as it should. It shows all item all the time, so if clicked on (show all) it shows multiple rows of all items (depends on number of categories). I'm posting a link to the preview here. The site is stil in developement, so don't bother with other stuff. http://gregor-design.com/wire/en/portfolio/ On Home you can see the working html and on portfolio page is the one Im trying to create. Thank you again for helping R Link to comment Share on other sites More sharing options...
dragan Posted April 3, 2018 Share Posted April 3, 2018 /* --------------------------------------------------- PORTFOLIO FILTERING ---------------------------------------------------- */ $('.portfolio-filter').on('click', 'a', function() { $(this).addClass('current'); var filterValue = $(this).attr('data-filter'); $(this).parents('.portfolio-filter-wrap').next().isotope({ filter: filterValue }); }); this is in your main.js. filterValue is looking for data-attributes, not CSS classes! So: either change the markup and use data-filter="Logo" etc. or change the JS. btw, afaik, you'd be better off using jQuery's $(this).data("filter") instead of attr() (but maybe it just depends on your jQuery version - as long as it works, it works.) 1 Link to comment Share on other sites More sharing options...
Roych Posted April 3, 2018 Author Share Posted April 3, 2018 2 hours ago, dragan said: So: either change the markup and use data-filter="Logo" etc. or change the JS. btw, afaik, you'd be better off using jQuery's $(this).data("filter") instead of attr() Thank you for looking into this, but not sure how would I aproach this as I'm not a coder. R Link to comment Share on other sites More sharing options...
szabesz Posted April 4, 2018 Share Posted April 4, 2018 @Roych Can you send me a copy of the site? It would be easier to help by taking a closer look. You can use Duplicator to pack it up easily. I would have time to examine it this weekend. Just PM me if you want to proceed this way. 3 Link to comment Share on other sites More sharing options...
Roych Posted April 4, 2018 Author Share Posted April 4, 2018 2 hours ago, szabesz said: @Roych Can you send me a copy of the site? It would be easier to help by taking a closer look. You can use Duplicator to pack it up easily. I would have time to examine it this weekend. Just PM me if you want to proceed this way. PM sent Thank you very much R Link to comment Share on other sites More sharing options...
szabesz Posted April 5, 2018 Share Posted April 5, 2018 (edited) Hello Roych, First of all, I recommend a few things: Installing @adrian's TracyDebugger module. Makes development a lot easier, you can instantly spot issues like undefined variables and null objects, it also has support for one click online html validating and about a hundred more features to ease the "pain" I mean to help get more fun out of coding. Also, turning on $config->debug = true; in config.php is very helpful during development. Next, after a successful system or module upgrade you might want to delete files/directories beginning with a dot, in your case:/.wire-3.0.36 /.htaccess-3.0.36 /.index-3.0.36.php /site/modules/.MarkupSimpleNavigation I installed @tpr's AdminOnSteroids as it has very useful features to support development: in the Page Tree it can show the ID and templates of a page, it has a one click jump link to open template/field editor pages right from a page editor page (just hover over the lables and links appear in tooltips) so it made it easy to find my way around your template/field setup. Actually, it always makes it easy to find my way around MY OWN setups too! I also uninstalled the FrontendEditing module. Frontend editing is an advanced technique, it has its limitations and quirks, and most importantly since it injects code into your frontend it is best not to use it when learning PW. It just makes issues a little bit harder to track down. Back to your code. Things I could spot: PHP Notice: Undefined variable: title in .../site/templates/_prepend.php:6 which is: <?php echo $title; ?> and should be <?php echo $page->title; ?> First I cleaned up your code to get rid of issues of invalid html. TracyDebugger has a tool to one-click validate your html which helps a lot to pinpoint issues. Your HTML was broken, I found an unnecessary "</div>" and a "<" which were simply syntax errors. With broken HTML it might be impossible to generate a working JS portfolio. You get a collection of "portfolio-detail" templates, but in the page tree the following pages are created based on this template: children of Portfolio Kategorije children of Kategorije Which is not right when your selector is this:$portfolio_details = $pages->find('template=portfolio-detail, sort=-created'); because it collects unrelated pages. You need to add "parent=portfolio, " to get the specific pages:$portfolio_details = $pages->find('template=portfolio-detail, parent=portfolio, sort=-created'); Since your original template setup was problematic, I made changes: Changed template of page Kategorije from "portfolio-detail" to "categories" Changed template of pages Vizitke, Logo and Publications from "portfolio-detail" to "category" (I renamed Kategorije to category.) Note that it is best to stick to English when writing code and setting up names in the admin. You never know when you need to pass your code to someone not speaking your native language Similarly, when testing multilingual fields, if you put Slovenian in the English fields then you make it harder to follow your own setup, so I used English names for each "en input". The more things you do not put in the right pace the harder you find to make sense of your own site, even when "just testing things out". I did not touch the Family settings of categories/category templates but you should set them up like this:https://processwire.com/talk/topic/15842-200200200-field-texturltextarea-into-1-template/?do=findComment&comment=141413 I renamed the field category to categories, as it is a Page Reference field with ASM selects, so using plural is more appropriate. I removed the setting of "Select the template of the pages that are selectable. May be used instead of, or in addition to, the parent above.", because setting the parent to the Categories page is enough. Back to code changes: this loop is not needed: <?php //foreach ($cat_items as $item) : ?> $single->images->description->first was changed to $single->images->first->description normally I use <?= ?> when echoing single values but in that case it is not possible to temporary comment them out, so that is why I switched to <?php echo ?> It helps testing. Using title as a css class or id will not work as is can contain spaces and other special characters, you need to use the name property (Settings tab > Name in the admin):<a href="index.htm#" data-filter=".<?php echo $item->name ?>"> and in the portfolio loop, you need to output the related category name(s):<?php foreach ($portfolio_details as $single) : ?> <div class="portfolio-item <?php echo $single->categories->first->name ?> "> After making all these changes it works for me, I'm going to send my version to you in a PM soon. Note that you still have unrelated owl Carousel erros in your JS. Here is the content part of the code for anybody else who might find it useful as an example: Spoiler <?php namespace ProcessWire; $cat_items = $pages->find("parent=1061"); $portfolio_details = $pages->find('template=portfolio-detail, parent=portfolio, sort=-created'); ?> <div class="content"> <div class="shopno-standard-row"> <div class="container"> <div class="portfolio-content"> <div class="portfolio-filter-wrap text-center" > <ul class="portfolio-filter hover-style-one"> <li class="active"><a href="index.htm#" data-filter="*"> All</a></li> <?php foreach ($cat_items as $item) : ?> <li> <a href="index.htm#" data-filter=".<?php echo $item->name ?>"> <?php echo $item->title ?> </a> </li> <?php endforeach; ?> </ul> </div> <div class="portfolio portfolio-gutter portfolio-container portfolio-masonry portfolio-column-count-3"> <?php foreach ($portfolio_details as $single) : ?> <div class="portfolio-item <?php echo $single->categories->first->name ?> "> <div class="portfolio-item-content"> <div class="item-thumbnail"> <img src="<?php echo $single->images->first->url ?>" alt="<?php echo $single->images->first->description ?>"> </div> <div class="portfolio-description"> <div class="action-btns"> <a href="<?php echo $single->url ?>"> <!--<i class="fas fa-eye"></i>--> </a> </div> </div> </div> <div class="portfolio-bottom"> <h4><?php echo $single->title ?></h4> </div> </div> <?php endforeach; ?> </div> <div class="pagination-area"> <div class="load-more text-center"> <a class="button-hover" href="index.htm#">View More <i class="fa fa-long-arrow-right"></i></a> </div> </div> </div> </div> </div> </div> All in all, I recommend using Tracy and AdminOnSteroids (AOS), always look for PHP errors and invalid HTML and fix them before you move forward. And always work by changing things one at a time and then test if the change really does what you want. Tracy is your best bet to do testing the fastest way possibe with ProcessWire Edited April 5, 2018 by szabesz typos 6 Link to comment Share on other sites More sharing options...
Roych Posted April 5, 2018 Author Share Posted April 5, 2018 Wow, this was fast! Let me first of all thank you for all your work on this, you are the best! 7 hours ago, szabesz said: Next, after a successful system or module upgrade you might want to delete files/directories beginning with a dot, in your case: I usualy do that but somehow slipped my mind this time. AdminOnSteroids and Tracy Debugger are one hell of a helpers, I never used them before, not sure how could I live without those, specialy TracyDebugger ... Helps a lot when putting all code together. (not that I know how to code ) I just cleaned my other page with it also. 7 hours ago, szabesz said: Note that it is best to stick to English when writing code and setting up names in the admin. I totaly agree and will try to follow your advice. Not sure where this one came from. 7 hours ago, szabesz said: <?php echo $title; ?> About so many broken DIV's it's because I just pasted some html from a template just to see if all css works as I've planned. Didn't even focus on this so much, but yes I agree should be more precise about this. Still learning through all this. So for the portfolio part I installed your pack and everything works great. There is some weird jumping of items on FrontEnd but it doesn't really bother me. One thing is what I noticed, that is not possible to give one item to more than one category it always sticks to one only. Not a very big deal but would be really helpful sometimes, if one item belongs to more than one category. Just example, a printed book would be in -> publications, books, prints categories. Thank you again for this, You just made my day a lot nicer R 1 Link to comment Share on other sites More sharing options...
szabesz Posted April 5, 2018 Share Posted April 5, 2018 Happy to help 56 minutes ago, Roych said: One thing is what I noticed, that is not possible to give one item to more than one category it always sticks to one only. Not a very big deal but would be really helpful sometimes, if one item belongs to more than one category. Just example, a printed book would be in -> publications, books, prints categories. Sorry for this, I forgot to replace this: <div class="portfolio-item <?php echo $single->categories->first->name ?> "> with this: <div class="portfolio-item <?php echo $single->categories->implode(' ', 'name') ?> "> WireArray's explode and implode methods are cool shorthands for such a thing. 1 Link to comment Share on other sites More sharing options...
Roych Posted April 5, 2018 Author Share Posted April 5, 2018 8 minutes ago, szabesz said: <div class="portfolio-item <?php echo $single->categories->implode(' ', 'name') ?> "> Yes, now it is working perfectly Figured out why jumping occures, because of the page scroling when enough items is shown. So it works great Thank you R 1 Link to comment Share on other sites More sharing options...
Roych Posted June 18, 2018 Author Share Posted June 18, 2018 Hello, Im back here. All is working nice on a simple site, but I'm working on a Multilanguage site and Page reference field won't show anything on different language, but works normal in default. Im using the <?php echo $single->categories->implode(' ', 'name') ?> for the name of the category (page reference field). Am I missing something or ... Thank you. R Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now