happywire

Is this due to not having enough reputation or is my account somehow blocked from such actions? At the moment I cannot edit my posts or give Like or Thanks to other people's posts. Thank you.

Yes, that is it. So simple! Thank you heaps. That will get me going. I did search in the forums and docs/tuts. Do you have good resources for me to follow through with delayed output with regards to making proper responsive images. On my list is this. 1. Define image sizes and upon upload have ProcessWire create those. a) Return the array of all created image urls. b) Ideally create webp versions of those images as well. For webp support I found this 2. In the end I would like to write a function that I can include in a region that will output proper responsive image syntax similar to this. <picture class="pic-id-578 projects-picture" ><source sizes="(min-width: 1700px) 469px, (min-width: 1200px) 27.71vw, (min-width: 780px) calc(50vw - 80px), (min-width: 640px) calc(50vw - 24px), calc(100vw - 32px)" srcset=" https://example.com/picture-640x427.webp 640w, https://example.com/picture-525x350.webp 525w, https://example.com/picture-425x284.webp 425w, https://example.com/picture-320x214.webp 320w, https://example.com/picture-240x160.webp 240w, https://example.com/picture-180x120.webp 180w " type="image/webp" /> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="https://example.com/picture-320x214.jpg" alt="Some useful alternative text" sizes="(min-width: 1700px) 469px, (min-width: 1200px) 27.71vw, (min-width: 780px) calc(50vw - 80px), (min-width: 640px) calc(50vw - 24px), calc(100vw - 32px)" data-srcset="https://example.com/picture-640x427.jpg 640w, https://example.com/picture-525x350.jpg 525w, https://example.com/picture-425x284.jpg 425w, https://example.com/picture-320x214.jpg 320w, https://example.com/picture-240x160.jpg 240w, https://example.com/picture-180x120.jpg 180w" /> </picture> Coming from WP I did write this function. <?php function responsive_picture($acf_image_array, $media_condition, $type) { // Get the global $theme_name_pagename variable global $theme_name_pagename; // var_export( $theme_name_pagename ); // Get the global $theme_name_category_slug variable global $theme_name_category_slug; // var_export( $theme_name_category_slug ); // Get the global $theme_name_custom_post_type_slug variable from archive.php global $theme_name_custom_post_type_slug; // var_export( $theme_name_custom_post_type_slug ); // Make an array where the sources for the image will be placed $sources = array(); // If the field for the post/page/cpt is filled then do stuff, otherwise don't if ($acf_image_array) { foreach ($acf_image_array['sizes'] as $image_size_key => $image_size_value) { if (preg_match('/^(\d+)$/', $image_size_key)) { if (preg_match('/-' . $image_size_key . 'x\d+\.(jpeg|jpg|png)$/i', $image_size_value)) { array_push( $sources, array( 'width' => $image_size_key, 'height' => $acf_image_array['sizes'][$image_size_key . '-height'], 'src' => $image_size_value, ) ); } } } // end foreach ( $acf_image_array['sizes'] as $image_size_key => $image_size_value ) // http://php.net/manual/en/function.array-reverse.php // $sources = array_reverse( $sources ); // return var_export( $sources ); // exit; $srcset = array(); foreach ($sources as $index => $source_values) { array_push($srcset, $source_values['src'] . ' ' . $source_values['width'] . 'w'); } $srcset = implode(', ', $srcset); // preg_replace .jpg with .webp // http://php.net/manual/en/function.preg-replace.php $srcset_webp = $srcset; $pattern = '/.jpg /'; $replacement = '.webp '; $srcset_webp = preg_replace($pattern, $replacement, $srcset_webp); // var_export($srcset_webp); // Depending on the post, page or custom post type, set the picture class accordingly if (null !== $theme_name_pagename) { // echo esc_html( $pagename ); print '<picture class="pic-id-' . esc_html($acf_image_array['id']) . ' page-' . esc_html($theme_name_pagename) . '-picture">'; } if (null !== $theme_name_category_slug) { // echo esc_html( $category_slug ); print '<picture class="pic-id-' . esc_html($acf_image_array['id']) . ' category-' . esc_html($theme_name_category_slug) . '-picture">'; } if (null !== $theme_name_custom_post_type_slug) { // var_export( esc_html( $post_type ) ); // var_export( $theme_name_custom_post_type_slug ); // https://codex.wordpress.org/Function_Reference/is_post_type_archive // Differentiate between single- and archive- if (is_post_type_archive($theme_name_custom_post_type_slug)) { // print 'is_post_type_archive'; print '<picture class="pic-id-' . esc_html($acf_image_array['id']) . ' archive-' . esc_html($theme_name_custom_post_type_slug) . '-picture">'; } else { print '<picture class="pic-id-' . esc_html($acf_image_array['id']) . ' single-' . esc_html($theme_name_custom_post_type_slug) . '-picture">'; } } else { // null === $theme_name_custom_post_type_slug // var_export( $theme_name_custom_post_type_slug ); $post_type = get_post_type(); if ('' !== $post_type && 'page' !== $post_type) { $post_type_data = get_post_type_object($post_type); $theme_name_custom_post_type_single_slug = $post_type_data->rewrite['slug']; // var_export( esc_html( 'single ' . $theme_name_custom_post_type_single_slug ) ); print '<picture class="pic-id-' . esc_html($acf_image_array['id']) . ' single-' . esc_html($theme_name_custom_post_type_single_slug) . '-picture">'; } } // This part of the function is for the webp file format START ;) print '<source '; // print 'sizes="' . esc_html( $media_condition . $viewport ) . '" '; // leave space between attributes print 'sizes="' . esc_html($media_condition) . '" '; // leave space between attributes print 'srcset="' . esc_html($srcset_webp) . '" '; // leave space between attributes print 'type="image/' . esc_html($type) . '">'; // either webp or jp2 and close <source> here // This part of the function is for the webp file format END ;) // Default loading // print '<img '; // print 'src="' . esc_html( $acf_image_array['sizes'][320] ) . '" '; // default image size leave space between attributes // print 'alt="' . esc_html( $acf_image_array['alt'] ) . '" '; // leave space between attributes // print 'sizes="' . esc_html( $media_condition ) . '" '; // leave space between attributes // print 'srcset="' . esc_html( $srcset ) . '">'; // close img tag here // print '</picture>'; // With lazysizes print '<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" '; // leave space between attributes print 'data-src="' . esc_html($acf_image_array['sizes'][320]) . '" '; // default image size leave space between attributes Alternatively you can simply define a fallback src via the data-src attribute. print 'alt="' . esc_html($acf_image_array['alt']) . '" '; // leave space between attributes print 'sizes="' . esc_html($media_condition) . '" '; // leave space between attributes print 'data-srcset="' . esc_html($srcset) . '">'; // close img tag here print '</picture>'; } } In a template I would then go on to call that function for example with the following arguments. <?php // Get the array values for the field responsive_picture for the current post $responsive_picture_array = get_field( 'responsive_picture' ); responsive_picture( $responsive_picture_array, '(min-width: 1700px) 469px, (min-width: 1200px) 27.71vw, (min-width: 780px) calc(50vw - 80px), (min-width: 640px) calc(50vw - 24px), calc(100vw - 32px)', 'webp' ); ?> So that is my aim really that I am working towards. Once they all check out with this https://github.com/ausi/respimagelint I will be satisfied. Any sections in the forums/docs/tuts/api/recepies that you can think of, kindly fire away, thank you.

[solution] ======================================================== I made a simple gallery-page.php template with following code. <?php namespace ProcessWire; // gallery-page.php template file $content = $page->images; if (count($page->images)) { // the page has one or more images foreach ($page->images as $image => $value) { echo $value; echo "picture markup to follow.."; } } Ideally this should be output via the _main.php output file. <!-- main content --> <div id='content'> <h1><?php echo $title; ?></h1> <?php echo $content; ?> </div> Having it like above inserts the image urls and the text "picture markup.. " right at the top of the page and then only the image urls inside the Gallery section of the page. I understand why this happens. $content is once defined as $page-> image; but the if(count.. condition is inserted directly at the top of the page because it is not delyed output any more. Now when I try to do <?php namespace ProcessWire; // gallery-page.php template file $content = if (count($page->images)) { // the page has one or more images foreach ($page->images as $image => $value) { echo $value; echo "picture markup to follow.."; } } naturally it throws an error. How can I have the template code that I want to be stored inside the $content variable please? So something like $content = and then put all my code that I like for the images to be in that?

Ha, thx heaps for the detailed reply. As you can see I understood it wrong and thank you for getting back about it. Much appreciated! So, I am just learning JS basics (doing this course at the moment udemyDOTcom/javascript-bootcamp-2016/ ), and to clarify/repeat, what is happening here is called type coercion as explained here for example https://eloquentjavascript.net/01_values.html#h_AY+YGu6qyM , right? Integer is a full number, so no comma behind it, in this case either 0 or 1. Since Math.random outputs floating numbers, meaning with comma and lots of numbers behind the comma, then those numbers, the decimals, are just cut off, truncated, like you say. Then you say this and I think this is highly important to understand because no method is called. So instead of converting the floating result with Math.floor one can just use the logical operator to get an integer, right? The snippet shows how many times from 10'000 runs Math.random() outputs a true integer without type coercion and how many times it outputs a floating number, right?

Ok, now at least I understand it better. The | 0 part of it checks if math.random() is 0 or something else, if it is 0 it leaves it as that and if it is more than 0 it will make it become 1. Good to learn this. But just like you say, that + 1 - 1 part of it is just confusing or poorly written code. Perhaps this is/was there put on purpose to see how Sam would handle explaining it? If you don't mind Sam, is there more context to this or just a line of random code?

Possibly because multiplication goes over OR since you have Math.random() times 2 OR 0, saying that since there will never be the case of running the OR 2 part behind Math.random it puts Math.random() times 2 in brackets and evaluates that first. Then it just leaves the OR 0 part as well as the + 1 - 1 part. We can then take the + 1 - 1 part away and are left with just Math.random times 2 OR 0.

Prettier converts you initial code var randomNum = ((Math.random() * 2 | 0) + 1) - 1; to var randomNum = ((Math.random() * 2) | 0) + 1 - 1 and that is var randomNumPretty = (Math.random() * 2) | 0 because 1 - 1 is 0 and there is no point in adding 0. So that means your variable is a random number between 0 and 1 (inclusive of 0, but not 1) multiplied by 2 or it is 0 if the result of Math.random is 0. Interesting what Prettier is doing there. Why does Prettier do that though? Does this answer your question?

This is what I see when I try to edit my profile. Perhaps that is due to not having enough reputation? Then I see other users that are brand new and have a profile picture for example. So yeah, not sure what is going on. Don't mind too much about the profile But being able to edit the title so that other users can see that there is a solution to the thread and hence perhaps find the solution, that is what I am after. Helping others find the right info. Thx.

That is the thing. I cannot see any button to edit the post. Only the share button. I also tried to "like" other people's posts or give "thanks" but for that I also don't find clicking on the heart icon does not do anything. Also when I am in my profile I cannot change or add any more info. Now that is perhaps due to being on "Starter" status, not sure either. One way or another I am under the impression that these features are only unlocked for users that have a "higher rank", not sure. is that so?

Thank you for pointing this out. Very new to all this. Will be more cautious and take the time to, as much as I can, read most of the thread before posting. No bad intentions here. I guess I am still under shock for what happened with WP and Gutenberg, saw the title and felt it would be good to voice my concern before things get going. Thank you indeed.

Excellent. Do you mean a native/ProcessWire core way to output JSON data from the databse through the use of a then native REST api that is called with vanilla JS? That is, as far as I can see from being about 48h into ProcessWire, the only thing I could not find. But again I found modules that do this, so perhaps leave it in modules? it would somehow be very cool though to have core team approved modules that work with the Basic site profile so devs new to this can build from there and learn. Is there a core dev team or is Ryan the one and only being able to commit to ProcessWire? I agree though in a certain way. There are devs that work per client requirements and then there are web designers that just want a page-builder to be able to sell websites/themes that then clients might buy without having to hire a dev while also wanting to use ProcessWire. I guess for the later such a page-builder would come in very handy. I am raised with the "build it yourself" frame of mind, sure not re-inventing the wheel, though the satisfaction of knowing what source will be produced is very important to me, especially knowing where the source code comes from, meaning what in the end is responsible for each line of code that the browser gets to render. But.. given a module would be made that enables devs to output clean code without having to load external libs into the frontend while also being an advantage to devs in the sense that snippets/blocks of code/content sections could be easily dropped and dragged in the backend, well I would at least give it a shot, given it is clean and does not interfere with ProcessWire, meaning if you remove such a module the database and source code produce the same result in the frontend. Quality content is kind. There is tons of well designed websites with plain bad content. I don't see Gutenberg being user friendly or a real thing to look at as a reference for what could be useful for ProcessWire in terms of SPA editing. My experience with Gutenberg was that is made me feel that the entire dashboard has become very brittle on a psychological level, meaning, you click, it shows up, but if it really is saved and will work is a different matter. Often the preview would not render anything, blank page. At least for me, opening and saving things one after another makes me feel much more in control, knowing what why when and where code will be in the frontend. But this is just personal preference. I guess I like things clean, working and working well. Bottom line, I do not find the idea bad per se, I just think something like this requires a lot of thought and careful use case consideration before any code is written, i.e. who would benefit most from such a SPA editing module and what would be the implications for ProcessWire. I say let's first get that JS api going if I understood you correctly that that is/was on the roadmap.

Yes, a fellow agency showed me the huge performance gain, going to get an unlimited license pretty soon. ProCache rocks hard full stop. Nevertheless running ProcessWire production ready with NGINX in a Docker container each with their own process ID where you just drop the site source into it and deploy is something I will also definitely try and get going. But that is left for another day.

Does anyone know how I could edit the title of this thread to "SOLVED - Default Multi-language Install Not Working With Devilbox"? If a mod or someone with enough permissions reads this, kindly edit the title like this, thank you.

Totally agree. Keep ProcessWire clean and do what you like to do in the backend. Having a default editor that all new devs/clients must use would ruin ProcessWire for good. More a fan of "build it yourself, nice and clean" than "click and drag it yourself" .. and be left with a mess of badly performing source code full of external libs etc.

Yeah, I see there is an NGINX thread about a config to use. Though I see it is not definite and seems incomplete and/or not performant/good practice. So I am keeping my hands off that for now. Rather invest time in learning ProcessWire well than try to make it work with something that it does not come out of the box by default. Given the use case for a client with a high-traffic site I am sure there will also be a solution to get it running with NGINX. Who knows, perhaps Cytopia is willing to help. I am making a documentation on how to get ProcessWire to work with devilbox, once I contributed that to devilbox I might have some leeway to ask Cytopia kindly to look into a well written NGINX config given I can find up to date and correct documentation from the ProcessWire dev team on what dirs and files exactly can be served and what should never be be seen on the outside.

Longtime WP user. Came here to escape the madness that is Gutenberg. Please, for love of ProcessWire, do not include any such editor crap inside core. People can do so via modules or even admin themes but keep PW clean, neat, tight, free and fresh from such nonsense. Just learned about ProcessWire a couple days ago at a JS workshop/conference. Reading the docs, doing first examples and totally in love with it all. Keep it that way please. Regarding Gutenberg. Not only do you need to know React deeply, no also JS and a lot of it and deeply also, then you get to work with a "the WP way" version of React to build things. With Gutenberg WP has set the bar to entry into the WP world way above average, all the hobby coders that could easily make a WP site given a month of learning are now facing a very steep and intense learning curve. This will surly show going forward. This is what got WP off the ground in the first place. Ease of use and also ease of getting a site done. This has changed. Kids these days want to see results, fast. Sure if you don't care about PageSpeed or WebPageTest, just need a page-builder, plaster external libs all over the source, go ahead, if that is your game, and if that is what you unknowing client pays for, the sure, yes, use WP and Gutenberg exactly for this kind of crap. But if you really do care about all these things and want to make a good site that performs well where the client can have multiple custom blocks showing in the frontend, then you are going to have to invest a lot of time learning JS and React and "the WP way of React". Not something I see any entry level coder feeling up to. For example Just go ahead and make a responsive image block, and I don't mean just the img tag but something more like this. https://dev.opera.com/articles/responsive-images/ Asked around many frequented channels, senior and seasoned devs could not come up with something that produces usable source code. One guy had a solution, asked him if he could show the code "sorry, no, we have a team of devs working on that in our agency and cannot show it publicly". Go figure. A whole team of devs at an agency for a responsive image block to work in WP. Well done Matt and super smooth more there Mark, slipping React into WP that way. A good colleague that has been using WP all his life and knows PHP inside out tells me "I am going to stay away from Gutenberg for as long as I can". By your means, feel free and make a module, load the editor of your choice, give the client what you think they need or want, but do all this strictly kept away from the beautiful, clean and nice source that is ProcessWire. Given the WP mess I am sure there will be more and more people going to use ProcessWire in the future. I plan to speak publicly about ProcessWire at a conf as well as hold workshops, I am that much convinced about it. I would not even go this way if I would have discovered any dependencies on external libs or any such page-builder crap that now WP has built in. And now back to the docs and examples. It is such a pleasure. ProcessWire.

OK! ? Sorted! ? By default devilbox uses PHP_SERVER=7.2, HTTPD_SERVER=nginx-stable and MYSQL_SERVER=mariadb-10.3 when you up the containers. This is the config in the .env file. https://devilbox.readthedocs.io/en/latest/getting-started/change-container-versions.html#change-web-server-version But it seems ProcessWire does not like either of those (to be tested which one exactly). One I changed the .env file to use PHP 7.2 alongside HTTPD_SERVER=apache-2.4 and MYSQL_SERVER=mysql-5.7 it all works 100% out of the box. Given devilbox has all the tools I need now and will need pretty soon and even more so ProcessWire is a real beauty, given it is so versatile, modular, lightweight and really just anything you want it to be I will be loving to work with it. In fact I would not even call that work, it will be tremendous fun. Just have a look at all this. https://github.com/dadish/skyscrapers-app https://medium.com/icf-church-developers/processwire-vue-js-a-lovestory-d4d5bca365 https://github.com/dadish/ProcessGraphQL And there is not even a need for a frontend framework, something these days pretty any dev jumps onto. For smaller sites something like this is just super neat. https://webdesign.tutsplus.com/tutorials/how-to-create-an-ajax-driven-theme-for-processwire--cms-26579 And for the simple things I have lined up GraphQL will/might not even be needed. But given that fact you can just take ProcessWire in the backend, do anything you like with it and are then totally free in the frontend, well that is what I already really love about it.?? p.s. Found a small typo on line 68 of the created config.php inside the /site/ dir. It is variables and not varibles. * Recommended. This enables API varibles like $pages to also be accessed as pages(),

Linux. After using Windows for 2 decades I started using Linux start of this year. Never looked back. Well I do and wonder why I have not started using it earlier. Albeit I have a dual-boot setup with Windows 10 available I cannot abstain from all the tools I have right under my fingertips. Given PW is so versatile, modular and powerful I am sure for what I plan to do with it devilbox will come in very handy. No, don't get me wrong, I am not saying Windows is bad, I spent a long time with it.

Yeah. Happy greetings everyone. ? Found out about PW just a couple days ago, by chance, read the docs and fell in love. ? Can't wait to get work done with this once I have made myself familiar with the various profiles and learned the basics. So far all profiles work, well, except the multi-language one, but with time I expect results here. Fingers crossed. Going to follow that link, turn debug on and get Tracy Debugger going. Reporting back..

I get 21 of these then the browser shows the error about the "The page isn’t redirecting properly". 172.16.238.1 - - [10/Mar/2019:20:33:28 +0100] "GET /en/about/ HTTP/2.0" 301 0 "https://wiremultilang.loc/" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:65.0) Gecko/20100101 Firefox/65.0" Gonna have a look at mod_security now. Should I try and disable that in .htaccess? Or is there a default .htaccess that I could use for the multi-language profile?

