Leaderboard

Hello @ all I want to introduce a module to you which can create placeholder images on the fly. This module was developed a few years ago, but I have completely rewritten the code to PHP 8.1 and added some nice additional features. You can find the complete description and download possibility at https://github.com/juergenweb/JkImagePlaceholder, but I want to give you a brief description about the module. Since 28/01/23 this module is also available in the download section of ProcessWire at https://processwire.com/modules/jk-image-placeholder/ and can be downloaded within your ProcessWire site. Short description: This module uses TrueType fonts for the placeholder text. 2 TTFs are shipped with this module by default (FjallaOne-Regular.ttf and Lobster-Regular.ttf). Allows upload and deletion of other fonts Allows scanning the complete site to find and use other TrueTypeFonts (fe used by templates or other modules) Preview of all fonts in the select font input field - you can see how the font looks like Global setting of various colors: background color, text color,.. Supports adding of text shadow to the placeholder text Set global placeholder text (multi-language) Set global image tag CSS class for the placeholder image tag If you have installed FieldtypeColor or FieldtypeColorPicker you can select if you want to use one of these fields for color inputs instead of a text input. Preview example: The easiest way to create the placeholder image inside your template file: echo $modules->get('JkImagePlaceholder')->render(true); This will render the placeholder image according to your global settings in the module configuration, but you can change every parameter to your needs: echo $modules->get('JkImagePlaceholder') ->setText('Test!') ->setAltText('My custom alt text for the image') ->setFontSize(30) ->setWidth(400) ->setHeight(200) ->setBackgroundColor('#ddd') ->setFontFamily('lobster-regular.ttf') ->setTextColor('#ffffff') ->setShadowColor('#000') ->setXOffset(-5) ->setYOffset(1) ->render(true); Everything is explained in the Readme file on GitHub and in the download section. If you discover issues, please report it directly on GitHub? - Thanx for your help!

140 commits, 55 resolved issues, dozens of new features, eight contributors, and five new pull requests make yet another great new version of ProcessWire. This week I’m happy to announce another new main/master branch version of ProcessWire, version 3.0.210. Like most main release versions, there is a lot here. This post covers some of the most notable additions and improvements— https://processwire.com/blog/posts/pw-3.0.210/

Hello @bernhard First of all, thank you for your feedback. ? To be honest, I did not even think about using a svg for a placeholder - but this is also a really cool idea too. BTW thanks for the link - I will take a closer look at this. Referring to your questions: My intention was to use it for real website users (as placeholder images for products, user images and so on). I did not want to use to much different font families on a site. For this reason I thought that it was cool to be able to use the same font for the text in the placeholder image as used for the text of the site. This is possible with this module. Another aspect was that a "real image" could be used without problems with CSS frameworks componentes, whenever an image is needed. I am thinking of the comment component of the UiKit framework. In the markup you will need an image tag for the user image. Of course you can replace the image tag by a div container with text inside or another tag (picture, image tag for svg,..), but you have to adapt the CSS of the framework to get the desired result. Using an usual image tag, as provided with this module, requires no changes. Have a nice weekend!? Jürgen

When I started Joomla was still called Mambo. At that time it was quite easy to modify the code to get the desired result; the examples were freely available. That changed with time. Joomla became more and more complicated and the extensions more and more commercial. Seblod was a breath of fresh air. With that you could make what you wanted if you were willing to spend a lot of time searching and studying. I only used the forum to search existing posts. With Joomla 4 it's all done with freedom and joy. Seblod has collapsed and the owners of Joomla-Seblod websites have nowhere to go. At least that's how it seems. Until I came across Processwire after a lot of searching. It takes time to understand the structure and to get used to the simplicity, but it is easy to do with the different profiles. Yes, Seblod is dead and so is Joomla for me. I've been thinking about posting on the Seblod forum about Processwire. Something stopped me: many users means many hackers. And yet..... this message also goes to the forum of Seblod.

Hey @Juergen thx for sharing ? It looks like you have put a lot of work into that module so I'm a little afraid of asking ? And I hope you don't take me wrong: 1) How are you using your module? Who is it built for? Is it for building quick mockups that you show your clients? Or is it intended to show placeholders to real website users if clients don't upload images? 2) I wonder if an SVG based solution would be better (easier, more efficient)? You could easily create an SVG placeholder and write some custom text into it: https://www.mediaevent.de/tutorial/svg-text-alignment.html Not sure how that would work with different fonts, but I guess that works with webfonts?!

Just a thought/idea but... Wouldn't it be a nice addition to make the cookie banner only show up when more than the "necessary cookies" group is set in the settings? At least in Germany (which is super strict in terms of cookies and such) you don't have to accept those but only additional tracking cookies or whatever 3rd party-cookies. Do I miss a thought here? Or would this be a great addition for all?

That's because it's not a regular array but a PageImages object. If you inspect $i in your first example, you'll see that it contains the image filename, not a numeric index. To get a plain array without the filenames as keys, use its inherited getValues() method. foreach ($page->images->getValues() as $i => $image):

