Leaderboard

I just finished following this tutorial on CSS tricks called Gulp for Beginners https://css-tricks.com/gulp-for-beginners/. I didn't copy and paste. For the first time, I typed out all the code and constantly checked on https://www.npmjs.com/ to better understand how things works. I'm very excited and curious now, how everyone else is using Gulp.

Check this out for the marker: http://www.heldercervantes.com/experiments/ifim/marker.html Pure CSS; Minimal markup, just the marker div with inline left and top position (can be % of course) and a span surrounding the number; The main marker div is just 1x1 pixels making the position accurate; Bubble is a ::before pseudo-element; Features active state just by adding/removing css class; Used plain red and green for colors. Can this be read from the theme's colors?

include=hidden in your search selector http://processwire.com/api/selectors/#access_control // results exclude hidden, unpublished or non-viewable pages $pages->find("template=skyscraper"); // results may include hidden pages $pages->find("template=skyscraper, include=hidden"); // results have no exclusions $pages->find("template=skyscraper, include=all"); // results may include pages user can't view $pages->find("template=skyscraper, check_access=0"); Edit: But why not just exclude your page from the menu using the API?

Hey guys, this upgrade now appears on PW 3.0 (devns) branch. If you are using the ~= operator in a search, like "title~=disability act" it now asks MySQL for the ft_min_word_len (per @LostKobrakai's suggestion above). If any word length falls under that threshold, it delegates that word to a separate REGEXP command in MySQL that matches whole words. This is actually an improvement over the code I mentioned earlier because the previous code that converts it to use a "%=" for short words could match things like "disability fact" or "react to this disability" etc. Whereas the new core addition will only match whole words in the same way that the MySQL index would, meaning the field would only match if it contained the exact words "disability" AND "act" somewhere in the field, and not some word that happens to contain the partial word "act". To take it further, it also now uses this technique to match stopwords that MySQL doesn't full-text index. Previously it would just exclude them from the search since the presence of a stop word would prevent a search from matching. Now you can perform searches that include those stop words and match them.

to answer mrkhan's query regarding the way my setup for this example is, here is the screenshot of the table that generates the menu: @clsource - your example is also the same as what is discussed in depth in my last link provided in my prior post; which has the same features/setup. Visitors looking at this thread may want to visit that topic because it also provides the comprehensive code to output the markup for such a setup.

I wrote about my gulp experience here: https://processwire.com/talk/topic/10101-grunt-gulp-something-else/?p=107725 I'm using PhpStorm and it has a feature to autostart certain tasks. I set it to load "watch" so starting up the IDE automatically loads all the tasks I need during development. I'm not fan of installing softwares system-wide (being a portable application fan), so I figured out how to use Node without globally installing it. My npm modules are on a non-system partition D:\, and I symlink them in my projects. Imo web development is complex enough to use helpers like gulp to make things simpler. It has a small learning curve but then it saves a lot of time.

I am not using it now but found a complete Gulp course with 11 series done by LevelUpTuts on youtube

Here is the callout style for starting point: http://codepen.io/rolandtoth/pen/obzNom?editors=110/left/ To get the white border, two pseudo elements are used. The ":before" is for the border for the arrow. The "points" are only to show the original points, so that markers are positioned to point exactly to their position. Edit: semantic is using a rectangle rotated in 45 degrees for the arrow. Let me know if you think that would be better.

FYI I already wrote a PW article for code tutsplus. It's publication-ready and will be released mid-January. Can't wait what you guys will say about it!!

This is a reworked website of Imre Baksa, a Hungarian actor and director. His former (static) website was also made by me back in around 2009. He asked me to do a redesign but I decided to involve ProcessWire to make content management easier. http://baksaimre.hu/ Lesson 1: templates - no thanks It is tempting to use ready-made templates for a project because most of the work is done, there's some tweaking here and there and mission completed. Okay, this is the theory. I have to admit that I have never found a suitable template/theme for my projects, but being a web designer this is the way it should be, I guess. This time I found one that looked fine: Landed from HTML5 UP. In fact there was a self-made design for the site and this template looked 90% similar, so it really seemed to be an easy task to bring it into ProcessWire. Soon turned out that some of the fancy features of the template required advanced JavaScript knowledge. That means, I had to dive into it and learn how it worked. I did so and I was able to tweak things then, but I wasn't satisfied with the outcome. So I went back to the drawing board and dropped the template. This experience reassured that starting from scratch would have been a better choice on the long run. The good thing is that I learned some new things that will come in handy in the future. Lesson 2: template engines - Latte is still my best friend I was using Nette's templating engine, Latte in previous projects and I liked it a lot. It is similar to Twig, which is more widespread, so I decided to try that for learning purposes. This sounded like an easy journey because ProcessWire supports Twig through modules. However, at the end of the day I sort of regretted that. Latte has some small helper features that makes templating easier, and these differences made up a huge difference. Maybe I'm getting old but I felt Twig more of a nuissance after Latte. Finally I got rid of Twig and I guess I will never look back I will keep using Latte in the future even if I have to bootstrap it manually. Lesson 3: frontend development is hard Having ProcessWire at hand, backend is the minor part in web development, at least in smaller projects. I've used only a few jQuery plugins but making them work together nicely was a real challenge. At the end I had to make a compromise by removing SmoothScroll because it didn't work well with JScrollPane. Even so, I had tough times to eliminate content "jumps" when a lightbox is opened, and to make JScrollPane work the way I wanted to work. Making the whole thing responsive added another level of complexity as features needed to be destroyed/reinitialized on different screen sizes. I like to polish things as much as possible but the current state of the web makes it almost impossible to reach certain level of perfection. Moduling up This was the project where I felt that a link checker button would be helpful so started to develop InputfieldURLChecker. I use this in a few projects and it does the job nicely. My other pet PW module FEEL also got some polish during site development. For site-wide settings I used MultiValueTextformatter so I didn't need to create a field for every setting, just one for all. Other modules used: SEO: must have! Admin Template Columns for better admin layout Page List Image Label: to add featured image to the list of pages in the admin Pageimage Remove Variations: remove unused image variations Forms: one step closer to simpler form processing For the contact form I used Nette Forms, because it is so easy to add forms to the site with it, with frontend & backend validation in one go. Processing them still needs some sweat, but this time I finally put together a class to make this easier. Surely it still needs some iterations but it's a huge help: it takes only a few parameters to save submissions as Pages or send email to the admin or the visitor. For email templates I also used Latte (what else? ). I also created a "json_storage" field to store submission. The beauty is that while it's only one field (a textarea), in the admin it is displayed as formatted key-value pairs using a hook. Summary The site looks fresh and the year knob on the left makes it fun to use. Content management is easy as 1-2-3 thanks to ProcessWire, even if it's mostly me who will deal with the updates. While it's not visible on the site, in the background there are many improvements to my development tools and workflow that will be of huge help in the future.

You can use it @Macrura example, but firstly check is there a image and don't use foreach ! if($item->images->count > 0) $out .= "<img src='{$item->images->first()->url}' />";

tuto? lol I prefer: toots

maybe you need this instead of the foreach $out .= "<img src='{$item->images->first()->url}' />";

@heldercervantes Your bubbles are only designed to hold 1 character, isn't that too limiting?

That's still in the works. ProcessWire 3 is here: https://github.com/ryancramerdesign/ProcessWire/tree/devns Version 3 has gone beyond 'alpha', btw.

It's been a while but i've used Gulp for the basic stuff: watch source files (css, less, scss, js) for changes run preprocessors or postcss concatenate and minify run autoprefixer revision asset filenames for cachebusting I never got further then copy/pasting from the web and then adjusting to my needs but you can get a lot done this way. Gulp can do almost everything you can dream of but i would identify what tasks need automating the most, spend an hour/couple of hours and get to work.

Never used the delayed output method. Wondering if it's the best method to start with or does it increase the learning curve. Welcome to PW

Hey kixe, Thank you - this is awesome and solves one of my biggest issues with PageTable fields - getting meaningful page names without the possibility of conflicting names which I don't think the user should ever have to consider. One minor thing (but critical) - when installing with PW 3.x I get this error: Catchable fatal error: Argument 1 passed to ProcessWire\Pages::__construct() must be an instance of ProcessWire\ProcessWire, none given, called in /wire/core/Modules.php on line 481 and defined in /wire/core/Pages.php on line 128 It is easily fixed by adding an empty construct method to your module, like this: public function __construct() { // intentionally empty } I am definitely looking forward to using this with all my PageTable fields!

This is actually one area that I think may be too broad in scope for a tuts plus tutorial. That's because PW doesn't generate markup nor does it have an official front-end forms API, so it would be much more of an HTML and PHP tutorial than a ProcessWire one. Keep in mind the guides there are to demonstrate the simplest possible cases. We use concatenation because it's really simple and easy (and what I prefer), but that doesn't mean it's a requirement of delayed output. You could just as easily use arrays, output buffering, wireTemplateFile(), wireIncludeFile(), etc. The point is to demonstrate delaying your output until the appendTemplateFile inclusion. That's what delayed output is. ProcessWire's API is a PHP API, so I find it a lot simpler to stay in that API rather than constantly jumping in and out of HTML. After all, it requires <?php ?> tags to jump in and out of PHP from HTML, but does not require anything but quotes or heredocs to use HTML within PHP. PHP alternative syntax is handy for large blocks of conditional HTML. But for most markup generation situations I don't recommend it unless you personally find it more readable. For many of us, the additional verbosity and constant jumping in/out of PHP & HTML make it difficult to read and follow, but this is purely a preference thing as I don't think it matters to the end result at all. When it comes to writing tutorials and/or documentation, I try to communicate the concepts in the simplest/shortest way possible so that focus remains on the concept and API calls that we are trying to teach. That doesn't mean you have to do the same, or that doing it differently means you aren't adhering to the concept. Whether you are using alternative syntax or not matters little to the concept. Though since you are in "direct output" when outside of a php tag, it does make your job a little harder for delayed output. But you can amend that by isolating your markup and rendering it with wireTemplateFile(). Fantastic! @benbyf and @isellsoap just let me know if there's anything I can do to assist. Thank you for writing tutorials for PW!

hey kixe, also the best wishes to you would you mind doing a short screencast so that we do not have to install it, create the fields etc... http://www.cockos.com/licecap/ is a cool small tool to do that in seconds on win/osx. it creates a GIF so you don't even have to upload it to youtube or the like. just record and post it directly here in the forum. thank you for sharing your module

Envato Tuts is a respectable place to write on so that's a good thing in the first place. 1. decoupled cms make your own frontend with no cms rules 2. powerful and flexible api 3. accessible for both beginners, designers and coders Of course, every post and tuto helps, but when I come to think about it, it won't accelerate things for Processwire. My thoughts are that what would accelerate Processwire is a marketing plan.

My menus work like this First create a "menu" template, a simple empty template that will hold "menu-item" pages as children. Then create the "menu-item" template that can hold 'menu-item' pages as children, fill it with these fields : - (title field) The title for the menu - (item field) A page reference (Single Page or NullPage) field that will link any page in the site except pages with menu or menu-item template. - (isExternalLink field) A checkbox that tells if the link is outside the site. - (externalLink field) a Textbox that holds the external url if the checkbox isExternalLink is active. You can add many additional fields depending on your needs, like css, js, or other information. When that is done just create a page named "Menu" with the "menu" template, later add children pages with the "menu-item" template. Now you have a menu that can be rendered like any other page in processwire. $menu = $pages->get('/menu'); foreach($menu->children as $menu_item) { if($menu_item->isExternalLink){ echo "{$menu_item->externalLink}"; } else { echo "{$menu_item->item->url}"; } } With this approach you can rely on the Processwire backend to give order to the items and create as many children and deep levels as you like

From now you can use multiple values separated by space. Example: "parent.title date(Y) myfield". Page name will remain 'untitled' until last required field is populated. You will get informed about this by a warning. Merry Christmas.

my setup and that function is really only for simple sites needing only 2 levels; also for the way i have it setup i'm using a table, but it should work with any wirearray. in your case it seems that you may be better off using MSN, or Menu builder, or even a separate branch of the page tree which can generate an MSN menu but specifying a root page argument, and then overriding the URL to be the page select instead of the virtual menu page/node. there are a lot of posts on this forum with recursive functions for making menus of all kinds, from all different types of sources, be it the page tree, a menu tree, or repeaters; here are some: https://processwire.com/talk/topic/9033-mega-menu/?hl=%2Bnested+%2Bmenu#entry87159 https://processwire.com/talk/topic/8544-want-to-create-a-custom-menu/?hl=%2Bnested+%2Bmenu#entry82687 https://processwire.com/talk/topic/3650-multi-level-menu/?hl=%2Bnested+%2Bmenu https://processwire.com/talk/topic/2787-custom-menu-not-related-to-page-tree/?hl=%2Bnested+%2Bmenu

Hi Ben, This is my very first post, so a big hello the the ProcessWire community! Being new to ProcessWire, I'm in your target group I suppose I already started to read the Docs, the weekly newsletters and the blog posts as well (not to mention this forum), which are all useful, but what I am really after is an up to date (v3.x) introduction to all the most important bits that help me develop my very first ProcessWire site that is not just a basic website with a contact form being the most complex element of it, but something that shows us how entity relations should be implemented (Pages vs repeaters: pros and cons). It would also be nice to see how we should implement "fontend users", who can login to the site, update their profiles (info and personal photo) and check out the list of all members, search them, etc... This way you could also introduce us to forms and to saving the posted data, etc... Actually, my site will be developed for a shotokan dojo, so entities like karate tests and results, competitions and results (individual and team), and other events as well will be needed. You get the idea... One more thing: I'm still trying to figure out the best way to organize my template files (and the php partials included in them). I did read Ryan's introduction (How to structure your template files, and the others as well) but I don't really like neither the particular example of the "Direct Output with Includes" nor the "Delayed Output" method. The particular example of the "Direct Output with Includes" method is too "simple and rigid", while the "Delayed Output" uses concatenation, and those php files do not use the PHP alternative syntax, which makes working with the HTML markup frustrating (in my point of view). So I'm planning to come up with something between these two methods, based on Direct Output but utilizing both prependTemplateFile and appendTemplateFile. Since I will build my very first ProcessWire site, I have to spend some extra time trying to figure out all the best practices that fit my usual workflow, and watching your tutorial might help me a lot in this regard. I will definitely consider watching it, whatever you produce BTW, I suppose you have already gathered, that I'm suggesting to create a tutorial at least for reasonably skillful front-end developers, and not for complete beginners. Joss Sanglier's tutorial is just good for that purpose. Thank you anyway! I hope your tutorial turns out to be successful.

Solution: https://processwire.com/talk/topic/8576-name-format-children/?p=108748

Awesome News. Please Write about how easy is creating multilanguage sites using processwire. I suggest taking themes from http://html5up.net/ and creating full sites with PW. Or making an ecommerce with www.padloper.pw Making custom field types and modules Using wireshell Oh lots of wonderful ideas Whish you the best of good energy!

Hey Ben, that's brilliant news! Finally, someone who knows about ProcessWire writing about ProcessWire . Could you please start a new thread about this? It is an important issue and should not 'be hidden' here amongst other stuff, thanks.

I was using only LESS in my projects through PhpStorm's LESS plugin. It did the job fine until I wrote a mixin that required LESS version 1.6.2, and the plugin supports 1.6.0 only. So I took the chance and set up Node and Gulp to see the difference. And there's a huge difference! First off, my mixin works fine. Second, I could automatize many things that I did manually beforehand, and even add new things to my workflow. I used Base's gulpfile.js as the starting point but added some new stuff too. - watch: compile CSS when a LESS file is changed (saved) - less: compile LESS to CSS - uncss: remove unused CSS from stylesheets. Great to reduce CSS file size when using bigger CSS frameworks. - minify, nano: minify JS/CSS/HTML - imagemin: reduce image file size - copy: create a release package out of source files - inlinesource: add CSS inline These tasks helped a lot to achieve 100/100 on google page speed on a current project (one-page landing page). It takes some time to set up gulpfile.js but when it's done, subsequent runs saves a lot of time. I'm on Win and had some initial troubles setting up PATHs (environment variables), but finally everything came into place. I also use Node.js Portable Runtime so I can use Node in a portable manner without the need to install globally.

I think that URLs will be relative to the requested URL? So if the JS is loaded on page /contact-us/ then the code snippet above would be looking for /contact-us/img/arrow_up.png, which would be incorrect. One way you can get around this is to let PW populate them for you. In your document <head>, add this before any other <script> calls: <script> var rootUrl = '<?=$config->urls->root?>'; var templatesUrl = '<?=$config->urls->templates?>'; </script> Then you'd be able to do this: .scrollUp({location:"right",image_src: templatesUrl + "js/img/arrow_up.png",wait:100,time:300});