Leaderboard

So the key information here is that the offsets of timezones are not fixed for eternity. There are databases you can download to your OS or e.g. from groups like IANA, which hold information about which offset a certain timezone was exposed to at which period of time. And those databases are updated about a handful of times a year (but not each time for actual new rulings). A good example for actual changes is the EU, which is currently starting the process of migrating away from switching to/from DST. Generally you're mostly fine for past datetimes, but the farther you're in the future the more likely it becomes the offset you expect the timezone to have at the time could change until that time. If you convert 12.12.2030 10:00 for Europe/Berlin to 12.12.2030 9:00 UTC with the current offset of +1 in the winter and we go forward 10 years it's not clear if you get back 12.12.2030 10:00 for Europe/Berlin. The EU's efforts to remove DST might have been fruitful and Europe/Berlin is now at +2 offset all year (all year DST). So you take the db value of 12.12.2030 9:00 UTC, you add the offset for Europe/Berlin, which then is +2 and you get 12.12.2030 11:00 for Europe/Berlin. The UTC datetime was preserved, but the "wall time" wasn't – wall time being the time I see on the clock here in my office. You might be an hour late to some important appointment. You can ignore all the above if you never convert between timezones, which as far as I can see, is what processwire is doing. 12.12.2030 10:00 for Europe/Berlin will still be 12.12.2030 10:00 for Europe/Berlin when read from the db in 10 years. Essentially the wall time is preserved. This comes at the expense of absolute distance of time between two datetimes being subject to change and not being able to have absolute ordering for dates of different timezones. The latter is not a problem if the whole system just uses one timezone. This is why I said it's important to know what you care for. The absolute time passing by until a datetime or the actual time on the wall on a certain day. If you want UTC timestamps in your db, but not give up preserving the correct walltime you'll need to store more information in the db besides the utc timestamp to be able to react to changes like I described.

Not that much has changed since my inital post but still I want to give a short update. One thing has changed and made my life easier. I re-installed Manjaro and used it's XFCE edition and installed i3 afterwards. So I had everything in place I may need in the future - as in graphical interfaces for changes or settings. But to be honest... I never needed it by now. Still... happy to have it around. Another thing I changed was the keyboard layout. I used to use a QWERTZ (DE) keyboard but for a few weeks now I'm using a QWERTY (ANSI) mechanical keyboard and layout. Im still struggling to hit each and every key in the right moment but... well... it works quite well so far. Most of the time it's even easier than before as < >, [ ] and { } are way easier to type as before. At least while writing code. (Dear german/austrian/swiss DEVs... try an ANSI QWERTY keyboard... brackets, braces and however they are called... are way easier to type.) Don't know how I got here but by now my full boot time is down to 11 seconds, which is nice, but overall... using lots of terminal programs my CPU load and memory usage went way down. CPU on average 10%, and RAM at about 1GB. Quite impressive on a 2015 Thinkpad with i7 with 8GB of RAM. Due to a dedicated swapfile I can almost double my RAM to 16GB in order to run Chromium, Firefox, Opera, Brave and Vivaldi, while Thunderbird, ScreamingFrog, VS Code and lots of other apps running. Git, Yarn, NPM and all the tools I almost never used running almost each and every day - in terminal but still. Still struggling to prepare my MS Surface to love Linux but... yeah... everyone needs I hobby I guess. Details can be seen in the screenshot below... otherwise... ask here or in the DMs.

I need to build two online stores in the near future. @kongondo, I was wondering if you could share any updates on the progress. Or is it still too early for any kind of announcement? ?

WireCache tries to be smart (too smart) when it finds a valid json string because it uses json to serialize array data for storing. So any string that look like json gets json_decode()ed into an array. It's kind of a known bug because there is currently only a part of a fix implemented in WireCache. A workaround can be to prefix your string to break WireCache's json recognition and strip it after retrieval, like this: $response = substr($this->cache->get('mycache', 60, function() { return 'JSON{ "glossary": { "title": "example glossary", "GlossDiv": { "title": "S", "GlossList": { "GlossEntry": { "ID": "SGML", "SortAs": "SGML", "GlossTerm": "Standard Generalized Markup Language", "Acronym": "SGML", "Abbrev": "ISO 8879:1986", "GlossDef": { "para": "A meta-markup language, used to create markup languages such as DocBook.", "GlossSeeAlso": ["GML", "XML"] }, "GlossSee": "markup" } } } } }'; }), 4);

