Leaderboard

just threw together a quick module for this and works well so far.. needs some testing but might be able to get this on github in a few days; in the meantime, here are some screens: Preview Mode: OK, here it is.. https://processwire.com/talk/topic/13486-inputfieldsimplemde/#entry121650

@Macrura Thanks for pointing this out. I couldn't find a documentation, about toolbar items available within processwire. I tried all of the CKEditor fullpackage and all items are usable. Here a complete list: Source, Save,NewPage, Preview, Print, Templates Cut, Copy, Paste, PasteText, PasteFromWord, -, Undo, Redo Find, Replace, -, SelectAll, -, Scayt Form, Checkbox, Radio, TextField, Textarea, Select, Button, ImageButton, HiddenField Bold, Italic, Underline, Strike, Subscript, Superscript, -, RemoveFormat NumberedList, BulletedList, -, Outdent, Indent, -, Blockquote, CreateDiv, -, JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock, -, BidiLtr, BidiRtl, Language Link, Unlink, Anchor Image, Flash, Table, HorizontalRule, Smiley, SpecialChar, PageBreak, Iframe Styles, Format, Font, FontSize TextColor, BGColor Maximize, ShowBlocks About

https://github.com/NextStepWebs/simplemde-markdown-editor "A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking. https://simplemde.com " --- Would love to see this as a module!

