snck

Hi @teppo, as I could not find an answer to this old question: Is there a way to sort the results by number of matches / occurences? That would be awesome!

@bernhard I was a little confused whether RepeaterMatrix fields are (still) supported or not. I found this discussion concerning RockMigrations1 and was somehow expecting that the support for RepeaterMatrix fields was also ported to RockMigrations(2). Are RepeaterMatrix fields still supported and if not, do you have any plans to change that? Cheers, Flo

@bernhard Thanks! 👍 I was looking for a nice way to compile some SCSS (Bootstrap in my case) the other day and as Sassify has not been updated for almost 4 years I had a look into your Scss module. It might not have been your intention, but as this a viable wrapper for scssphp I could use it for my case as well. Maybe this can be a starting point for somebody else looking for a way to compile something else than the PW core: <?php $compiler = $modules->get('Scss')->compiler; $input_scss = $this->wire->config->paths->templates."scss/custom.scss"; $bootstrap_scss_path = $this->wire->config->paths->templates."bootstrap/scss"; $output_css = $this->wire->config->paths->templates."css/bootstrap_custom.css"; $output_map = $this->wire->config->paths->templates."css/bootstrap_custom.map"; $compiler->setSourceMap($compiler::SOURCE_MAP_FILE); $compiler->setSourceMapOptions([ // relative or full url to the above .map file 'sourceMapURL' => $output_map, // (optional) relative or full url to the .css file 'sourceMapFilename' => $output_css, // partial path (server root) removed (normalized) to create a relative url 'sourceMapBasepath' => $this->wire->config->paths->root, // (optional) prepended to 'source' field entries for relocating source files 'sourceRoot' => '/', ]); $compiler->addImportPath($bootstrap_scss_path); $compiler->setOutputStyle("compressed"); $result = $compiler->compileString('@import "'.$input_scss.'";', $this->wire->config->paths->templates."scss"); file_put_contents($output_map, $result->getSourceMap()); file_put_contents($output_css, $result->getCss()); ?>

Hey @bernhard, as you have recently released the Scss module, are there any plans to add SCSS compilation capabilities (if the module is installed) to RockFrontend as well? I'd love to be able to recompile Bootstrap automatically whenever files have changed and as this logic is already present in RockFrontend, this looks like a perfect addition to me. If you consider it, it would be great to be able to pass options to the compiler. Cheers, Flo

@nbcommunication Thank you for clarification and the great example. I will definitely keep this in mind! 🙂

@bernhard Imho modifiers like 2x should not be necessary at all. It took me quite some time and testing to wrap my head around responsive images and my experiments with the current browsers showed that whenever my sizes attribute was accurate, the browser chose the closest image resolution from the sourceset taking pixel density of the screen into account automatically. This is a (rather complex) example for my usage of PageimageSource on a page with a masonry style layout that can have from 1 to 5 columns and the sizes also take padding etc. into account (which might be overkill): $img_markup = $img->render([ 'picture' => true, 'srcset' => ['360', '480', '640', '800'], 'sizes' => '(max-width: 579px) calc(100vw - (2 * 34px)), (min-width: 580px) and (max-width: 767px) calc(50vw - (1.5 * 34px)), (min-width: 768px) and (max-width: 1199px) calc(33.3333vw - (1.33 * 34px)), (min-width: 1200px) and (max-width: 1499px) calc(25vw - (1.25 * 34px)), (min-width: 1500px) calc(20vw - (1.2 * 34px))', 'class' => 'teaser-img proportional', 'alt' => $img->description, 'markup' => "<img src='{$img->width(480)->url}' alt='{alt}' class='{class}' width='".$img->width(480)->width."' height='".$img->width(480)->height."'>" ]); Output: <picture> <source srcset="/site/assets/files/1200/1_klimanagepasster_wohnunsgbau.360x0-srcset.webp 360w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.480x0-srcset.webp 480w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.640x0-srcset.webp 640w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.800x0-srcset.webp 800w" sizes="(max-width: 579px) calc(100vw - (2 * 34px)), (min-width: 580px) and (max-width: 767px) calc(50vw - (1.5 * 34px)), (min-width: 768px) and (max-width: 1199px) calc(33.3333vw - (1.33 * 34px)), (min-width: 1200px) and (max-width: 1499px) calc(25vw - (1.25 * 34px)), (min-width: 1500px) calc(20vw - (1.2 * 34px))" type="image/webp"> <source srcset="/site/assets/files/1200/1_klimanagepasster_wohnunsgbau.360x0-srcset.jpg 360w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.480x0-srcset.jpg 480w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.640x0-srcset.jpg 640w, /site/assets/files/1200/1_klimanagepasster_wohnunsgbau.800x0-srcset.jpg 800w" sizes="(max-width: 579px) calc(100vw - (2 * 34px)), (min-width: 580px) and (max-width: 767px) calc(50vw - (1.5 * 34px)), (min-width: 768px) and (max-width: 1199px) calc(33.3333vw - (1.33 * 34px)), (min-width: 1200px) and (max-width: 1499px) calc(25vw - (1.25 * 34px)), (min-width: 1500px) calc(20vw - (1.2 * 34px))" type="image/jpeg"> <img src="/site/assets/files/1200/1_klimanagepasster_wohnunsgbau.480x0.jpg" alt="Klimanagepasster Wohnunsgbau" class="teaser-img proportional" width="480" height="282" loading="lazy"> </picture> @nbcommunication Great module, I like it a lot! Nevertheless my example also shows a little incovenience I experienced when using PageimageSource: I need to output width and height attributes for my img tag and using the markup option (as shown above) was the only way to accomplish this. Using the height and width options of the render method rendered the srcset useless (all the same sizes). Maybe you could implement an option that outputs the size of the first entry from the srcset as width and height attributes of the img? Especially when using lazyloading the width and height attributes serve as proportional placeholders and prevent layout shifts. Cheers, Flo

Great module, @Sebi! As it is out there for almost 2 years now, maybe someone found an elegant solution for caching the generated output (and rebuilding that cache if a page or child page is updated)? I have seen @toni´s approach and could build something on top of that for my specific use case, but I guess there are a lot of people having similar needs and would love to see something that is more ready to use. I am not experienced with ProCache, but I think being able to use ProCache to cache API output would not only be the most elegant way, but also one of the fastest possible.

Hey @adrian, you are right. I was thinking of the viewBox as a set of coordinates in x/y dimension that are defining the corners of the viewbox relative to the origin of the coordinate system (this is why i called them max_x and max_y), which is obviously wrong. It should look like this: /** * Gets the image info/size of an SVG * * Returned width and height values may be integers OR percentage strings. * * #pw-internal * * @param string $filename Optional filename to check * @return array of width and height * */ protected function getImageInfoSVG($filename = '') { $width = 0; $height = 0; if(!$filename) $filename = $this->filename; $xml = @file_get_contents($filename); if($xml) { $a = @simplexml_load_string($xml)->attributes(); if((int) $a->width > 0) $width = (int) $a->width; if((int) $a->height > 0) $height = (int) $a->height; // start viewbox fix if(!$width || !$height){ if($a->viewBox != ""){ // get rid of commas: replace them with spaces $a->viewBox = str_replace(",", " ", $a->viewBox); // get rid of (now possible) double spaces: replace them with a single space $a->viewBox = str_replace(" ", " ", $a->viewBox); // get single values $viewbox = explode(" ", $a->viewBox); if(count($viewbox) === 4){ // we need 4 values, even though we are just using 2 $width = (float) $viewbox[2]; $height = (float) $viewbox[3]; } } } // end viewbox fix } if((!$width || !$height) && (extension_loaded('imagick') || class_exists('\IMagick'))) { try { $imagick = new \Imagick(); $imagick->readImage($filename); $width = $imagick->getImageWidth(); $height = $imagick->getImageHeight(); } catch(\Exception $e) { // fallback to 100% } } if($width < 1) $width = '100%'; if($height < 1) $height = '100%'; return array( 'width' => $width, 'height' => $height ); } @ryan, maybe something like this could be a useful addition to the core?

@adrian Again had problems with this and got back to your idea. Thank you so much! This quick fix might be not the most beautiful/efficient way, but worked fine for me (and might also for someone else): /** * Gets the image info/size of an SVG * * Returned width and height values may be integers OR percentage strings. * * #pw-internal * * @param string $filename Optional filename to check * @return array of width and height * */ protected function getImageInfoSVG($filename = '') { $width = 0; $height = 0; if(!$filename) $filename = $this->filename; $xml = @file_get_contents($filename); if($xml) { $a = @simplexml_load_string($xml)->attributes(); if((int) $a->width > 0) $width = (int) $a->width; if((int) $a->height > 0) $height = (int) $a->height; // start viewbox fix if(!$width || !$height){ if($a->viewBox != ""){ // get rid of commas: replace them with spaces $a->viewBox = str_replace(",", " ", $a->viewBox); // get rid of (now possible) double spaces: replace them with a single space $a->viewBox = str_replace(" ", " ", $a->viewBox); // get single values $viewbox = explode(" ", $a->viewBox); if(count($viewbox) === 4){ // we need 4 values $min_x = (float) $viewbox[0]; $min_y = (float) $viewbox[1]; $max_x = (float) $viewbox[2]; $max_y = (float) $viewbox[3]; $width = $max_x - $min_x; $height = $max_y - $min_y; } } } // end viewbox fix } if((!$width || !$height) && (extension_loaded('imagick') || class_exists('\IMagick'))) { try { $imagick = new \Imagick(); $imagick->readImage($filename); $width = $imagick->getImageWidth(); $height = $imagick->getImageHeight(); } catch(\Exception $e) { // fallback to 100% } } if($width < 1) $width = '100%'; if($height < 1) $height = '100%'; return array( 'width' => $width, 'height' => $height ); }

Thanks a lot for this wonderful module! It works like a charm, except for one little problem: When I use the "Accept all" button I have to reload the website for the changes to take effect. Selecting specific categories and clicking the "Save preferences" button has immediate effect. Is this an indented behaviour or am I missing something here?

There is no code for it. The pages are edited in the backend by editors using the normal page edit dialogue. I do not try to store pages from one instance in the other, at least this is what I was thinking. From my understanding InputfieldPage is just storing references to pages which is what I want to achieve: Store references to pages of instance1 in a page on instance2. Maybe this clears it up?

Hello, in a project I use the multi-instance feature of ProcessWire to get content from another ProcessWire instance which is kind of a "database". I do not modify the external content. For a slider I want to store references to the "database" in an InputfieldPage. To get the available pages I use the following code in my ready.php: $wire->addHookAfter('InputfieldPage::getSelectablePages', function($event) { if($event->object->hasField == 'kub_highlight_artworks') { // Server path to the PW installation $path = '/var/www/vhosts/.../'; // The root URL for the PW installation $url = 'https://.../'; // Create a new ProcessWire instance $db = new ProcessWire($path, $url); $event->return = $db->pages->find("template=artwork, sort=title"); } }); Outputting and selecting the external pages works perfectly fine, but unfortunately the selected pages do not get saved when I save the page. Can someone point me into the right direction how to make this work? Are there any internal checks whether the page exists in the current instance that prevent saving the values? Best, Flo

Thank you very much! ?

No problem at all! Excuse me, yes, I meant the ___savedPageIndex() method. Thanks in advance!

I am also really interested in this concern (and have not found an answer yet). Is it possible to have savePageIndex hooks run on a manual index rebuild? Would be awesome!

Hey there, for a client website I need to implement a "reviewer" role. "Reviewers" should be able to review new (unpublished) articles to give feedback to editors, but not have the permission to change them. I built a new "reviewer" role that only has page-view permissions for the respective templates, but this permission does not include viewing unpublished pages. How can I grant them access to the unpublished articles without giving them page-edit permission? Cheers, Flo

Is there any fix for this or a safe way to remove a cache field in this state without producing any harm or inconsistencies? Thanks!

Strange... Could it have something to do with the fact that related_pages (in my case) takes multiple pages?

Hi there, I have a problem constructing a selector that finds all pages that refer to pages with a specific template. I have pages using an event template and I want to show events based on a specific context. In this example I want to filter the results and only show event pages that relate to a specific template (exhibitions) in their page field related_pages. What I tried: $events = $pages->find("template=event, related_pages.template.name=exhibition"); Unfortunately it does not work (0 results). Same with this: $events = $pages->find("template=event, related_pages=[template.name=exhibition]"); At the moment I am helping myself with the following lines, but I have a strong feeling that there is a more efficient solution: $events = $pages->find("template=event"); foreach($events as $event){ if(!count($event->related_pages->find("template=exhibition"))){ $events->remove($event); } } I really hope that one of you can help me out. Thanks in advance! Flo

Hey, I want my editors to be able to use the page lister, especially the bookmarks. I added the page-lister permission to the editor role, but Page lister ("Find" menu item) does not show. Is there anything else I have to do? Links to bookmarks work for the editors, but I would be glad to show them the menu item as well. Maybe this has something to do with the long history of the site (started with ProcessWire 2.4 and upgraded to 3.0.148 over the years)? Thanks, Flo

Perfect timing. Thank you so much! ?

Size alone should not be a problem (considering that I have used a lot of much bigger JPEG images with IMagick). In some cases the SVGs consisted of many 1000 paths and a lot of class definitions for their styling. I do not know the how efficient the rasterizing in IMagick works, but I guess it was the bootleneck in this specific case.

Hi there, I am trying to convince a client to use image tags in a future version of the website. The plan is to have one image container per page and use tags to differentiate between different roles (header image, gallery, slider...). I thought it would be great to show also the image tags in the backend (thumbnail) overview without having to scroll through potentially long lists or clicking on every single image to see how it is output. I could not find a setting, a module or handy little hook that accomplishes this task, but maybe you have a solution? Cheers, Flo

I further investigated the issue by reviewing all of the SVG files used on the pages that have thrown errors and comparing them to files from pages that were editable without problems. I realised that the guys who generated the files (architecture students) used different software in their process (Adobe Illustrator, Vectorworks etc.) which led to really complex files. I ran some of them through an online SVG minification tool which helped to resolve the issue in some cases and instructed the students to develop a kind of maximum complexity guideline for their files. To make the backend usable again and offer them a chance to exchange their "bad" files, it raised the max_execution_time temporarily in the .htaccess: php_value max_execution_time 120

Yes, I mean "Locked". ? Thank you!