protro

Thanks @flydev … I just went on the proverbial deep-dive configuring my free version of MAMP to have multiple virtual hosts for the different sites I test, successfully getting my PW core into a wwwroot directory and freeing-up a directory level above it for a cleaner tree-structure similar to yours: now onto some ES6+ module testing.

@flydev, thank you for taking the time to demonstrate so thoroughly. Right off the bat I can see that you Dev environment differs from my MAMP setup in that the PW core files are contained within wwwroot, which in my environment (with multiple sites) I have placed the PW core within their respective htdocs -> project_name_sub_directories, with no corresponding directory level above the PW core, whereas I see in your case you have wwwroot with all PW core, but then a structure above for node_modules, src, etc. I think this is getting to one of my main confusions in my own dev environment. In which case, this might be the time to try our DDEV as @bernhard and others have documented nicely. Perhaps this will be more suitable to my situation. With regards to the wallet connectivity module, many thanks for illustrating such a detailed example. I will be having a deeper look at this.

Well this certainly opened up a can of worms for me. Following some of the advice from this thread, it seems to be a preference of many PW Devs to not use package managers, so I decided this would be a good way to go because * package managers' file structure conflict with ProcessWire's default permissions (irc only files in /site/ are accessible, so this would negate a node_modules directory in the root) * I prefer a simple / manual approach as was described in the above thread with regard to package managers. When it came to trying the alchemy-sdk, I was running into problems with ES6+ syntax / import statements. e.g. Uncaught SyntaxError: Cannot use import statement outside a module. So I guess I'll back up and ask, how are people who do use package managers doing that with PW, given its strict permissions? Secondarily, do I need to also use something like Babel/Webpack to transpile the alchemy-sdk code for distribution ? Feeling confused, and any help is appreciated.

I am using Vanilla JS/PHP on the frontend. It's interesting you recommend Alchemy, I'll look into their sdk again. From what I remember their documentation was based on React, which seems to be the framework of choice for a lot of web3. I've felt disinclined to learn / build with it based of off feedback from other developers that I know and respect. This is all promising to hear you think it's not too heavy a lift with to integrate this stuff into ProcessWire so I will begin again with a fresh set of eyes.

Thank you @flydev for your response. Just to get it out of the way I am a big fan of your Duplicator PW module. It has made a world of difference in my development work. Thank you for releasing that. What I am interested to do is less to authenticate users to sign-in to a backend, and moreso to successfully connect to their wallet, and then if they are in possession of one of our tokens, to display some pages and/or media on the front end that a non-token holder would be unable to view. I am not interested in cold wallets at this time, mostly curious about MetaMask because it is the most popular for Ethereum. I had looked at Web3-Onboard which you mention. Will look into the other libraries you listed. Good starting place.

Greetings ProcessWire forums, I was curious if anyone has built a crypto hot wallet connect / sign-in feature to their PW sites? I am interested in the possibilities of such an integration into one of our project's websites. The only thing I am finding is this, but it just seems to be marketing fluff and I find it not trustworthy: https://blockchain.miniorange.com/crypto-wallet-login-and-nft-token-gating/processwire/ I am interested in learning more how MetaMask and/or Phantom wallet could be managed from a ProcessWire perspective.

@bernhard thank you very much for suggesting the defer option as the culprit. It seems to have fixed the FOUC content flashes I was encountering. Looking forward to upgrading my existing sites to the latest Rockfrontend … I saw your note about breaking changes if I am jumping from v 2.3 -> 3.x.x. I will keep an eye out for those.

I seem to be having a recurring FOUC (Flash of Unstyled Content) issue when developing with ProcessWire, Rockfrontend, and UIKit 3, and I'm not sure what the best approach is. I am using the `uk-animation-fade` and on my local MAMP development environment with Chrome and Brave I am getting flashes of the content before the markup properly fades in. Any help, advice, or methodologies are greatly appreciated.