Hello all, I wanted to share a proof of concept approach on how we can have an infinite scroll pattern without writing Javascript. We can achieve this with htmx. What you will get An overview page with a list of posts (PW pages). On initial page load 5 posts will be shown. When scrolling down and reaching the last post, another 5 posts will be loaded via AJAX in the background and appended after the last post until no more pages are found. Prerequisites You are using the delayed output strategy, with a _main.php appended. Just like using the default site profile when installing ProcessWire You are using markup regions, in my _main.php I have a div#content that will be used for the output of the posts Inside site/config.php $config->useMarkupRegions = true; Inside site/templates/_main.php <!-- main content --> <div id='content'> </div> For script loading I am using a custom $config->bodyScripts FilenameArray Inside site/config.php $config->bodyScripts = new FilenameArray(); Inside site/templates/_main.php before the closing </body> tag <?php foreach ($config->bodyScripts as $file) : ?> <script src="<?= $file ?>"></script> <?php endforeach ?> </body> PW page structure for this tutorial In the page tree I have a parent page "Posts" with template "posts". All child pages of that page have template "post" In the template "posts" settings in the "URLs" tab, check "Allow Page Numbers" and save. Needed for pagination. When viewing the page "Posts" all logic happens inside site/templates/posts.php site/templates/posts.php <?php namespace ProcessWire; // posts.php template file // add htmx js from site/templates/scripts $config->bodyScripts->add($config->urls->templates . 'scripts/htmx.min.js'); $limit = 5; $posts = $pages->find("template=post, limit={$limit}"); $lastPost = $posts->last(); $nextPageUrl = $page->url . $input->pageNumStr((int) $input->pageNum() + 1); $hxAttributes = array(); $hxAttributes[] = 'hx-get="' . $nextPageUrl . '"'; $hxAttributes[] = 'hx-trigger="revealed"'; $hxAttributes[] = 'hx-swap="afterend"'; ?> <?php if (!$config->ajax) : ?> <section pw-append="content" class="posts" hx-headers='{"X-Requested-With": "XMLHttpRequest"}'> <?php endif ?> <?php foreach ($posts as $post) : ?> <article class="post" <?php if ($post == $lastPost) echo implode(' ', $hxAttributes) ?>> <header> <h3><?= $post->title ?></h3> </header> </article> <?php endforeach ?> <?php if ($config->ajax) return $this->halt() ?> <?php if (!$config->ajax) : ?> </section> <?php endif ?> And that is all there is to it. Not a single line of Javascript, thanks to htmx. I followed the infinite scroll pattern from the official htmx examples. Now let's break the code down into easily digestible chunks // add htmx js from site/templates/scripts $config->bodyScripts->add($config->urls->templates . 'scripts/htmx.min.js'); This adds site/templates/scripts/htmx.min.js to our custom $config->bodyScripts FilenameArray so it will be loaded in _main.php. You can get the script here from unpkg.com. $limit = 5; $posts = $pages->find("template=post, limit={$limit}"); Sets our pagination limit to 5 and loads the correct set of posts. $lastPost = $posts->last(); Saves the last post of each set. We use this later to determine whether the htmx attributes should be rendered. $nextPageUrl = $page->url . $input->pageNumStr((int) $input->pageNum() + 1); We are building the link to the next "page" with the next set of posts. Will result in something like "/posts/page2", "/posts/page3" etc. $hxAttributes = array(); $hxAttributes[] = 'hx-get="' . $nextPageUrl . '"'; $hxAttributes[] = 'hx-trigger="revealed"'; $hxAttributes[] = 'hx-swap="afterend"'; Define our htmx attributes as an array. They will be added to every last post's HTML. Note the hx-get attribute which will be the URL for the AJAX call in the background. That request is triggered whenever the last post becomes visible inside the viewport while scrolling down. hx-swap afterend tells htmx to append the next batch of posts after the last post. <?php if (!$config->ajax) : ?> <section pw-append="content" class="posts" hx-headers='{"X-Requested-With": "XMLHttpRequest"}'> <?php endif ?> // and <?php if (!$config->ajax) : ?> </section> <?php endif ?> Renders the wrapping section tag only on initial page load which is a none AJAX request. Note the hx-headers='{"X-Requested-With": "XMLHttpRequest"}'. This adds an additional header to all AJAX requests with htmx. We need this header so ProcessWire understands that it is an AJAX request. Otherwise $config->ajax would always return false. See https://htmx.org/attributes/hx-headers/ for more info <?php foreach ($posts as $post) : ?> <article class="post" <?php if ($post == $lastPost) echo implode(' ', $hxAttributes) ?>> <header> <h3><?= $post->title ?></h3> </header> </article> <?php endforeach ?> Render each posts's HTML. If it is the last post, also render our htmx attributes. For brevity in this example I only output the post title. <?php if ($config->ajax) return $this->halt() ?> For AJAX requests stop execution of the template file and everything that follows. This prevents appending of _main.php for ajax calls. So we only get the desired HTML for the list of posts and no head, footer etc. Summary Compared to other approaches, htmx lets us control all our AJAX logic with a few html attributes. Really neat and concise. Easypeasy. I like that and will surely use an approach like this in future when infinite scroll is needed. What I like in particular is how easy this is implemented with ProcessWire's powerful pagination capabilities. If you have the same page structure, the code in site/templates/posts.php is working out of the box as is. I have this running on a standard PW multilang site profile with additions/amendments mentioned above under "Prerequisites". Here's a visual of the result: