Stefanowitsch

I am able to get this code to work. But I don't know where to put the information for which picture source to use. On smaller screens I want to display a different image.

I have a question about a possible feature. I read that you are using UIKit. UIkit offers the possibility to use multiple image sources and resolutions for one image. Like this: (example taken from: https://getuikit.com/docs/image) <div class="uk-height-medium uk-flex uk-flex-center uk-flex-middle uk-background-cover uk-light" sources="srcset: https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=650&h=433&q=80 650w, https://images.unsplash.com/photo-1464621922360-27f3bf0eca75?fit=crop&w=1300&h=866&q=80 1300w; media: (min-width: 1200px)" data-src="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=650&h=433&q=80" data-srcset="https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=650&h=433&q=80 650w, https://images.unsplash.com/photo-1472803828399-39d4ac53c6e5?fit=crop&w=1300&h=866&q=80 1300w" sizes="(min-width: 650px) 650px, 100vw" uk-img> <h1>Background Image</h1> </div> I would like to achieve the same markup but with the use of your module. Would this be possible? Right now I use a device check (mobile, tablet, desktop) to see which image resolution I want to use and render the image that way: <?php echo $image->size($imgFormat)->srcset() ?> The set rules are defined globally in the module settings. So the image gets cropped into the desired format (=custom resolution), then the srcset is generated. I am using different resolutions for different screen sizes: 16:9 on desktop, 4:3 on Tablet, 1:1 on mobile (for example) so just downscaling the image would not work for me. The problem is that this approach is not responsive in that way that the image format automatically changes when resizing the viewport. In fact you have to reload the page so that the new image format is applied and rendered.

So basically it all depends on the screen width here. Take this for example. How do you change data-attributes or custom code inside HTML elements depending on the screen width directly inside your markup? For example when the plugin does not have responsive options. <div class="uk-card" uk-scrollspy="cls: uk-animation-slide-left;"> <p>Hello World</p> </div> I want to change the properties of the uk-scrollspy attribute for example. A different animation on small (=mobile) screens or maybe no animation at all. UIKit does not offer such responsive options (yet). For that I would use the detect-mobile library like this: <div class="uk-card" uk-scrollspy="<?= (!$deviceCheck->isMobile()) ? 'cls: uk-animation-slide-left': 'cls: uk-animation-slide-bottom' ?>"> <p>Hello World</p> </div> When resizing the window this change is not applied though, I have to reload the page to make it happen. (t might confuse some plugins that read those values on DOM ready but hat is another story)

This is not the case. On some applications progressive enhancement is not possible (or let's say: ideal) because of the technological structure or other reasons. I am working for one of the biggest online stores in germany and for mobile/desktop devices we absolutely use browser detection and I am pretty sure most of the industry does. When visiting a product page there is a switch in the master template which then leads either to a mobile or desktop markup. These markup files share the same data source but code wise they are entirely different from each other. The reason behind this is that there was a completely different approach on how google ranked those mobile sites in the past AND since there are tons of elements and features (like custom written plugins) on the pages that massively differ depending on the device you're using this makes maintaining the code a bit easier. You have to load less/different assets, but it does add work when you have to make changes to both the desktop and mobile versions. Loading speed is an important ranking factor too, that's why you want to load only scripts and assets on your mobile page that you really need. Another reason why we use this approach. It's a giant application, though. On my private (and way simpler) ProcessWire projects I am sticking to progressive enhancement if possible. For images this will work. But I would never advice someone use media queries to hide elements with important content (SEO stuff) with "display: none" on any application. Just because google nowadays ignores this kind of content. Render the markup and the content that google needs to see (mobile first because mobile sites have top priority to google). And as you said: Take the same element and just make it look good on any device by using media queries. As I said I only use this browser detection for changing data-attributes or (only in one or two cases) the image format for a title image. Even advanced plugins like aos.js or high-end frameworks like UIKit are NOT responsive in some cases (https://getuikit.com/docs/animation). What do you do when you want to alter an animation based on the device? You have to somehow detect it and change the markup.

I am using mobile detect to switch between different markups on mobile / desktop. For example on mobile I am using a different image format than on desktop devices. It would be much easier to make use of css media queries but in that case I do not want to load images that I do never display on a particular screen width. $imgFormat = 'title-img'; if ($deviceCheck->isTablet()) { // Tablet $imgFormat = 'title-img-tablet'; } --- and then: <img data-srcset="<?php echo $image->size($imgFormat)->srcset() ?> [...] Another example is the usage of html data attributes that vary on mobile/desktop devices: When using an animate on scroll plugin like aos.js you put your animation properties inside these data attributes. On desktop you might want animation A with duration X while on mobile you want animation B with duration Y. I set those properties via the mobile detect queries. <div class="feature-item-icon" data-aos="flip-right" data-aos-delay="<?= (!$deviceCheck->isMobile() && !$deviceCheck->isTablet()) ? $key*250 : '250'?>" data-aos-offset="200"> <img class="img-fluid" src="<?=$icon->url?>" alt="Feature Icon"/> </div> The major drawback is: the detection is server side. It is not responsive like css media queries where you see new properties instantly when switching through the breakpoints. Instead you have to reload the page to get the new values. In most cases this is no problem though.

That is strange. I am using the same library for years now (http://mobiledetect.net/), on PHP 8+ i have no problems. Depending on where you put the mobile-detect files I have this in my _init.php: require_once '../../vendor/mobiledetect/mobiledetectlib/Mobile_Detect.php'; $deviceCheck = new Mobile_Detect; Then I can use the following expression to check the device. For example in a PHP template file. if (!$deviceCheck->isMobile()) { echo "this is not mobile"; }

Alright, I'll keep that in mind. In my case the asterisk is not an important part of the search phrase anyway.

I am using this module in all of my projects it has been in the /site folder eversince. Never had problems before with this one. UPDATE: I just renamed the folder into "ProcessPageCloneTest" and now I can view the login page again and log in successfully. This should be no permanent fix though...

I have a strange behavior on one of my sites. The frontend works flawlessly but all of a sudden I cannot log in anymore. Last week it was working though. I never experienced that error before. When visiting the PW login page (in debug mode) I get this error message: Yow… Fatal Error: Uncaught Error: Class 'Process' not found in site/modules/ProcessPageClone/ProcessPageClone.module:20 #0 wire/core/Modules.php (1551): include_once() #1 wire/core/Modules.php (1507): Modules->includeModuleFile() #2 wire/core/WireClassLoader.php (284): Modules->includeModule() #3 [internal function]: WireClassLoader->loadClass() #4 [internal function]: spl_autoload_call() #5 wire/core/Functions.php (841): class_exists() #6 wire/core/Modules.php (1465): wireClassName() #7 wire/core/WireClassLoader.php (284): Modules->includeMo (line 20 of site/modules/ProcessPageClone/ProcessPageClone.module) This error message was shown because: site is in debug mode. ($config->debug = true; => site/config.php). Error has been logged. I did not make any critical changes to the file system or the module structure. No updates, nothing. On my local dev environment I can access the backend without any problems. PW Version is 3.0.165, PHP Version is 8.0.

Thanks! Using the selectorValue sanitizer did the trick! I didn't even have to whitelist the asterisk. $q = $sanitizer->selectorValue($input->get->text('q'));

Hi There! I am using the ProcessWire search function on a page and a client just told me that they encounter a server error when placing an asterisk symbol ( * ) into that field. PW Version is 3.0.200. So basically what they type into the search field is something like * string This resolves in an error message: Exception: Unrecognized operator: * (in /Users/XXXX/Sites/XXXXXXX/wire/core/Selectors.php line 411) My selector looks like this: $q = $input->get->text('q'); if ($q) { $input->whitelist('q', $q); $events = $pages->find("search_cache%=$q, template=event, date_event>=today, sort=date_event, limit=6"); } According to this link (https://github.com/processwire/processwire-issues/issues/1207) I found out that searching for '*' did work in the past but stopped in newer PW versions. I have an older site running on PW 3.0.164 and there is no error message there.

Rally nice work! The design is clean and futuristic and I love the text animations for the headlines or inside the menu. Kudos that this is all custom coded! Did you use some plugins for the animations or how did you approach it? Just asking because I was switching between aos.js and GSAP lately.

First: This is a mix of an API, Module Development and General Support question here. I want to populate a field on an admin page with form submissions. Yeeeees I know this has been asked a few times before but I did not find a solution to my approach here: I don't want to add a template-XY in the backend and create pages underneath that template for each submission. What I would like to do is the following: Have a link inside the setup dropdown that goes to a single page. This page has a repeater field that holds formatted HTML mail message bodies for each submit. That's it. I have little to no experience in module development or backend development. I know how to populate fields via API but I need answers to a few fundamental questions here. 1. Creating the Dropdown Link I used @bernhard's tutorial for custom admin pages to create a simple module and thus a new entry (and a corresponding template) for the form submissions. That works fine! The page underneath is completely blank at the moment. 2. Adding the Repeater Field Do fields need to be added to a certain page to be populated or can they act "stand-alone"? I created a repeater field which holds body fields for the mail messages. This field is attached to no template. I wan't this field to be populated and displayed on the new admin page. Do i need to add this field to the new admin page to populate it? And how is this achieved? I can't edit the template and add fields since this page uses the "admin" template (otherwise it won't appear in the dropdown). I can "get" my repeater field and dump it in the console from the module code like this. Is this a usual method? <?php namespace ProcessWire; class ProcessFormSubmissions extends Process { public function ___execute() { $repeater = $this->fields->get('rep_form_submissions'); bd($repeater); foreach ($repeater as $item) { echo $item->body; } } } 3. Populating the Repeater Field In my custom form logic I would like to do something like this: $submits = $fields->get('rep_form_submissions')->getNew(); $submits->body = $message; $submits->save(); But this results in an exception: Exception: Method RepeaterField::getNew does not exist or is not callable in this context Why can I dump the repeater field inside the console but can't add content the same way? What do you think about my approach? I'm interested in hearing your opinions or getting some advices here ?

The grow feature looks promising. I know that in another thread we discussed the responsive font handling and I was hoping that I could use boostraps RFS feature for responsive fonts: https://getbootstrap.com/docs/5.2/getting-started/rfs/ I used this feature in my latest project. But it turned out in reality that some of my big headlines just did not shrink the way that I needed them to shrink. It resulted in ugly link breaks. So i needed to make custom font size adjustment via media queries (very oldschool nowadays it seems...) So can you adjust the "grow-shrink-factor" on this one? To control how much the font will shrink down once a breakpoint is reached? EDIT: Found a scale factor variable in the depths of the bootstrap files. Anyway I find this is an important value that someone might want to tinker with, it should be possible to adjust it via a value.

Animations can add life and dynamics to your site. But they should be kept simple and subtile. I mean with those powerful animation engines and methods today you can animate almost everything in any way you want. Its super fun from a developer perspective but it might confuse the ordinary user who visits your site. What really impressed me is that UIKit has everything "on board". You have sliders, lightboxes, and even scrolltrigger stuff for animations and fade-ins. So you need no 3rd party plugin. Everything is controlled out of the box via data-attributes directly in you HTML code. That is super straight-forward. I just could not live with the way the grid system of UIKit works. My projects are always built upon the bootstrap grid system with all the utilities. I almost don't use any other feature it offers, so that is the most important thing to me. Anyway if you want to do more advanced animation and scroll trigger applications someone would propably stick to a solution like GSAP in favor to UIKits built-in tools anyway.

There you go ? https://jsfiddle.net/4Lgw5vuh/

Clip path is my preferred solution to obtain this effect but can be tricky if the clip path is a bit more complicated. As mentioned here the best way to achieve this is to make use of the mask-size property. -webkit-mask-image: url(path/to/svg); -webkit-mask-size: cover; If you chose "cover" for the mask size the SVG will fit to the image dimensions. I made a quick test and it seems to work really good. I didn't know this technique exists so thanks for the hint @3fingers!

Thank you! I was thinking about doing a redesign since quite a time. But you motivated me to keep the look an the structure closer to the original version ?

Hello there! I recently updated my own website - I am a frontend developer living in the northern part of germany. https://www.thumann-media.de The old design has been online since five years (time flies...) and I thought that it was time to make things a bit flashier and include a better showcase of my web projects to give the user a more detailed description of the project features. It's a classic one pager design just for the sake of keeping things as short and simple as possible (I hope the image fits inside this thread). The new version of my site includes a "portolio section" where users get a sneak preview of each project I've been working on recently. It features nice fade-in-out animations powered by aos.js (animate on scroll). Also new is that every project gets a dedicated subpage where I describe some of the unique features that this website offers: I like to have some eye-catchers. I always used the animated wave theme on my website, so why not include a message in a bottle? The animation of the bottle is done via the awesome GSAP animation engine (https://greensock.com/gsap/). This is a super powerful library and I just started diving into the possibilities of this one. Tech Talk: Some of the things I used: - ProFields used for this one (repeater matrix, combo) - Frontend framework is Bootstrap 5. I had a hard time of deciding between Bootstrap and UIKit as my new go-to framework (I am bit biased though because I've been always using bootstrap since version 2). But the grid system alone makes bootstrap so flexible and powerful for me, so I will stick with it for another 10 years I think... - https://github.com/nbcommunication/PageimageSource for image srcsets with webp support - Ajax driven contact form with bootstraps frontend validation - AIOM+ for compressing the assets (CSS and JS) https://github.com/matjazpotocnik/ProcessWire-AIOM-All-In-One-Minify - SEO Maestro - WireMail SMTP AOS.js vs GSAP Which animation library you should use? I discovered the GSAP library a bit too late in the development process, tough. So I am still using aos.js for some animations. AOS has a super small footprint considering its filesize (14 kb, minified) and is super easy to use and super reliable. Whereas GSAP is quite large (71kb, minified) and if you want to make use of scroll triggers you have to include a second library which adds another 40kb. AOS has lots of nice animations which come out of the box. GSAP does not offer this, you have to program those transitions yourself. So you need to spent some time, reading the docs and looking for tutorials! GSAP can do all that AOS can and beyond. If you want to have full control over everything I would advice you to give it a try. So that's all for now. I wish all of you a great weekend!

Basically you can add as much cols inside a row wrapper as you like in bootstrap. You then define the width of each col via class names. I compared both frameworks and this should clear it up it: Bootstrap class names: container -> defines the max width of the content. UIKit equivalent would be uk-container. row -> wrapper for the columns. UIkit equivalent would be uk-grid. col-x -> the column with the specified width. UIkit equivalent would be uk-width-x-x So the bootstrap variant of your code example would look like this: <div class="container"> <div class="row"> <div class="col">foo</div> <div class="col">bar</div> <div class="col">baz</div> <div class="col">foo</div> <div class="col">bar</div> <div class="col">baz</div> </div> </div>

I am really impressed what UIkit is able to do out of the box. But the main bummer for me is that the grid system is so weird (for someone who is using bootstrap since 10+ years..). Why a classic 12-column grid is not supported in UIkit3 is beyond my comprehension. The 12-col grid is the basis of every project I worked on in the past and am working on in the future. But I am drifting away from the topic, sorry ?

Which Bootstrap Version are you using? Since Bootstrap 4 there is a form validation component that you can use. It prevents submitting when required fields are empty (for example). https://getbootstrap.com/docs/4.6/components/forms/#validation https://getbootstrap.com/docs/5.1/forms/validation/ However this validation is frontend only. If you disable JavaScript you are still able to submit the form to the server. So I would advice you to make use of both frontend validation (Bootstrap) and backend validation (either via the processwire API or a third party PHP module (https://github.com/rakit/validation).

I am using a SASS mixin which renders REM out of given PX values. So when designing my layouts you typically have px based font sizes. Then when developing the website I want to make use of rem instead of px. Calculating each value can be time consuming and it might be confusing cause rem is relative to the base font size. @function calculateRem($size) { $remSize: $size / 16px; @return #{$remSize}rem; } @mixin fontSize($size) { font-size: calculateRem($size); } @mixin lineHeight($size) { line-height: calculateRem($size); } This however is not responsive in the way that the font size adjusts to the viewport. I like to have control over my font sizes so I hard code - for example headlines - fitting the four big breakpoints: large desktop, desktop, tablet, mobile. Yes it is a bit of work... For big, prominent title headlines (over background images for example) I often use vw or vh as font height. That makes the fontsize fluid but it can give you some weird "inbetween" values. So you have also have to make small adjustments based on breakpoints to make sure it looks good everywhere. This however looks promising. It seems to combine REM and VW. I recently upgraded to Bootstrap 5 and totally overlooked this new feature (by the way I am still thinking about switching to UIKit3 but for other reasons but this is another point for bootstrap).

Have not installed it yet - but this module looks promising at first sight. I am looking for a super-simple solution for selling vouchers on sites. A big shop module like Padloper would be way to oversized for this task.

I am using the latest fork here. Works perfect for me. https://github.com/matjazpotocnik/ProcessWire-AIOM-All-In-One-Minify