Building on @BitPoet's code, here's an alternative way you could add labels to the select options: $wire->addHookBefore('ProcessPageEditLink::execute', function(HookEvent $event) { $input = $event->wire('input'); $page = $event->wire('pages')->get($input->get->id); // Do some check on $page to return early when not applicable $anchors = $input->get->anchors ?: []; $my_anchors = [ 'some_anchor' => 'Some anchor', 'other_anchor' => 'Other anchor', 'third_anchor' => 'Third anchor', ]; $anchors = array_merge($anchors, array_keys($my_anchors)); $input->get->anchors = $anchors; $event->wire()->addHookBefore('InputfieldSelect::render', function(HookEvent $event) use ($my_anchors) { $inputfield = $event->object; if($inputfield->name !== 'link_page_anchor') return; $options = $inputfield->options; $inputfield->options = []; foreach($options as $option) { $anchor_name = ltrim($option, '#'); if(isset($my_anchors[$anchor_name])) {; $inputfield->addOption($option, $my_anchors[$anchor_name]); } else { $inputfield->addOption($option); } } }); });

ProcessWire Dashboard Download You can find the latest release on Github. Documentation Check out the documentation to get started. This is where you'll find information about included panel types and configuration options. Custom Panels The goal was to make it simple to create custom panels. The easiest way to do that is to use the panel type template and have it render a file in your templates folder. This might be enough for 80% of all use cases. For anything more complex (FormBuilder submissions? Comments? Live chat?), you can add new panel types by creating modules that extend the DashboardPanel base class. Check out the documentation on custom panels or take a look at the HelloWorld panel to get started. I'm happy to merge any user-created modules into the main repo if they might be useful to more than a few people. Roadmap Panel types Google Analytics Draft At a glance / Page counter 404s Layout options Render multiple tabs per panel Chart panel load chart data from JS file (currently passed as PHP array)

I've spent the last while experimenting with srcset implementation - and PageimageSrcset is the result: PageimageSrcset Provides configurable srcset and sizes properties/methods for Pageimage. Overview The main purpose of this module is to make srcset implementation as simple as possible in your template code. It does not handle images rendered in CKEditor or similar fields. For an introduction to srcset and sizes, please read this Mozilla article about responsive images. Pageimage::srcset() // The property, which uses the set rules in the module configuration $srcset = $image->srcset; // A method call, using a set rules string // Delimiting with a newline (\n) would also work, but not as readable $srcset = $image->srcset("320, 480, 640x480 768w, 1240, 2048 2x"); // The same as above but using an indexed/sequential array $srcset = $image->srcset([ "320", "480", "640x480 768w", "1240", "2048 2x", ]); // The same as above but using an associative array // No rule checking is performed $srcset = $image->srcset([ "320w" => [320], "480w" => [480], "768w" => [640, 480], "1240w" => [1240], "2x" => [2048], ]); // Use the default set rules with portrait images generated for mobile/tablet devices $srcset = $image->srcset(true); // Return the srcset using all arguments $srcset = $image->srcset("320, 480, 640x480 768w, 1240, 2048 2x", [ "portrait" => "320, 640", ]); // The set rules above are a demonstration, not a recommendation! Image variations are only created for set rules which require a smaller image than the Pageimage itself. On large sites this may still result in a lot of images being generated. If you have limited storage, please use this module wisely. Portrait Mode In many situations, the ratio of the image does not need to change at different screen sizes. However, images that cover the entire viewport are an exception to this and are often the ones that benefit most from srcset implementation. The main problem with cover images is that they need to display landscape on desktop devices and portrait when this orientation is used on mobile and tablet devices. You can automatically generate portrait images by enabling portrait mode. It is recommended that you use this in combination with Pageimage::focus() so that the portrait variations retain the correct subject. The generated variations are HiDPI/Retina versions. Their height is determined by the portrait ratio (e.g. 9:16). Variations are always generated, regardless of whether the original image is smaller. Upscaling is disabled though, so you may find that some variations are actually smaller than they say they are in their filename. The sizes attribute should be used when portrait mode is enabled. Pageimage::sizes will return (orientation: portrait) and (max-width: {maxWidth}px) 50vw by default, which handles the use of these images for retina devices. The maximum width used in this rule is the largest set width. Pageimage::sizes() There is no option to configure default sizes because in most cases 100vw is all you need, and you do not need to output this anyway as it is inferred when using the srcset attribute. You can use the method for custom sizes though: // The property $sizes = $image->sizes; // Returns 100vw in most cases // Returns '(orientation: portrait) and (max-width: {maxWidth}px)50vw' if portrait mode enabled // A method call, using a mixture of integer widths and media query rules // Integer widths are treated as a min-width media query rule $sizes = $image->sizes([ 480 => 50, "(orientation: portrait) and (max-width: 640px)" => 100, 960 => 25, ]); // (min-width: 480px) 50vw, (orientation: portrait) and (max-width: 640px) 100vw, (min-width: 960px) 25vw // Determine widths by UIkit 'child-width' classes $sizes = $image->sizes([ "uk-child-width-1-2@s", "uk-child-width-1-3@l", ]); // (min-width: 640px) 50vw, (min-width: 1200px) 33.33vw // Determine widths by UIkit 'width' classes $sizes = $image->sizes([ "uk-width-1-2@m", "uk-width-1-3@xl", ]); // (min-width: 960px) 50vw, (min-width: 1600px) 33.33vw // Return the portrait size rule $sizes = $image->sizes(true); // (orientation: portrait) and (max-width: {maxWidth}px) 50vw // The arguments above are a demonstration, not a recommendation! Pageimage::render() This module extends the options available to this method with: srcset: When the module is installed, this will always be added, unless set to false. Any values in the formats described above can be passed. sizes: Only used if specified. Any values in the formats described above can be passed. uk-img: If passed, as either true or as a valid uk-img value, then this attribute will be added. The srcset attribute will also become data-srcset. Please refer to the API Reference for more information about this method. // Render an image using the default set rules echo $image->render(); // <img src='image.jpg' alt='' srcset='{default set rules}'> // Render an image using custom set rules echo $image->render(["srcset" => "480, 1240x640"]); // <img src='image.jpg' alt='' srcset='image.480x0-srcset.jpg 480w, image.1240x640-srcset.jpg 1240w'> // Render an image using custom set rules and sizes // Also use the `markup` argument echo $image->render("<img class='image' src='{url}' alt='Image'>", [ "srcset" => "480, 1240", "sizes" => [1240 => 50], ]); // <img class='image' src='image.jpg' alt='Image' srcset='image.480x0-srcset.jpg 480w, image.1240x640-srcset.jpg 1240w' sizes='(min-width: 1240px) 50vw'> // Render an image using custom set rules and sizes // Enable uk-img echo $image->render([ "srcset" => "480, 1240", "sizes" => ["uk-child-width-1-2@m"], "uk-img" => true, ]); // <img src='image.jpg' alt='' data-uk-img data-srcset='image.480x0-srcset.jpg 480w, image.1240x640-srcset.jpg 1240w' sizes='(min-width: 960px) 50vw'> // Render an image using portrait mode // Default rule sets used: 320, 640, 768, 1024, 1366, 1600 // Portrait widths used: 320, 640, 768 // Original image is 1000px wide // Not possible to use portrait mode and custom sets or portrait widths in render() // Sizes attribute automatically added echo $image->render(["srcset" => true]); // <img src='image.jpg' alt='' srcset='image.320x569-srcset-hidpi.jpg 320w, image.640x1138-srcset-hidpi.jpg 640w, image.768x1365-srcset-hidpi.jpg 768w, image.jpg 1024w' sizes='(orientation: portrait) and (max-width: 768px) 50vw'> Configuration To configure this module, go to Modules > Configure > PageimageSrcset. Set Rules These are the default set rules that will be used when none are specified, e.g. when calling the property: $image->srcset. Each set rule should be entered on a new line, in the format {width}x{height} {inherentwidth}w|{resolution}x. Not all arguments are required - you will probably find that specifying the width is sufficient for most cases. Here's a few examples of valid set rules and the sets they generate: Set Rule Set Generated Arguments Used 320 image.320x0-srcset.jpg 320w {width} 480x540 image.480x540-srcset.jpg 480w {width}x{height} 640x480 768w image.640x480-srcset.jpg 768w {width}x{height} {inherentwidth}w 2048 2x image.2048x0-srcset.jpg 2x {width} {resolution}x How you configure your rules is dependent on the needs of the site you are developing; there are no prescriptive rules that will meet the needs of most situations. This article gives a good overview of some of the things to consider. When you save your rules, a preview of the sets generated and an equivalent method call will be displayed to the right. Invalid rules will not be used, and you will be notified of this. Portrait Mode Set Widths A comma limited list of widths to create HiDPI/Retina portrait variations for. Crop Ratio The portrait ratio that should be used to crop the image. The default of 9:16 should be fine for most circumstances as this is the standard portrait ratio of most devices. However, you can specify something different if you want. If you add a landscape ratio, it will be switched to portrait when used. Any crops in the set rules ({width}x{height}) are ignored for portrait mode variations as this ratio is used instead. UIkit Widths If your website theme uses UIkit, you can pass an array of UIkit width classes to Pageimage::sizes to be converted to sizes. The values stored here are used to do this. If you have customised the breakpoints on your theme, you should also customise them here. Please note that only 1- widths are evaluated by Pageimage::sizes, e.g. uk-width-2-3 will not work. Remove Variations If checked, the image variations generated by this module are cleared on Submit. On large sites, this may take a while. It makes sense to run this after you have made changes to the set rules. Image Suffix You will see this field when Remove Variations is checked. The value is appended to the name of the images generated by this module and is used to identify variations. You should not encounter any issues with the default suffix, but if you find that it conflicts with any other functionality on your site, you can set a custom suffix instead. Debug Mode When this is enabled, a range of information is logged to pageimage-srcset. PageimageSrcsetDebug.js is also added to the <head> of your HTML pages. This will console.log a range of information about the images and nodes using srcset on your page after a window.onresize event is triggered. This can assist you in debugging your implementation. The browser will always use the highest resolution image it has loaded or has cached. You may need to disable browser caching to determine whether your set rules are working, and it makes sense to work from a small screen size and up. If you do it the other way, the browser is going to continue to use the higher resolution image it loaded first. UIkit Features This module implements some additional features that are tailored towards UIkit being used as the front-end theme framework, but this is not required to use the module. Installation Download the zip file at Github or clone the repo into your site/modules directory. If you downloaded the zip file, extract it in your sites/modules directory. In your admin, go to Modules > Refresh, then Modules > New, then click on the Install button for this module. ProcessWire >= 3.0.123 is required to use this module.

Hey guys, Thought I would share a quick preview of Designme. A module we (Eduardo @elabx and I) are building for visually laying out your templates/edit screens. ? This is a really quick, zero polish screen grab. FYI. Video #2 - UPDATE This new video shows the following features in Designme: Re-arranging fields via Drag & Drop Re-sizing fields via Dragging. Adjusting field settings - with live refresh. Working on "hidden" fields while Designme is active. Creating New fields. Deleting fields. Creating/Deleting Tabs. Dragging fields between tabs. Creating fieldsets. Tagging/Un-tagging fields. Fields without headers expand when hovered (like checkboxes). Live filtering of fields in the sidebar. Ability to adjust (all) Template settings without leaving Designme. Template File Tree Editing Template files source code with ACE Editor. Editing Multiple files with ACE Editor. (New Tabs) Saving files. Techie stuff Fields load their own js/css dependancies. *ready to use on creation (*most fields) Everything happens via Ajax to ProcessPageEdit (via module + hooks). Designme has a JS api that you can use. All actions trigger events. We would love any detailed feedback on what you see so far. If you are interested in testing Designme. Let me know below. ? Video #1.

Hello there, I been using Gnu/Linux as my primary OS and only OS I use in my Work/Personal Laptop ( before that I used to have dual boot with Windows, the last version of MS OS I have used was Windows XP ). I been totally satisfied with the performance of Linux and everything I needed was there. For the development, I use the Geany editor ( now I am using Atom ), GIMP for some few image editing, XAMPP for the STACK. Right now I am on Manjaro Box with Kubuntu as the second OS. How many others here use GNU/Linux as the primary OS setup ?

Hello all, I'm in the process of updating some websites to comply to the new GDPR opt-in regulations. Doing some resarch, I found this open source tool: https://klaro.kiprotect.com/ It looks quite promising and implementation seems quite easy. Have you used this tool? What is your experience so far? I saw that @Jens Martsch - dotnetic made some comments to the klaro GH issues. Did you implement this with PW?

@Miguel Scaramozzino Also, just wanted to confirm with you that you're making request to the correct url. In default PW settings "/graphql" and "/graphql/" are different. If you happen to make a request to "/graphql" (without forward slash at the end) it will be redirected to "/graphql/" and the content of your POST request gets lost in the middle.

Thanks for confirming what I had suspected. For anyone interested here's the method https://github.com/processwire/processwire/blob/master/wire/core/WireCache.php#L1229 which is implemented in various places in the WireCache module. For what it's worth (not much likely!) I'd agree that this is indeed being too clever, and suggest that ideally you'd get out of the cache exactly what you put into it, not an interpretation of that data. Cheers,

@LostKobrakai Ahhh... I understand now. Thank you for explaining that. Having said that, I'm having a hard time thinking of many cases where I wouldn't want the local time/wall time to change when the definition of the timezone has changed. Otherwise, the value is no longer correct according to the new definition. I'm sure that there are cases where you would want the old wall time preserved (even in your example it is not clear to me whether you would want the wall time or the absolute time preserved for your appointment), but it seems like they would be be few and far between compared to the cases where you would want the values to be able to update dynamically and to be able to easily convert between time zones. My current solution to this problem is to set $config->timezone to UTC at the start of a project that needs to work with multiple time zones and leave it there, converting values to local time as needed on the front end. Perhaps this is what @ryan always had in mind for such situations, but it does require some foresight. Otherwise you do end up with a real mess. Can we all just agree that time zones should be abolished? ?

It is working ok. I was just curious how you create the non-css version.

@gebeer The non CSS version is included in the dist directory. You should ask such specific questions in the github issues: https://github.com/KIProtect/klaro/issues Besides of that, your command looks good. They expect the node environment variable SEPARATE_CSS to generate the script.

Here's something interesting, I've created a /test.php file with the following code: <?php namespace ProcessWire; require("index.php"); header('Content-Type: application/json'); echo json_encode($modules->get('ProcessGraphQL')->executeGraphQL(), true); This works fine. So there must be something wrong with the way that the graphql template is being processed. Maybe ProcessWire is taking control of the post body before it reaches the module and this doesn't happen when you bootstrap PW from an external file?

These updates sound great. Thanks, Ryan! On a related subject, I recently (and painfully) discovered that the DateTime field stores dates in the database as a string (MySQL DateTime) in whatever timezone PW is currently configured to. So if you change your PW time zone, the date string you get back from the DB is now interpreted to be in that new time zone rather than the one it was originally entered as. In other words, the unix timestamp you get out of it is no longer the same as the one you put into it. It seems to me that the "correct" way to handle this would be for the unix timestamp to always be converted to and stored as a UTC string in the MySQL DateTime field, and then converted back to PW's current timezone at run time. This would be an extremely simple change to PW's DateTime field (using gmdate() instead of date() when storing and using php's DateTime class with UTC timezone specified when getting the value back). Then when someone changes their timezone in PW, the absolute values of the dates would stay the same. Only the time zone (how they are represented on the front end) would change. So different users could have different time zone settings and view the PW back end in their own time zone, etc. The problem, of course, is that this would break existing installations, so this would have to be added as a new module or as an alternative version included in the core. Ideally when you converted an existing datetime field to the new version it could automatically update your database values from the current PW timezone to UTC.

I pushed release v0.6.13 which fixes the page list action buttons (unpublish, hide, etc.)

Memo to myself and mybe to safe someone else from losing hours trying to understand why a multi-language Inputfield does not render() as expected... Learnings: 1) Inputfield::render() is only hookable for single-language Inputfields! When PW renders a multi-language Inputfield the LanguageSupport module adds a hook that fires after the original Inputfield::render(). This hook calls the render() method for each language and to avoid circular references it does that directly on $inputfield->___render() and not $inputfield->render(): https://github.com/processwire/processwire/blob/51629cdd5f381d3881133baf83e1bd2d9306f867/wire/modules/LanguageSupport/LanguageSupport.module#L445-L453 2) When building a custom Inputfield that supports a multi-language setup it is critical that its render() method is defined with 3 underscores! Otherwise the LanguageSupport hook that adds the markup for the other languages' fields would not fire.

The replies above by Ryan and BitPoet pretty much covered the questions you raised, so just dropping a quick comment regarding this ? I tend to fuss a lot over things like organising the project, so I'd say that I'm familiar with your concerns. In my opinion a sensible structure is a key design decision, and even more so when you're working with others. So yeah, I can't disagree with anything you've said here. Regardless, after giving this a lot of thought I ended up organising files by type — at least I think that's what you'd call it — in Wireframe. By this I mean that I've indeed bundled controllers in one directory, components in another, views in a third one, etc. For me this just makes more sense: When I add a new template and a view for it (assuming that it isn't already covered by some shared code, which is quite often the case), I'll probably start from the controller. I may copy-paste some parts from other controllers, or perhaps I'll extend another one if I have a very similar need at hand. Some controllers may use other controllers as sort of "subcontrollers", and often there are shared libraries as well. After the "backend" is mostly done, I'll move on to the view in order to actually put those methods to use. In other words I tend to work in layers, going from backend to the frontend. (This is just the way I like to work, and I definitely don't assume everyone to prefer the same approach.) Things like components or partials are made to be shared. If I only need a specific piece of code once — or in one template — then it probably doesn't need to be abstracted away. That'll just make things harder to grasp and add a tiny bit of overhead without actually providing much extra value. Copying files from project to project has been a relatively rare need for me, so when it does come up, it doesn't matter much if I have to copy one directory, or perhaps a couple of files from a couple of directories. That being said: in an old environment this need did come up often (and the structure was pretty complex), so I ended up writing a script to automate it ? It's true that the process of building a new site often involves moving back and forth between backend and frontend, but I still prefer this sort of structure over the alternatives. Also: I find it a tad easier to maintain after the site is already live, since often a specific change will only affect one "layer" of the site. Anyway, this is largely a matter of preference ? Exactly. When I first read about custom Page classes, my first thought was that this stuff is frigging cool... but I probably won't be using it anytime soon. I fully agree that it's a great feature, but in my case I've already solved it in a way that — in my opinion — fits my needs better. I may end up using this for some stuff eventually, but right now I don't have a need for it, and that's fine ?

@ryan It looks like there are some issues with InputfieldDatetime. I have to fields 'publish_from' and 'publish_until'. None of them are configurated to prefill today's date if empty, but after the update, if one of the fields has value second one is prefilled with its value. The second issue is that after page save I cannot change the selected value, it shows that the date is changed but after page save it still show the previous date. The third issue is that Date Picker options are not applied to the field. For example if I set Date Picker option to "No date/time picker" on the first field second one will also have no date/time picker. Looks like there is something wrong with js initialization and first field configuration is applied to all other date fields on the page edit screen. Tested on two different sites.

New showcase entry, for Aaron Copland, composer. https://www.aaroncopland.com/ Features Filterable/Searchable Works Listing with category, publisher, instrument, tag, keyword, or year range filtering Each work has a page showing meta data, as well as related media like audio, images, video, and related events & news. Works are cross related at various levels, as Copland would sometimes use sections of one work in other works Microdata (json-ld) for site, person, works, images, news and some events Ability to display embedded media like Spotify, Youtube/Vimeo, Getty Images, Archive.org etc. Fast autocomplete site & works search Modules used Admin Custom Files AOS Page Field Edit Links Auto Smush Batch Child Editor Custom Inputfield Dependencies Admin Comments* Secure Files Font Awesome Pro Import External Images Autocomplete for CK Editor Inputfield Selectize Simple MDE Visual Page Selector Font Icon Picker Page Field Info Page Table Extra Actions Pages 2 PDF Changelog Dashboards Process Documentation Settings Factory Restrict Tab View Selectize Template & Field Tags Prev/Next Tabs Text Input Awesomplete Get Video Thumbnails Ion Rangeslider Runtime Markup Config Form Inputfield Color Inputfield Field Descriptions Extended Cookie Management Banner ProCache Lister Pro Profields (Table mostly) FormBuilder Various custom modules *Admin Comments is a module in development that enables site admins/editors/managers to add comments to pages in the backend and to optionally notify other site admins/editors/managers. Possibly to be released in directory soon.

There is currently no support for webp with CAI3 master. There (only) is a different branch with webp support on github. But I haven't got any feedback about it, so it shouldn't be called "production ready". 5 months ago, I locally started a complete rewrite of CAI3 to only use native core images support. But I get distracted from it. If I remember right, I have included it in one client project that is live since september. But not sure how stable it is. If you have some time for testing and you like, I send you my current version of CAI4. (?)

Hi @montero4, That all makes sense. You can also do the following: // Create an image variation 1200px wide with -srcset suffix $image = $page->image->width(1200, ["suffix" => "srcset"]); echo "<img src='$image->url' alt='$alt_text' srcset='$image->srcset'>"; // PageimageSrcset will use the original to generate the srcset value If you have a look at the Pageimage options, you can add a suffix to the filename when resizing. Cheers, Chris

Hi @nbcommunication Thank you for your reply. That's a neat solution. I didn't realize that if you resized or manipulated an image, it's -that- variation image that gets used as the src in the <img> tag. That actually makes sense. However, in my case, that approach wouldn't work because I'm disallowing access to the original jpeg images through an htaccess lockout method posted by horst in this forum. The way that method works is that it disallows all access to .jpeg files unless it has a certain suffix (like -piacontain, -pim2-full,-blogthumb, etc.). I want the jpegs to therefore have the "-srcset" suffix so that it is accessible. Here's the solution I came up with for future reference as the approach might help other people. //assemble img markup $image = $page->image; $string = $image->srcset("1200"); //create srcset of image 1200px wide $address = explode(" ", $string); $address = $address[0]; //create srcset using pageimagesrcset module default settings $srcset = $image->srcset; echo "<img src=\"$address\" alt=\"$alt_text\" srcset=\"$srcset\">"; The result of above code: <img src="/pw/site/assets/files/1070/test.1200x619-srcset.jpg" alt="alt_test" srcset="/pw/site/assets/files/1070/test.320x165-srcset.jpg 320w, /pw/site/assets/files/1070/test.640x330-srcset.jpg 640w, /pw/site/assets/files/1070/test.768x480-srcset.jpg 960w, /pw/site/assets/files/1070/test.1200x619-srcset.jpg 1200w"> This approach works and the htaccess gatekeeper lets the image request go through, but if a user attempts to access test.jpg directly, then it will not pass through. Thank you for module. As mentioned, I'm using it to serve all the images on my website. Regards,

Definitely! Started playing with it around 1998 and learnt by busting installs over and over. I have a couple of Windows VMs for work but only fire them up when I really have to. Other than that I am in Linux all the time. Currently running Manjaro on my laptop, with an Arch VM for testing and a Debian VPS for my web stuff. Started off with Redhat, Mandrake/Mandriva, Debian, Gentoo (its first release... STAGE 1 INSTALLS BACK THEN TOOK A LONG TIME) before falling back in love with Debian. Then I used Ubuntu from its first release (2004(?)) up until last year when I needed to reformat my laptop and figured I'd give the Arch style thing a go but didn't have enough time to play around with an Arch install from scratch.

Yes it is good and in use on the site https://www.p-jentschura.com/ I added this directly in the HTML so it has nothing to do with ProcessWire in general, but I am thinking about developing a module for it to set the options. But thats only for the far future and next website project.

We recently relaunched DOMiD, the Documentation center and Museum of Migration in Germany. Concept, design and implementation by schwarzdesign. Features Bilingual site with German and English A section-based design focusing on flexibility and ease-of-use for editors Multiple forms built with FormBuilder that can be placed on any page Separate feeds for news & press releases Lightning fast page loads with almost perfect ratings in Lighthouse Completely accessible and SEO-friendly Notable tech decisions Forms and form placement There are multiple forms for different services that DOMiD offers. Those are built with the FormBuilder. The editors don't have access to the FormBuilder itself, but we still wanted to allow them to control which form is displayed on what page. For this purpose, every page has a select field to select which form to include (if any). Additionally, the form placement has additional fields for a headline and a description, so a generic contact form can be reused in different contexts. Section-based design Most pages are built through Repeater Matrix sections. There are multiple section types available, for example: A generic text / image column with up to three columns of text and images An accordion (rendered as <details> elements). An image gallery Downloads (for files and images, displayed as a list of downloads) External Embed (e.g. YouTube) All sections have an optional headline and a selection of three different background colours. In addition, text columns may be rendered as a coloured block with some padding. This allows for interesting and diverse layouts. Testimonial database One of the available sections is for testimonials or statements (you can see one at the bottom of the homepage). Because one testimonial may be displayed on multiple pages and the client wanted to be able to switch the displayed testimonial on the fly, there's a separate content type for statements. The statement content type has fields for the statement text, author, and author image. The testimonial section only has a page reference field to select which statement to show. This way, the testimonial definition is separate from the placement on a page. Modules used Form Builder Pro Fields (Repeater Matrix in particular) Unique Image Variations ALIF - Admin Links in Frontend Sitemap Wire Mail SMTP Developer Tools: Tracy Debugger, Duplicator, ProcesWire Upgrade Migration museum As a sidenote for anyone living in Germany, this month the German Bundestag has approved funding for DOMiD's first Migration Museum ("Haus der Einwanderungsgesellschaft")! The museum will be build in Cologne and is scheduled to be finished by 2023. We're looking forward to it! Check out this page if you want to learn more, or find out what people are saying about it here.

Manjaro is rocking cool !

I once spent 2 days trying to configure my modem and my Sound Blaster drivers on Slackware. What a pain :). Nowadays is much easier indeed, but not perfect. I can't work on Linux full time because I need to use Adobe products almost everyday and unfortunately the there's no better workflow than running them on Windows or MacOS.

Ha, I also started using Fedora Core in 2003. I've tried a lot of distros over the years and have pretty much settled on RHEL/CentOS for servers because of the great documentation. I use Windows at my day job (with a bit of Ubuntu through WSL) and Mac for music production. There's plenty to love (and dislike) about each OS, to be honest. It's impressive how many tools actually work well on Linux these days, and how things like wireless network and soundcard compatibility aren't the complete nightmares they were back in the 00's. Another great thing about Linux is that you can look at, say, UNIX documentation from the '70s or a Red Hat book from 1998 and much of it will still be relevant and useful.

Yeah!! Long time Linux user. From Fedora Core 1 (2003) to Fedora 30 (2019). Very happy. Gideon

Been on linux since early 2000s and haven't looked back.

Yes, Linux here, either Mint or plain Arch depending on which machine I'm using. All my VPSs are running Ubuntu at present.

Actually i mostly use Linux too. Just using a Xubuntu as it is lacking most the cool and modern desktop effects i not really like. Libre Office as it often is more "compatible" for opening office documents than Microsoft office itself. In addition it has far better support for CSV data files. Gimp for grafiks, Imagemagick for scripted image processing./creation. In addition Scribus and Inkscape for other tasks Vim, Mousepad, Atom, Jedit, PHP-Storm as editor/development environment. Firefox / Thunderbird for web and communication. On the server side i almost never used anything else than Linux/BSD. Apache, NGINX, MariaDB, MySQL, PostgreSQL, PHP, Perl, Python, Bash .... What else do i need ? ?

Here's @Robin S code adapted to produce the following thumbnail navigation (semi-transparent thumb #98 is the current one): <?php // Number of thumbs to show $limit = 9; // Get the number of visible siblings $num_siblings = $page->parent->numChildren(true); // The default start value is zero $start = 0; // If the number of siblings is greater than the limit then we need to adjust the start value if($num_siblings > $limit) { // Get the halfway point of the limit $half_limit = floor($limit / 2); // Get the index of the current page relative to its siblings $index = $page->index(); // Adjust the start value to keep the current page within the sibling links if($index > $half_limit) $start = $index - $half_limit; if($num_siblings - $start < $limit) $start = $num_siblings - $limit; } $items = $page->siblings("start=$start, limit=$limit"); // Next page and previous page relative to current page $next_page = $page->next(); $prev_page = $page->prev(); // Next and previous SVG icons $left_arrow = "<svg role='img' aria-labelledby='previous-icon' class='icon icon--inline' height='24' width='24'><title id='previous-icon'>Next photo: {$page->prev->title}</title><use xlink:href='#icon--left-arrow'></use></svg>"; $right_arrow = "<svg role='img' aria-labelledby='next-icon' class='icon icon--inline' height='24' width='24'><title id='next-icon'>Previous photo: {$page->next->title}</title><use xlink:href='#icon--right-arrow'></use></svg>"; ?> <?php if($items->count > 1): echo "<div class='thumb_gallery'>"; if ($prev_page->id) echo "<a class='thumbnail' href='$prev_page->url'>$left_arrow</a>"; foreach($items as $item): $number = $item->index() + 1; $current = null; if ($item == $page) $current = " aria-current='page'"; echo "<a$current class='thumbnail' href='$item->url'>"; echo "<img class='responsive-images thumbnail__image' src='{$item->photo->size(150,150)->url}' width='75' height='75' alt=''>"; echo "<span class='thumbnail__label'>$number</span>"; echo "</a>"; endforeach; if($next_page->id) echo "<a class='thumbnail' href='$next_page->url'>$right_arrow</a>"; echo "</div>"; endif; ?> I hope this can help someone else. Thanks again @Robin S !!

If you have a large number of images in the gallery it would be better not to load all the pages into memory only to display a portion of them with slice(). Better to use start and limit in your selector to get only the pages you will display. You could adapt the example given here:

A little while ago, I began a complete rewrite of the module that was set to add additional features (like SASS and Stylus, for example). Unfortunately, I won’t have time to work on it as fast as I’d like. But, it’s still something I’d like to do.

It is only option D that forces the modal dialog editor. Option C allows inline editing - you just have to place edit tags around the individual fields in your repeater rather than around the whole repeater foreach(). For example: <?php foreach($page->my_repeater as $item): ?> <h3><edit <?= $item->id ?>.title><?= $item->title ?></edit></h3> <?php endforeach; ?> You're right that there does seem to be some sort of permissions issue for non-superusers, but rather than change access for the admin template (which non-superusers shouldn't have access to) I suggest you give edit access to your repeater template (select the "Show system templates" option to see repeater templates).