Jump to content

Leaderboard

Popular Content

Showing content with the highest reputation on 03/29/2024 in Posts

  1. Greetings PW forum, I have completed a revamp of the artist collective The Teaching Machine's website, which was once built on Cargo Collective, then Wordpress, and is now using ProcessWire with the Rockfrontend Module, Duplicator Module, and the Latte template engine (among some others). The site codebase can be found here. (I don't understand why GitHub thinks it's 99% CSS … that will be for another day). The site menu is right-justified, with a simple navigation and dark-mode toggle. Individual project pages can contain galleries (also right-justified), media embeds, and will display similar items in the same category as well as site-wide items. A Zones page displays overarching categories, and randomly selects new projects each time the page is visited. The Home page displays the latest projects in descending chronological order. The Teaching Machine is an independent arts laboratory devising strategies for amalgamated practices within the cinematic imaginary, musical zeitgeist, and networked hyperstructures. Founded by hypermedia artist Strangeloop in 2011, with members in Los Angeles, Barcelona, and Singapore.
    5 points
  2. Hello ProcessWire community, it's been a while since I last shared a project showcase with you all πŸ™‚ Today, I'm excited to present a recent project we've been working on: The website of the Austrian artist Tanja Boukal - www.boukal.at This project has been an interesting journey, and I'm excited to highlight some of the features and solutions we implemented: First off, I had to make the project run on my local development computer. That was quick and easy thanks to DDEV, where you can easily define the setup in a simple yaml file (eg php7.4, mariadb 10.2, etc) and then update the setup to a current one and see what breaks and then apply all updates πŸ˜„ Then, we tackled the challenge of cleaning up everything from the old ProcessWire website (not done by me). The page was quite a mess. I'm not blaming anybody for that, but I guess we all know the problem: The developer has some structure in his/her had and it works great at the beginning. But then the real world kicks in and slightly different needs pop up here and there and quickly the initially planned structure is not sufficient any more. We need a gallery on a page we didn't plan upfront, or we need some additional text above or below some other elements where we don't have Inputfields... So the client ended up creating several pages on the root level to be able to input the desired content and then link wildly to those hidden pages. Actually I think she did a great job, because she got things done without needing help from a developer (which costs money as we all know). During that process and thanks to RockPageBuilder we got rid of many unnecessary templates while providing the client with a lot more flexibility than before 😎 Before the relaunch: After the relaunch (with AdminStyleRock for styling the backend in the client's colors): Not only was the content on the old PW site structured completely different than on the new one, we also had two WordPress blogs that had been around that we wanted to integrate into the new website. Both RockShell and RockFrontend's DOM-Tools where extremely helpful in that process! We even used @FireWire great Fluency module to translate imported blog posts on the fly! This command is simply put into /site/modules/Site/RockShell/Commands/ImportAegean.php and will then instantly be available to RockShell as import:aegean command 😎 And then you can run "rockshell import:aegean", watch it do its work and enjoy 😎 Another pain for the client was that many people in the arts industry still rely on printed information. So she wanted to provide all the information about her work not only on her website but also as downloadable PDFs. On the old website this process was all done manually and whenever she had a new work/catalogue/project to share she had several things to update. Now she only updates that information on one place and RockPdf creates an updated PDF for her - with all entries sorted automatically by date πŸš€ As mentioned RockPageBuilder adds a lot of flexibility to the website and makes editing content easier than ever before: But that's not a one-way-road! Where necessary we can still provide a more rigid structure and add custom fields that show up at dedicated places not movable by the client - for example date, cover-picture and teaser-text that should show up on all blog pages at the very top and at the exact same place: After that identical header section the client is free to choose from all available content elements like regular text, downloads or youtube videos (fully gdpr compliant without the client thinking about that). The work section showcases her artworks, projects, exhibitions and catalogues. All are linked to each other with the great ConnectPageFields module. So for example the https://www.boukal.at/work/projects/the-aegean-project/ has several other pages connected and also has its own blog! Ah, every aspect of the website is multilingual, which is also cool and where ProcessWire shines once more - especially with one-click-translations thx to Fluency! Another nice feature is that the page shows indicators for external links: This is a CSS-only solution and quite easy to implement (using LESS syntax): // style external links with icon body > *:not(#tracy-debug):not(.no-icon) { a[href^="http://"]:not([href*="www.boukal.at"]):not(.no-icon):after, a[href^="https://"]:not([href*="www.boukal.at"]):not(.no-icon)::after { content: url("/site/templates/images/external-link.svg"); display: inline-block; position: relative; top: 3px; margin-left: 5px; } } The site has top-notch performance thanks to the brilliant ProCache module and we did do some basic lighthouse optimisations! Hosting is done by me as well and for quality assurance we are monitoring all services with uptime kuma including a monthly report built again with RockPdf πŸ™‚ I find it quite funny that these 6 spikes show loading times of around one second - that's less than the loading time of an average website! All other checks finished within < 100ms (from the same data center). The spikes happen when content is updated and ProCache has to rebuild the static copy of the homepage showing how much of a difference this treasure makes thx to Ryan πŸ™‚ Site statistics are collected using Matomo to provide a great user experience without an annoying cookie banner. Consent for Youtube videos is requested on demand when a video is clicked on. Last but not least all the code is under version control and changes are pushed to the live server simply by doing a git commit (using RockMigrations deployment tools): So once the client requests a change and I'm done with the update I simply do a "git push" and GitHub does the rest and two minutes later the changes are live πŸ˜ŽπŸ§˜β€β™‚οΈ I hope you enjoyed reading and I hope you like the site as much as we do πŸ™‚ I'm happy to hear what you think and if you find something to improve please let us know! πŸ€“ PS: If you like what you see and want to push your next project to the next level I'm happy to do consulting on an hourly basis so that you can efficiently pull my 10 years of ProcessWire knowledge into your work πŸš€ Let's meet at cal.baumrock.com - always happy to see real faces instead of avatars πŸ™‚
    3 points
  3. This week we have a new core version on the dev branch. Relative to the previous dev branch version, the new 3.0.237 version has 33 commits containing 20 issue fixes, 6 feature requests, and more. See the core updates section of ProcessWire Weekly 511, 512, 514 and 515 for more details. It's been about a month and a half since 3.0.236, which is a little longer than usual between version numbers, but that's largely because if the new Invoices site profile (see blog post). I'm off work tomorrow (Friday), so writing the usual weekly post a day early. As always, thanks for reading and I hope you have a great weekend!
    2 points
  4. Have a great weekend and Happy Easter, @ryan.
    2 points
  5. Nice site and write-up - thanks, @bernhard!
    1 point
  6. Thank you guys πŸ™‚ Client feedback from yesterday: Thank you ProcessWire! πŸ’ͺ
    1 point
  7. @bernhard I think it's a great job. Thank you so much for showing how it works from the inside.
    1 point
  8. Yeah that might be more elegant in some situations. Actually you don't even need to put it in a hidden div, you can put it in your markup in a latte comment for example. So those classes will not end up being rendered in your sites markup, but still tailwind will catch them for the final css. I prefer to place markup related things in markup files (*.latte) as for example when working on a "text" block for RockPageBuilder then I want it to contain all necessary markup for that block. So when moving that block into a new project it will still work and I will not have to mess with the tailwind config... But workflows and preferences are different πŸ™‚
    1 point
  9. I need the post-url and will update content of this post asap πŸ™‚ You can signup for Rock Monthly if you don't want to miss the release πŸ™‚
    1 point
  10. Hello all- FieldtypeFormSelect does what the post title says it does. Lets you create a field to select a form created by the FormBuilder pro module. This type of field (or some variation of it) has probably been done elsewhere but I put this together with a few extra considerations for flexibility and utility. When creating a form select field you can choose what forms will be present and how their names will be shown. Let's go to the pictures: A form select field: Creating fields to choose from specific forms? You have options. You can also create a field that will only include forms that begin, include, or end with a specific string. This allows you to create a field once, then use form names to help group them together and add/remove them from form select elements without editing the field. This is also a pretty simple way to allow end users to create forms that will be selectable without having to ever edit a field configuration. For example, this field will only allow you to choose forms having names enting with "request", so "customer-support-request" and "consultation-request" will be included, but "newsletter-signup" and "call-to-action" won't. You can also choose how the form names will be presented in the select element. They can be shown as they are originally named, as spaced words, or as capitalized/spaced words. So, how does this field work? Form select fields store the ID of the form you select, but it also has a nice trick for working with forms in your markup too. FieldtypeFormSelect makes use of ProcessWire's built-in field rendering to keep things simple. Let's go to the code. <?php $page->select_a_form; // => Outputs the form ID, or null if no form has been selected // You could do this to output your form markup echo $forms->render($page->select_a_form); // Or you can do it this way. If a form has been selected the markup will be output to the page, if no form is selected, the output will be null. echo $page->render('select_a_form'); The fields you create will always be up-to-date with the forms that have been created in FormBuilder. This module also keeps things tidy- if a form is deleted that has been selected in one or more fields, on one or more pages, the values for those fields will be set to null so you won't experience any reference errors to form IDs that no longer exist. My primary use is to have a form select field available for blocks created in the RockPageBuilder module by @bernhard. I wanted each section on the page to contain an option to include a call to action button that can be a link to a page, a link to another URL, or that can open a modal with a call to action form to capture leads and visitor contact information. It's a great way to easily add flexibility and give some extra power to the end user when considering what they want visitors to do when browsing their website. RockPageBuilder is not required, but makes for a useful example! Protip for website designers- in my experience and empirical study of conversion analytics for sites that I've built, buttons located within sections of content on the page captured more leads and outperformed a call-to-action button in the page header, the call-to-action form at the bottom of the page, and forms located on a "Contact Us" page- by far. The true purpose of this field is to get the right forms in the right places quickly and easily without any need to work around markup output strategies or short codes. Contributions on Github are welcome if there's some extra functionality anyone wants to add that makes sense. Please let me know if you run into any bugs as well, when there's some extra usage and testing I'll submit it to the modules directory. Hope you find it useful! https://github.com/SkyLundy/FieldtypeFormSelect
    1 point
  11. Here's a copy of my blog with some reflections on building my first site with ProcessWire as someone coming from Drupal: peopleandplanet.org ProcessWire is an open source CMS Content Management System or Framework (CMS / CMF respectively) using PHP and MariaDB/MySQL. It's been around a while, humbly gathering users and sites. I spent a good while reviewing lots of open source CMSes recently as I have previously relied on Drupal 7 (excellent) and didn't like Drupal 8+ nor BackDrop (a fork of Drupal 7). WordPress? not with Gutenberg/React and all those plugin ads, thanks. Turns out I'm quite picky about CMSes! This is because my role is developer, trainer, implementer, themer, discusser of problems and solutions and dreams. I have personal relationships with my clients and am here to help. So I need a system that makes it simple for them to do as much as possible without me, while also being flexible enough for me to rapidly develop new features. So I was shopping for me and my clients, not just one of those parties. ProcessWire seemed a good balance, and once I started developing with it I was hooked. I've now launched my first site with it: peopleandplanet.org and my clients are pretty pleased with it, and I have another job in the pipeline. Templates and pages In ProcessWire, everything (even users!) is a Page, and every Page has a Template. So in Drupal-speak, it's kinda like Page = Content/Entity and Template = Content/Entity Type. A Template is configured with lots of options and describes what fields apply. Templates don't all need to be renderable, but typically are, so generally have an accompanying Template File. Key implementation decisions I made There are many ways to generate and theme page HTML in ProcessWire and I went through them all! Here's what I settled on: Use Page classes: these are PHP classes which add/bend functionality for a particular page/template. Doing pre-processing of data this way seemed the cleanest way to organise things, using inheritance to share code between similar templates. I used the excellent Latte templating engine instead of plain PHP or other options like Blade/Smarty/... Latte is context-aware which makes templates cleaner and clearer to look at and safer because it knows to escape content in one way as HTML text and another as an attribute, for example. The final clincher is that it uses the same syntax as PHP itself, so as a developer hopping between PHP and Latte, there's much less brain strain. Use PageTableNext. This is similar to Drupal's Paragraphs or Gutenberg's Blocks (ish). It allows a page to be built from slices/sections of various different templates, e.g. I have things like "text" and "text-over-image" and "animated stats" etc. These let authors make interesting pages, applying different preset styles to things, giving a good mix of creative control and theme adherence. What I liked Beyond the above features, I liked these things: Fairly unopinionated: the core is quite small and everything is a module, so when you write your own module, you have similar level of access. e.g. I was able to make a core module behave differently by using hooks rather than having to maintain a patch of a core code file. The selector API is a domain-specific query language for fetching page data that makes a lot of common things you need to do very easy and clear to read. I like readable code a lot. A lot of basic CMS features are implemented really nicely; thought has gone into them. e.g. Drupal has a redirect module that can add redirects from old URLs when you update the 'path alias' for a page - great - but ProcessWire's implementation (a) prevents you making circular redirects which is a quick way to kill a Drupal site by accident that's happened more than once, and (b) has some useful rules like let's only do this if the page has been in existence for a little while - because typically while first composing a page you may change the title quite a few times before you publish. e.g. when you save a page that has links to other pages in it, it stores the page IDs of those other pages too, and when the page is fetched it will check that the URLs exist and still match the ID, fixing them if needed. Images - have 'focus' built in as well as resizing etc. so if a crop is needed you can ensure the important content of the image is still present. Booting is flexible; it enabled me to boot ProcessWire from within Drupal7 and thereby write a migration script for a lot of content. There's a good community on the forum. A forum feels a bit old fashioned, but it's good because you can have long form discussions; it sort of doubles as a blog, and a lot of new features are announced in forum posts by Ryan and others. The Tracy debugger is mind-blowingly good, just wow. Modules - third party or core - are typically very focussed and often tiny. This is a testament to what can be achieved throught the flexible and well-designed APIs. Weekly updates on core development from both the lead developer on the blog and the community, both with RSS feeds so it's easy to keep updated. What I don't like Logging is weird and non-standard. I prefer one chronological log of well categorised events, but instead we have lots of separate files. This is a bit weird. One thing it is opinionated on is that there should be a strict hierarchy between pages and URLs. I like that level of order, but in real life, it's not what I needed. e.g. People & Planet has three main campaigns and it wanted those at /campaign-name not /campaigns/campaign-name. And we wanted news at /news/2024-03-25/title-of-news-article, but we don't want a page at /news/2024-03-25/ and we want the news index to be under an Info page in the menu. This meant I had to write a custom menu implementation to implement a different hierarchy to display what we wanted it to look (3 campaigns under a Campaigns menu, the news index under an Info menu). There was a page hook for having news articles describe their URLs with the publish date, but this took quite a bit of figuring out. Ryan Cramer leads/owns the project and other contributors are sparse. He seems like a lovely person, and I'm super grateful for his work, but there's only one of him, so this is a bit of a risk. Also, the code has no phpunit tests. Gulp. There have been various initiatives, but this sort of thing needs to come from a core team, and it's not a priority for Ryan. I love tests, they help avoid regressions, help document designed behaviour, etc. Likewise, there's a styleguide, but it's not adhered to, so... Right decision? I'm very happy with it, and it seems a great fit for my clients' needs, and they're very happy. All software has risks and I got burned twice with Drupal 8/9 - once backing out after months of development; another project that went to completion I regret and dislike administering/maintaining now. But so far, so good, and I intend to use ProcessWire for other projects (including replacing this website) very soon. Contributions I have two ProcessWire modules that are there for anyone who needs them. TagHerder provides a page at Setup Β» Tag Herder that lists every tag and every page tagged with that tag, and provides three options: Rename the tag; Trash the tag; Replace the tag with another. Useful for cleaning up tags that have gotten out of control! EditablePublishedDate lets you edit the published date of a page. Useful for entering historical page information or such.
    1 point
  12. Hi all, I'm happy to share with you this website we launched two weeks ago for a Swiss movie in pre-production phase. The client wanted to have a blog to document the project and allow users to contribute posts through a form but also with a login to the admin which β€” once approved β€” gives them access to more options for their contribution’s content. Right at the beginning they came to us with scientific visualizations as references and thus I finally got to try D3.js. I’ve known about it for a very long time but never got a chance to try it out. It wasn’t easy but in the end I managed to get (what I think is) a pretty satisfying result. And here is a sample of the modules we used: - Fluency ⭐ - TracyDebugger - FormBuilder - RepeaterMatrix - AdminRestrictBranch - FieldtypeOembed - PageRenameOptions - MarkupComponents - Login Magic Link: this is a new one allowing to login with a link sent to the user’s email (inspired by this thread). It’s almost ready to share but I want to create a Process to have an overview of the generated links first Enjoy!
    1 point
  13. Awesome and inspiring! This is some fantastic work @bernhard and showcases real talent. Wi-Five!
    1 point
  14. PROCESSWIRE PROFILE EXPORTER This module serves two purposes: To enable exporting of ProcessWire 2.0 sites to a profile that can then be imported into ProcessWire 2.1 (i.e. to upgrade to 2.1). To enable exporting of ProcessWire 2.1 site profiles for sharing or distribution with others. In either case, the profile exporter does not touch your existing site. It just creates files in a directory (/site/install/) that can then be used for a fresh installation of ProcessWire. PLEASE NOTE: Consider this module alpha test only. It has not had a lot of use or testing yet so it's advisable to use it in a test environment and not on a production server at this time. I am posting this for those that indicated they wanted to help test the PW 2.0 to 2.1 upgrade process. HOW TO INSTALL Download at: https://github.com/r...ssExportProfile Place the file ProcessExportProfile.module in /site/modules/ Login to your admin, click "Modules" at the top, and click "Check for new modules" Click "install" for the Process > Export Profile module. It will create a new page where you can access it under the Setup menu. HOW TO EXPORT A PROFILE A profile consists of your site's database, files and templates. To create a profile, Go to Setup > Export Profile. Read the instructions and continue. Once the profile has been created, you can copy it somewhere else, zip it up, or [if performing an upgrade] copy it directly into your PW 2.1 directory as indicated in the 'upgrading' section below. The profile consists of files in these directories: /site/install/ < required /site/templates/ < required /site/modules/ < optional: use only if you have custom modules to include in the profile /site/templates-admin/ < optional: use only if you have a custom admin theme to include in the profile /site/assets/ < optional: use only if exporting all of /site/, and it should be left empty like PW's default profile* /site/config.php < optional: use only if you want to specify custom config settings, leave out otherwise** These directories collectively form the entire /site/ structure of a ProcessWire installation. If using the profile to upgrade ProcessWire from 2.0 to 2.1 then you'll only want the first two directories above (install and templates)–see the 'Upgrading' section following this one, as the instructions for upgrading are a little different than if you were exporting profiles for distribution. If you intend to share/distribute your profile with others (as opposed to upgrading), you'll want to ZIP them up into an archive (or use something like GitHub). You may want to make your profile include the entire /site/ directory for easier installation by others. If using the entire /site/ directory as your profile, then just copy all the /site/ files from ProcessWire's default uninstalled profile and replace the directories/files that you want to. For instance, you'll always want to replace the /site/install/ and /site/templates/ directories, but if your profile doesn't include plugin modules or configuration file changes, then you'd keep the default /site/config.php file and /site/modules/ directory from ProcessWire's default profile. *Any time you are including the entire /site/ directory as your profile, you'll want to include the /site/assets/ directory exactly as it is in the default ProcessWire uninstalled profile. That means the directory is empty, minus an index.php file. During installation, the installer copies files from /site/install/files/ to /site/assets/files/ and ensures they are writable. ProcessWire's installer also creates several other directories under /site/assets. But you don't need to worry about that. **If you ever do include a /site/config.php in your profile, make sure to remove the last 5 lines that contain confidential information about your database and user system hash. Once you've saved your profile somewhere else, you should delete the files that this module saved in /site/install/ (they might be consuming a lot of disk space). You'll see a link to do this after you've finished exporting a profile. UPGRADING FROM PROCESSWIRE 2.0 TO 2.1 This upgrade process is a little different from what you may have seen before. We won't actually be upgrading your current site. Instead we'll be exporting a profile of it, and using it to install a new/fresh copy of ProcessWire 2.1. To make this work, you'll have to install your copy of ProcessWire 2.1 in another location or another server. Once you've completed the installation and verified that everything is how it should be, you may then replace the original ProcessWire 2.0 site with the new one. It should be noted that this upgrade does not cover user accounts or access control. You will have to re-create any user accounts and access settings in the new system. This was necessary because PW 2.1 uses an entirely different user system and access control than PW 2.0. Should you have a lot of user accounts that need to be converted, let me know more in the PW forums and I can guide you through how to handle your specific case. Performing the upgrade 1. Export a site profile as described in the previous section. 2. Download the latest copy of ProcessWire 2.1 at http://processwire.com/download/ and install in a new location. If you are installing on the same server in a different directroy, then don't use the same database as you did in 2.0. Instead create a new database that you will be using for 2.1. 3. Before starting the 2.1 installer, copy these directories from your ProcessWire 2.0 installation to your ProcessWire 2.1 files (completely replacing the directories in the 2.1 files): /site/install/ => /site-default/install/ /site/templates/ => /site-default/templates/ 4. Now run the ProcessWire 2.1 installer by loading the URL to it in your browser. If all goes as it should, you'll see your 2.0 site now running 2.1. There are some likely issues that may occur, so read the following section about troubleshooting whether you think you need to or not. 2.0 TO 2.1 UPGRADE TROUBLESHOOTING I installed 2.1 using the new profile but now I get a 404 Not Found for every page If you run into this problem, login to ProcessWire 2.1 (/processwire/), edit the template used by your homepage, click the "access" tab and "yes". Then check the box for "guest" view access, and save. Your site should now be functional. I installed 2.1 using the new profile but now many pages have no title ProcessWire 2.0 assumed that all pages had a title field whether it was ever officially assigned to the template or not. ProcessWire 2.1 is different in this regard. So if you run into pages without titles, edit the templates used by those pages, add the field 'title' and hit save. The issue should now be fixed. I ran out of memory or had a timeout when exporting a profile or installing the 2.1 site with the profile On a large site, it's possible that the resources dedicated to PHP might not be enough for the exporter or installer to complete it's job. Should this happen to you, we may need to do one or more parts of the process manually. So if you run into this scenario, please post in the forum and we'll get it figured out. I installed 2.1 and all went well but I now have a non-working "Export Profile" page on my Setup menu (last item) This is the page used by the Profile Exporter module on your 2.0 site. Your 2.1 site won't have the Profile Exporter installed and you can safely delete this page or drag it to the trash.
    1 point
Γ—
Γ—
  • Create New...