Hi, I am using @bernhard Rockfrontend with the Latte engine and wanted to create a custom latte filter called firstParagraph that grabs the first <p> from a field called body. in _init.php I added the following: // Include the Latte template engine library require_once '../modules/RockFrontend/vendor/latte/latte/src/Latte/Engine.php'; // Create a new instance of the Latte engine $latte = new \Latte\Engine; // first paragraph summary filter $latte->addFilter('firstParagraph', function ($s) { if (preg_match('/<p.*?>(.*?)<\/p>/', $s, $matches)) { return $matches[1]; } return ''; }); But I get a Fatal Error Trait "Latte\Strict" not found (line 18 of site/modules/RockFrontend/vendor/latte/latte/src/Latte/Engine.php) Am I going about this the wrong way? Any help/feedback appreciated.

I seem to be running into an issue where woff2 fonts that I have manually added to site/templates/webfonts directory are triggering livereload in an endless loop every second. I tried setting the livereload config to have a longer interval, e.g. '2', but this seemed to stop livereload from registering changes entirely. $config->livereload = ['interval' => 2]; The Livereload logs shows (at random) one of several woff2 files repeatedly. Is there something I am missing with regard to adding fonts? Should I exclude the webfonts directory from livereload, and if so, what is the proper syntax for doing so using the 'exclude' parameter ? Thanks @bernhard

Using Rockfrontend + Latte, I was able to add an external link using the navmenu by writing a condition if the page title matched a string: {* build the menu *} {foreach $navItems as $item} <li n:class="$rockfrontend->isActive($item) ? uk-active"> {if $item == $home} <a href="{$item->url}">Home</span></a> {elseif $item->title == "MyMenuItem"} <a href="https://example.com" target="_blank">{$item->title}</span></a> {else} <a href="{$item->url}">{$item->title}</span></a> {/if} </li> {/foreach}

Thanks @bernhard the modules refresh did the trick. Appreciate your quick reply.

How can I safely update the UIkit version? Do I re-install uikit profile in the Rockfrontend module and then that repopulates the Download UIkit dropdown menu? My issue is that I updated Rockfrontend fine but the versions of UIkit available to me are stuck at 3.16.15 as the latest version.

Nevermind I realize now that it's pulling from the file field description // default title source and formatting: $titleOut = $mp3->description ?: $mp3->name; // default $titleAtt = $mp3->description ?: $mp3->name; // attribute

Thanks @Macrura, Also is there a way to pass in a Page's fields to control to Bar-UI Track Title Template if I didn't want to rely on ID3 tags? What are these tokens {title} referencing ? <span itemprop="name">{title}</span>

Thank you so much @Macrura you set me on the right path. I appreciate you taking the time explaining something this elementary. Since I am using Rockfrontend with the Latte engine, I had to do some alteration to the syntax, but the playlist/GUI is working now ? {var $options = ['type' => 'bar-ui', 'skin' => 'gradient-fat',]} {var $songPages = $pages->get('creative')->children} {var $empty = new \ProcessWire\WireArray()} {foreach $songPages as $song} {var $playlist = $empty->import([$song->audio_file])} {/foreach} {$sm2->player($playlist, $options)|noescape} I had to make sure to call \ProcessWire\WireArray from within this .latte template file, and to add a noescape to the $sm2 object. I was also getting stuck by not wrapping the audio_file File Field in an array, as I was doing this initially, which returned WireArray cannot import non arrays or non-iterable objects {$playlist->import($song->audio_file)} Looking forward to playing with this module some more. Many thanks.

Thank you @Macrura I finally got the player GUI to load, but am getting errors and nothing will play. I suppose I am not understanding what $page->audio is really doing. Is that a ProcessWire Audio class on any page? is `audio` the name of a tag? I installed Tracy and don't really understand what these errors mean. I'm doing exactly what is in your documentation. I am attempting to put a playlist on the homepage sidebar using this include playlist.php <?php $options = [ 'type' => 'bar-ui', 'skin' => 'gradient-fat', ]; echo $sm2->player($page->audio, $options); But the page with the Audio File Field is called 'Song-1'. I have a template called Songs with children Song-1, Song-2, etc. and I am trying to add them to a playlist. So I thought $page->audio looks like it's trying to reference the current page, let me try $pages->get('template=Song')->audio … but that does not seem to work. Thanks for your help I feel like this is almost working. Took a long time just getting the GUI up.

