New Website for Austrian Artist Tanja Boukal

[bernhard]

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!

Spoiler

<?php

namespace Site;

use ProcessWire\Fluency;
use ProcessWire\WireHttp;
use RockShell\Command;

use function ProcessWire\rockfrontend;
use function ProcessWire\rockmigrations;

class ImportAegean extends Command
{
  public function handle()
  {
    // links to grab old content from
    $links = [
      "https://old.blog.com/blog/?p=45" => "Old Blog Post One",
      "https://old.blog.com/blog/?p=65" => "Old Blog Post Two",
    ];
    
    // some neede variables
    $parent = $this->wire()->pages->get(123);
    $rm = rockmigrations();
    $en = $this->wire()->languages->get(1010);
    $de = $this->wire()->languages->get(1012);
    $http = new WireHttp();

    /** @var Fluency $fluency */
    $fluency = $this->wire()->modules->get('Fluency');

    // loop all links and import conten
    foreach ($links as $url => $title) {
      $this->write("Importing $title ...");
      $translation = $fluency->translate(
        sourceLanguage: "DE",
        targetLanguage: "EN-GB",
        content: $title,
      );
      $page = $rm->createPage(
        template: "blog-post",
        parent: $parent,
        title: $translation,
      );
      
      // add old url to this page so that we can later add redirects
      $page->setAndSave("oldurl", $url);
      $page->setLanguageValue($de, "title", $title);

      // load old page into RockFrontend's DOM-Tools
      $html = $http->get($url);
      $dom = rockfrontend()->dom($html);

      // import and translate text
      try {
        $body = $dom->filter(".entry-content")->text();
        $page->setLanguageValue($de, "body", $body);
        $page->setLanguageValue($en, "body", $fluency->translate(
          "DE",
          "EN-GB",
          $body,
        ));
      } catch (\Throwable $th) {
        $this->error($th->getMessage());
      }

      // import image
      $img = $page->getUnformatted("image");
      try {
        $src = $dom->filter(".entry-content")->filter("img")->first()->attr('src');
        $img->removeAll();
        $img->add($src);
      } catch (\Throwable $th) {
        $this->error($th->getMessage());
      }

      $page->save();
    }
    return self::SUCCESS;
  }
}

 

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 🙂 

[wbmnfktr]

You did an absolutely amazing job here, @bernhard.

Holy... lots and lots of small details and things to consider.

Love the write-up/case-study for this project.

[FireWire]

Awesome and inspiring! This is some fantastic work @bernhard and showcases real talent. Wi-Five!

[Andy]

@bernhard

I think it's a great job.

Thank you so much for showing how it works from the inside.

[bernhard]

Thank you guys 🙂 Client feedback from yesterday:

Quote

Apart from that I would like to say thank you again - I love my new website and the feedback has been really positive

Thank you ProcessWire! 💪

[netcarver]

Nice site and write-up - thanks, @bernhard!