actually this is in the core, all you need to do is add these to your toolbar (you don't need to add any plugins): so where your first line would look like this out of the box: Format, Bold, Italic, -, RemoveFormat you can change it to be like this: Format, Bold, Italic, Underline, -, RemoveFormat, -, TextColor, BGColor

Innobloom Fast multilanguage site that features lazy loading assets, custom forms and a little bit of parallax. It features about all the goodness I gathered in the past year or two about ProcessWire and web development in general. We were trying to achieve a high google page speed score. That's why we added ProCache, though at first I was a bit sceptic whether it could improve anything as I had my own ways to speed things up: Using srcset and bgset for images with lazy loading (lazyload.js). To achieve this, I created my own functions to render the markup, and it has been released as MarkupSrcSet module later. Lazy loading JavaScripts. This is a technique I used frequently recently: adding a tiny inline "loader script" to the page which loads all the other required js files in order. In certain cases some CSS files are also loaded by JavaScript, mostly for plugins that don't have immediate visual impact. This eliminates render blocking scripts/stylesheet issue. Vanilla JavaScript. I try to use jQuery only if it's absolutely required, for example when having to use a plugin that has no plain JavaScript alternative. Most things can be easily achieved with no framework and the number of dependency-free plugins are also increasing. Often it requires only a few lines to get the required feature. For example the parallax effect on the top is only a few lines. Latte template engine. This is mainly for making development and templating easier, but also caches pages. This was one of the projects where I tested my newborn TemplateLatteReplace module which was released recently. Forms: NetteFormsHelper. This is a form module that uses Nette Forms. In this project I added useful features to it like character counter, date picker, notice when leaving the page with unsubmitted form data, autocomplete inputs, honeypot field and textarea autosizing. All these features uses plain JavaScript and assets are lazy loaded (and only when they are used on the page). All these add up to a lightweight but very powerful form module. No more frustration when having to add a form - apart from those days when I figure out to implement a new feature Keeping CSS as small as possible and adding it to the head. I used Susy here and the site's CSS is about 24 kbytes. To achieve such a small size I didn't use any framework. Imho using no CSS framework is better on the long run, at least in projects like this. I know that CSS is not cacheable this way but as long as there's no non-hacky way of loading CSS async and without FOUC it's fine for me. The usual .htaccess speed improvements, including ProCache additions ProCache Without ProCache we could achieve about 92-96 page speed scores. While it was pretty good (partly because of Latte) it was still not he score we wanted to see. Then ProCache was activated and boom! - 98/98. In fact this could be considered as 100/100 because there's only Google Tag Manager and Analytics scripts that reduced the score, and being remote assets we have no control over it. Modules The site is running on PW3. Notable modules used: ProCache MarkupSEO ProField Matrix Repeater (new favorite) Tracy Debugger Multivalue Textformatter Batch Child Editor (mostly for deleting test form submissions) Let's Encrypt HTTPS is achieved using Let's Encrypt. In fact this wasn't available on the host provider but after our inquiry they developed a cPanel module for it. We really appreciated their flexibility and open-mindedness. Templates There's only three template files on the site, and two of them are identical as they share the same fieldgroup. The basic-page template decides which page is the current, and adds additional variables/forms that are passed to the view file. I'm pretty happy with this site. It's fast, snappy and easy to maintain. As for the latter, Matrix Repeater does a nice job on allowing adding content blocks to the page on which the developer have full control - no more CKEditor WYS-is-for-sure-not-WYG madness! And the conclusion is: don't waste time to over-optimize a site. Reaching a reasonable speed is good enough, further optimizations will only make maintenance more and more harder (not to mention the frustration it causes). Anyway, it's useful having a project like this to get familiar with the current speed improvement techniques. https://innobloom.com/

Filterbox everywhere! A major update to the filterbox: now available for file fields too. This was my original intention and now it's real Admin theme default sticky header is also fixed. I switched to array an of classes instead simple string concat but forgot to update the default admin theme part.

@pmichaelis + @chugurk maybe my answer help both of you... i use MapMarker Field only in backend to get lat and long data from adresses and use them with leaflet cluster maps to generate frontend output from the geodata... in your main template or header add needed scripts: <!-- set extra scripts to load if there was a map on the page --> <script type="text/javascript" src="<?php echo $config->urls->templates?>theme/js/jquery.min.js" ></script> <script src="<?php echo $config->urls->templates?>theme/js/leaflet.js"></script> <script src="<?php echo $config->urls->templates?>theme/js/leaflet.markercluster.js"></script> <link rel="stylesheet" href="<?php echo $config->urls->templates?>theme/css/leaflet.css"> <link rel="stylesheet" href="<?php echo $config->urls->templates?>theme/css/MarkerCluster.css"> <link rel="stylesheet" href="<?php echo $config->urls->templates?>theme/css/MarkerCluster.Default.css"> in your template to show the map with many markers using marker cluster output you could use something like this: //set output $map = ''; $addressPoints = ''; //get all addresspoints for the JS of the MarkerCluster $items = $pages->find("template=entry, map!=''"); foreach ($items as $m) { if ($m === $items->last()) { $addressPoints .= '['.$m->map->lat.', '.$m->map->lng.', "<a title=\"'.$m->title.'\" href=\"'.$m->url.'\">read more</a>"]'; } else { $addressPoints .= '['.$m->map->lat.', '.$m->map->lng.', "<a title=\"'.$m->title.'\" href=\"'.$m->url.'\">read more</a>"],'; } } //render cluster map with all items //centered to bavaria lat/long!! //set the needed inline JS for the map content $inlineJS = " <script> var addressPoints = [$addressPoints]; var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '© <a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>' }), latlng = L.latLng(48.1835,11.8570); var map = L.map('map', {center: latlng, zoom: 8, layers: [tiles]}); var markers = L.markerClusterGroup(); for (var i = 0; i < addressPoints.length; i++) { var a = addressPoints[i]; var title = a[2]; var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title }); marker.bindPopup(title); markers.addLayer(marker); } map.addLayer(markers); </script> "; $map .= '<div id="map"></div>'; $map .= $inlineJS; $content .= $map; This should render a map like the developer locations map http://directory.processwire.com/map/ with marker clusters... for single marker output there should be a lot of information in the topic if you search or read for it.... https://processwire.com/talk/topic/9711-map-marker-map/page-2#entry18338 https://processwire.com/talk/topic/9711-map-marker-map/page-2#entry21061 https://processwire.com/talk/topic/9711-map-marker-map/page-3#entry28913 since post #98 you could use MarkupGoogleMap too render a map on frontend: https://processwire.com/talk/topic/9711-map-marker-map/page-5#entry41984 please read carefully before asking and provide code examples if you get stucked.... best regards mr-fan

Oh! Thats perfect! I didn't know it. - Now I don't need the toggle-icon anymore. Many thanks!

I'll check the fixed pos, thanks. You can toggle the sidebar with the right-left arrows in the Reno theme, isn't that suffice? I agree that it's not very obvious.

awesome thanks for putting that together, i think this should go on recipes site, in fact it would be cool if there were a module that could let users setup toolbars in a graphical ui, eventually... for now maybe there could be some pre-defined sets that users could copy/paste, like "kitchen sink" (attr Wordpress)...

That JS for inserting images into the CKEditor field is really cool! For setting the width with the "small" command, try: element.setAttribute('width', 100); For anyone trying out Can's code, note that the JS that adds the HappyImageSelector is for PW3.x image field markup. Not hard to adapt to PW2.x though.

Here is a little trick how a user the user template to manage things like a /profile/ page to frontend edit a users profile and this could be easy used for a own register logic and let the new user fill in all needed fields....the logic could be implemented via URL segments: //load module $fh = $modules->get('FormHelper'); // Template based form, skip fields 'title' and other adminfields, unstyled $form = $fh->create($templates->get('user'), array( 'notifications', 'admin_theme', 'language', 'roles', 'user_email', //this is where we fill a created token/hash to register the user and verifie via emaillink... 'confirm' //confirm link for an admin to set user created stuff puplic )); and in your template you could use URL segements for very simple or complex logic on registration - in my case i need to register a user but hide his content until an admin activated the user...email from the user itself should have to be validated, too so i've to build my own code here...since i wanna stick to just email + password and let the username created automatical in the background...this is just the basic for such a template nothing fancy here - maybe i wrote a little topic if it is running stable. Pseudocode for a template file register.php and URL's like: http://mysite.com/app/regsiter/URLsegment1/UserID/Hash http://mysite.com/app/register/activate/1235/fb5a44cfc2ecd8b5667a667319b66688 http://mysite.com/app/register/confirm/1235/d41d8cd98f00b204e9800998ecf8427e // we are using 3 URL segment, so send a 404 if there's more than 1 if($input->urlSegment4) throw new Wire404Exception(); switch ($input->urlSegment1){ case '': // segment 1 is empty so display normal content/register form // users could submit the register form and a new user is created two tokens are generated // email to the user and to admin // user is logged in and can add content - but the content will only published if // his two tokens are created on the first step to validate his email and confirm by an admin break; case 'activate': if ($input->urlSegment2){ // check for the user id if ($input->urlSegment3 == user_email) // check for the email token // user has get an email on submit the register form with a token link // and he hit this link so publish/activate the user and show him a message // delete user_email token break; case 'confirm': if ($input->urlSegment2){ // check for the user id if ($input->urlSegment2 == confirm){ // the user is confirmed by an admin and his content is published, delete confirm token break; default: // Anything else? Throw a 404 throw new Wire404Exception(); } This is just a example to how to rebuild the functions of the EmailValidation module in a flexible way with URL segments and some additional fields on the user template....AND the awesome form module from pwFoo... URL segments could setup with an regex in the template settings like this: regex:^[0-9]*$ //regex for user id regex:^[a-f0-9]{32}$ //reges for a hash/token If my project is finished i will provide more and detailed examples with templates and FormHelper! Best regards mr-fan

GitHub: https://github.com/Toutouwai/TemplatesChildPages For any page, allows the restricting of templates that may be used for child pages. Usage Install the TemplatesChildPages module. The module adds an AsmSelect inputfield "Template restrictions for children" on the Children tab of Page Edit. Use the inputfield to select from existing templates and any child pages added subsequently will be limited to those selected templates. Note that any template restrictions added via this module are in addition to any "Family" restrictions set for the child and parent templates. In other words, if template Family restrictions prevent a template being selected for a given page you can't override this simply by including the template in the parent's "Template restrictions for children" field. Why use this module? The module allows you to add child page template restrictions without having to create new or duplicate templates for the parent page. This forum post explains the situation well. Similarly, it makes it possible to use the "Add New" page feature without an unnecessary proliferation of templates. If you specify a single template as restriction for child pages you can add a Page Add Bookmark for that parent page that allows site editors to easily add a new page using the right template for the location.

Hola amigos I wrote a little DOMDocument magic (long time ago) which would automatically link images add classes for Magnific Popup set alt tag wrap the whole thing in a figure insert figcaption if image description available and wrap multiple figures in a container think that's it.. So for our articles we only needed to open pwimage popup in cke, choose desired image, set the size and alignment To caption images we use description input from image field It was a nice starting point, and at some point I changed DOMDocument to SmartDOMDocument wrapped the code into TextformatterBlogImages.module.. But I had ideas to simplify the whole process..and due to a problem with the old implementation which broke design (just realised it a week ago, or that it's linked to my Textformatter) I finally took the time and rewrote the whole thing. Problem was that figure is not a valid child of <p> so at least in chrome I ended up with orphaned text and an empty paragraph so the text style differed from the rest.. I'm posting this as a boilerplate/resource/idea, it's really basic..everything is hardcoded and it's not flexible right now.. So there is the Textformatter module and a hook which is placed in my /site/ready.php right now but might be moved somewhere else.. Maybe it can become a proper module..Maybe I find time to do so..but if someone is interested everyone is welcome to grab the code and extend/modify for their own needs Here's a little animated gif screencast (it's shrinked so the quality is not very beautiful..) So what it does right now: TextformatterBlogImages.module: first it replaces double line breaks like <br><br> or <br /><br /> or any other combination with </p><p> (I had such occurences) parses the article for <p> tags using simple_html_dom finds all containing images it extracts the image name stripping image variations gets the corresponding pageimage from images field the image itself will be replaced by markup used with LazySizes JS plugin (https://github.com/aFarkas/lazysizes) Example: <img src="fullImageUrl" srcset="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-srcset="smallUrl smallWidth, medium mediumWidth, full fullWidth" data-sizes="auto" width="fullImageWidth"> data-sizes="auto" works for now but I might replace it by normal sizes markup, manually deciding how images should be chosen width="fullWidth" I read that images with width attribute render faster but I'm not sure if this is true even if the image is downsized by css? then the new image will be linked to full size image link with markup for js modal (wrote my own, but not ready yet) if image class contains "align_left" or "align_right" it will wrap it in span moving classes from img to span if pageimage got a description it'll insert the descr below the img within span in another span the old image will just be replaced by the new span image so it will be in the same place it image is not aligned (or align_center) it wraps the image in figure moving img classes to figure and description will be wrapped in figcaption and the figure will be stuffed in an own container before the paragraph (original image within p will be removed) The figure gets a class landscape or portrait according to the aspect ratio Uh, I added another hook property called Pageimage::cdn so the images will be served directly from assets subdomain (using domain sharding option from AIOM but saving the extra redirect) Then there is another "round" reparsing the article for newly created figure containers adding additional class containing the number of children and another class indicating how many of the images are landscape/portrait for later styling like 2lx1p for 2 landscape and 1 portrait We add rows of 1 to 4 images, not more so my stylesheet contains rules for all possible cases like 1 landscape 2 portraits, 3 landscapes 1 portrait and so on to resize the images so alls images in a row will have the same height and the row will be always as wide as the main container as seen in the gif above Because the textformatter is doing everything for us I added a little clickable area to each image in the image field and a little javascript which inserts an image into body cke field on click at caret position Only thing to do is manually break the line after 4 images (or less) (NOTE: This javascript code inserting the clickable area requires at least PW 3.0.17 with new image field, as mentioned by Robin S below) For inline images I have to modify, I guess, the javascript a little, or maybe I can add another script which adds 3 links to inserted images, which add alignment classes to the image Here you'll find the files (and code snippes) https://gist.github.com/CanRau/662a559a07d6d7c492159d1cd497944f Any questions, ideas, improvements, concerns and other comments are highly appreciated PS: I'm not using it in production yet, just finished the version, I think I need to review all articles first to ensure proper migration, and maybe I add the inline handling to the javascript as mentioned before PPS: If you're interested in using this you should at least cache the textformatter output using WireCache, or TemplateCache or you can of course use ProCache, but I wouldn't recommend using it without any caching mechanism as it would re-do all the work every time someone requests the page.. Un Saludo Can

i'm sure this is nothing fancy for all the pros here, but at least i did that a lot more inconvenient for a long time and maybe it will help someone else... $lines = array(); $lines[] = $page->company; $lines[] = $page->forename . ' ' . $page->surname; $lines[] = $page->address; $lines[] = $page->zip . ' ' . $page->city; $lines[] = $page->country; echo implode("<br>", array_filter($lines)); // or like this $lines = array( $page->company, implode(" ", array_filter(array( $page->prefix, $page->forename, $page->surname, $page->suffix ))), $page->address, $page->zip . ' ' . $page->city, $page->country ); echo implode("<br>", array_filter($lines)); it will skip all empty lines automatically (for example if there is no "company" or no country) and it's a whole more readable then with lots of IFS and ECHOS

Hello, I'm working on a product catalog (not an e-commerce website). For the product template, I'd like to fill a table of features (the rows) with 3 cols: - the name of the feature; - predefined values - a textfield for a custom value (if we don't want to create a new predefined value) See the attached file (an exemple from a Prestashop site, but I just want to manage a catalog and I like to work with PW!!! ) With a repeater or the profield "Table" I can't have this result. May be I have to create a specific field type for this use? Have you any idea?

This is the website that we launched this one some weeks ago for an Art Therapist based in Zurich. http://heikeprehler.ch/ We had to deal with a quite large amount of text here, so our main concern was to make the website light and easy to navigate (also vertically, inside each page). On the backend, we also decided to divide everything very well, to make it easy for the client o edit, but also to make it easy for us to output the content as flexibly as possible. Each content page is divided in blocks of children, that allowed us to have IDs for each of them, and link individually with hash links on the top of the pages. It also allows us to place slideshows under each block by allowing the client to simply upload the images to an image field, instead of inserting them in the rich text area. The site is responsive, of course

When I tested, it didn't work so I looked at the source and commented that. I simply forget about js prefixing. But I just tested it now and it's working

Haha that was worth the question It's 1/2 request done and I haven't even got home

@tpr: I have one wish and an observation to share. My wish is: "Please can we have in AdminReno-CompactHeader-view the toggle icon for the sidebar?" If one do not use autohide for the sidebar it currently is missing with the compact header view. --- For me, on Windows 7 with Firefox, I do not have a sticky header with the default Admintheme. The mastheads position is set to relative, I think it must be fixed. The classes of the html element are <html class="aos_fixScrollbarJump aos_fileFieldToolbar aos_filterbox aos_stickyHeader aos_PagePreviewLink" lang="en"> Do you need more Infos?

I think it has to do with namespace. Have you tried to prefix your file with <?php namespace ProcessWire; or maybe it also works if you add <?php use ProcessWire; ---- Or you can call it $u = new ProcessWire\User();

not sure if i understand you right but maybe you could make a RuntimeMarkup field showing thumbnails of the "global" images and add some javascript to add those images to the CKE field like can does it here: https://processwire.com/talk/topic/13471-better-ckeditor-image-insertion-at-least-for-me/ ?

great to read and great site tpr! +1 for better image quality. it's definitely a high quality site but the first impression is quite low quality as the images do really NOT look good but that's what 99% of the visitors will see. they won't see performance benchmarks and so on. thank you once more for your help regarding netteforms. they are a core feature of my new project going online next month

Not to forget ST3 SFTP and Sublimerge plugins. They cost little but bring huge benefits to my workflow

Just wanted to throw PostCSS into the discussion. Seems to be the way to go for me. I've been working with SASS for the last 2-3 years now. With PostCSS it is easy to integrate my SASS workflow and further enhance it with PostCSS plugins like autoprefixer, media query packer, minification etc. So you don't really need to change your workflow and get to optimize output of your CSS. Here are 2 great articles that helped me with the conversion from native SASS compiler to SASS+PostCSS+gulp. After all I believe that CSS optimization and minification should be done on the client side. Preprocessors can assist here. And even concatenation will soon be a relic of the past when HTTP/2 fully hits the scene. benbyf has a great blog post with performance comparison http/1.1 vs http/2.

SublimeText3 with Alignment, All Autocomplete, ASCII Decorator, Bracket Highlighter, DiffView, Emmet, GitGutter, Material Theme, SideBarEnhancements, and ToDo Review.

Awesome, thank you Robin! It just works! And good note about PW3, I'll add it above and in the gist, too! JS in updated gist contains now two presets "small" (200), "medium" (350) and menu item to remove with entirely I think I'll add a default width to inserted images in the next update..

Another cosmetic fix for the filterbox: show only if there are at least 2 items to filter. It's evaluated dynamically on uploading images, so if the field is empty or contains only one image it will be hidden. Now it's "close to perfect" according to my set of standards

Just switched back to ST coming from Atom (so nice, but so slow). ⌘ + P = Go to anything.

Two of my favorite keyboard shortcuts so far in Sublime Text are: ⌘ + D: Select word - Repeat to select next occurrence ⌃ + ⇧ + W: Wrap Selection in html tag (or ⌃ + W for choosing the html tag) Of course there are much more.

A feature request: Sass support (specifically SCSS). Thanks!

I ended up making a ton of mods to this for things that were very specific to our needs. Coincidentally, I worked on cleaning it up and getting it back to a more releasable state earlier this week. I'll take a look at it on the devns branch on Monday/

First you should check if the folder and the files have correct permissions (i.e. that they are writable by the web server). Just to be sure, you should also check if your error logs (PW + web server) have any more information. Of course you can just try fixing the permissions with chmod -R a=rwX /homepages/42/d264496819/htdocs/new/site/assets/ ...and then attempt uploading again.

It does not save the real value of the field, but only the textual representation. That's why it's not like version control.

Drupal modules / plugin have a good quality and most of it works fine out of the box, but I don't like to customize it or the generated html ooutput. Processwire modules are often "proof of concept" examples and some work is to do if you would use it. PW isn't a CMS to use it out of the box, but it's the best CMF

For me CSS is the "fun, easy and quick" part. I don't feel like I am wasting my time there and I feel like I can make much bigger gains by improving on other aspects of my work. There are so few browser quirks today and so many well supported new stuff on CSS that I find it almost relaxing. But I don't use reset.css or ie specific stylesheets either and I have pretty much dropped using browser prefixes... I don't organize my CSS much and I enjoy "clever chaos" on that stuff. Developer tools give me exact line number for the selector and that's it. I'm kind of oldschooler here Of course if I would be doing more experiments and design on css or maintain large (= really huge) sites etc then I think it might be much more valuable for me. I am pretty sure that in some personal project I will try some css pre-processor, and if I find it huge improvement (like 5 times cleaner and faster than pure css) then I might start thinking how to make it part our workflow at Avoine. To be honest, I don't see that happening anywhere near though.