Can't seem to get this to work on local dev environment. Looks really cool. Just not understanding how to get the player generated. CSS + JS is loading in the page. I have manually declared swf. I have declared the module in _init.php I have a text field `tag-audio` with the Soundmanager2 textformatter applied in the field Details settings pane. I have Tags enabled on the file field and am using `audio` as the tag on the file. I have the Assets Output Method set to Module API. Seems like I tried everything but neither this nor this works. // in Latte this doesn't work {var $options = ['type' => 'bar-ui', 'skin' => 'gradient-fat',]} {$sm2->player($page->audio, $options)} // neither does calling the shortcode directly from the textformatter field {$pages->get('song-1')->tag_audio} // [smplayer tag=audio]

Hello ProcessWire Community, It is with great pleasure that I share with you the new site for our company Strangeloop Studios, a visual design lab and animation studio based in Los Angeles. We specialize in content for musical artists but have branched into VR, Broadcast, and Music Video projects as well. This is my first site using ProcessWire. I went from complete PW beginner (October 2022) to this re-design and catalog of our various projects in the space of several months. Lurking here on the forums and visiting all of the stellar work that gets shared on the Showcases has taught me a lot. Many thanks to @bernhard for the Rockfrontend module, and @flydev for their Duplicator module. I probably wouldn't have been able to get this far without those … so, many thanks for your contributions! I also appreciate the feedback to my questions in the forums from several users who have improved my understanding of PW with detailed explanations. Things I would like to improve: optimizations for image delivery Multi-language support Looking forward to building more with ProcessWire! Cheers,

Thank you for creating and sharing this module with the community! I have a very elementary question. I've hit some blockage with this. How do you validate and call the module's methods? Directly in the template? External php file? I create a form for email subscribe. <form method="post" action="{$config->urls->assets}inc/mailchimp.php"> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <input type="submit" value="Subscribe"> </form> In the mailchimp.php file I am attempting to validate and call your module's methods. But seem unable to even access any .php file in the PW installation. <?php //load module into template $mc = $modules->get("SubscribeToMailchimp"); $v = new Valitron\Validator($_POST); $v->rule('email', 'email'); if($v->validate()) { // The email address is valid $mc = $modules->get("SubscribeToMailchimp"); $email = $input->post->email; $subscriber = [ 'FNAME' => $input->post->firstname, 'LNAME' => $input->post->lastname, ]; $mc->subscribe($email, $subscriber); } else { // The email address is not valid, display the error messages $errors = $v->errors(); print_r($errors); } It seems I can't call an external php file in Processwire per htaccess rules. Any help / pointers would be very much appreciated.

thanks for chiming in @dotnetic @teppo @gebeer I will re-consider the approach in my template. I was hitting performance issues with video thumbnails on mobile so I wanted to cancel displaying them if the user was on mobile (via Latte template query) and display a still image instead, but I guess this was the wrong approach. I will see if I can tackle the template logic differently and explore @media queries in CSS further. Many thanks for the feedback.

Very strange @Stefanowitsch. I copied into my project MobileDetect.php and am receiving this error in my env (MAMP using PHP 8.0.8) syntax error, unexpected 'array' (T_ARRAY), expecting function (T_FUNCTION) or const (T_CONST)

Unfortunately it seems MobileSupport.php is not supported in PHP 8.x.x versions. I'm getting errors in VS Code on that MobileDetect.php file. I'll keep my eye on this though.

Thanks very much @gebeer. I was uncertain how to manually install third-party scripts as I am not comfortable with Composer right now. I appreciate this explanation!

Answering my own question in case it is helpful to anyone else. I am using Processwire and Rockfrontend. I was able to get a custom mobile detection to work using PHP by adding a custom function to _init.php (and taking care to comment out the PW namespace as per RF repo documentation). <?php // namespace ProcessWire; // Optional initialization file, called before rendering any template file. // This is defined by $config->appendTemplateFile in /site/config.php. // Use this to define shared variables, functions, classes, includes, etc. function isMobileDevice() { // Get the user agent string $userAgent = $_SERVER['HTTP_USER_AGENT']; // Check if the user agent matches any common patterns for mobile devices if (preg_match('/android|iphone|ipod|blackberry|iemobile|opera mobile|palmos|webos/i', $userAgent)) { return true; } else { return false; } } Then I was able to call the function in the normal way with Latte: {if isMobileDevice() == 'true'} ?