Since the video format is not supported and I cannot edit the above post here is the short video of what I did according to the replies. https://ufile.io/zb9gq

This is what I have done according to the replies. Is there anything else I could do? ProcessWire-Multilang.mp4

Given further replies I will go over those and then report back.

The English link goes to https://wiremultilang.loc/processwire/setup/language-translator/edit/?language_id=1010&textdomain=wire--modules--languagesupport--languagesupport-module&filename=wire/modules/LanguageSupport/LanguageSupport.module The German link goes to https://wiremultilang.loc/processwire/setup/language-translator/edit/?language_id=1012&textdomain=wire--modules--languagesupport--languagesupport-module&filename=wire/modules/LanguageSupport/LanguageSupport.module The Finish link goes to https://wiremultilang.loc/processwire/setup/language-translator/edit/?language_id=1013&textdomain=wire--modules--languagesupport--languagesupport-module&filename=wire/modules/LanguageSupport/LanguageSupport.module Is there something I need to do inside those files? The only link that looks different is the German link, there are some values that are given, both the English and Finish one are completely empty. Also everything is blanked out on all 3 language links when I follow those. No. They are all in separate directories, see the screenshot for the folder structure please. The WWW folder is the devilbox root dir. Each project is inside an htdocs dir. They are kept separate, strictly separate I would assume, given the level of quality of devilbox. So far never had an issue regarding that. Hang on. Inside the wiremultilang dir there is a .htaccess file and a htaccess.txt file. Is that normal? I checked them. They are identical.

I am seeing this when I log into the Admin Panel. Is there something in the Docs about how to solve this?