Leaderboard

Docker (http://www.docker.com) is an open platform for building, shipping and running distributed applications. Docker containers are a great way to package a complete application with its specific dependencies in a portable way so that it can easily be deployed on any compatible network or cloud infrastructure. Recently I spent a few days making my ProcessWire site run in a Docker container, and - as I could not find any good tutorial for this - it sounded like a good idea to write one. You will find on the web plenty of presentations and tutorials about Docker, so I won't start with the basic concepts, and this tuto assumes that you have a first understanding of Docker's fundamentals. What we want to do here is to migrate an existing site to a set of docker containers. Therefore, to start with, you should have: - docker installed on your computer; - the site directory of your ProcessWIre site - a backup of your site's MySQL database Let's start. Create a docker container for the site database For several reasons (insulation, security, scalability), it is preferable to host the site database in a separate docker container. 1. Set-up a SQL database with MariaDb or MySQL $ docker run --name database -e MYSQL_ROOT_PASSWORD=rootdbpassword -d mariadb Here I choose to use the MariaDB official container in its latest version, but MySQLwould be just fine as well. 2. Run a PhpMyAdmin container and create the ProcessWire database We first select an simple image with PhpMyAdmin on the Docker Hub: nazarpc/phpmyadmin and we create a docker container based on this image. This container will access the port exposed by the database container via a private networking interface. We specify this with the `--link` option. It can be run temporarily (and exited by ctrl-C): docker run --rm --link database:mysql -p 8881:80 nazarpc/phpmyadmin Or it can be run as a daemon in the background: docker run -d --name phpmyadmin --link database:mysql -p 8881:80 nazarpc/phpmyadmin From phpmyadmin (accessed from your browser at http://hostaddress:8881) you can now create your ProcessWire database, create a dedicated user for it, and import the database content from a previously saved SQL file. Note: alternatively, you can do all database operations from the command line in the database docker container created during step 1, or use another mysql user interface container if you prefer… 3. Update the database parameters in your site configuration In your site's `config.php` file, the sql server name shall be set to `mysql`: $config->dbHost = 'mysql'; Other `$config->dbXxx` settings shall match the database name, user and password of the just-created database. Create a Docker Image for Apache, PHP and the Processwire site 1. Create an image-specific directory with the following contents and `cd` to it bash-3.2$ ls -l . config .: total 16 -rw-rw-rw- 1 jean-luc staff 1163 21 aoû 12:09 Dockerfile drwxr-xr-x 17 jean-luc staff 578 17 aoû 12:48 ProcessWire drwxr-xr-x 7 jean-luc staff 238 21 aoû 12:07 config drwxr-xr-x 7 jean-luc staff 238 20 aoû 18:46 site config: total 160 -rw-rw-rw- 1 jean-luc staff 160 20 aoû 18:28 msmtprc -rw-rw-rw- 1 jean-luc staff 72518 20 aoû 18:56 php.ini where: `ProcessWire` contains the version of ProcessWire that we want to use for this site; It can be retrieved from github with a link like https://github.com/ryancramerdesign/ProcessWire/archive/{version}.zip` For example, the 2.6.13 dev version can be obtained by the link https://github.com/ryancramerdesign/ProcessWire/archive/7d37db8d6b4ca6a132e50aff496a70e48fcd2284.zip `site`: our site-specific files `Dockerfile`: the dockerfile for building the image (see below) `config`: a directory containing specific configuration files copied to the docker image (see below) 2. Set the `Dockerfile` content FROM php:5.6-apache RUN apt-get update \ && apt-get install -y libfreetype6-dev libjpeg62-turbo-dev libmcrypt-dev libpng12-dev zziplib-bin msmtp\ && a2enmod rewrite \ && a2enmod ssl \ && docker-php-ext-install mysqli pdo_mysql iconv mcrypt zip \ && docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ \ && docker-php-ext-install gd EXPOSE 80 EXPOSE 443 # Add a specific php.ini file COPY config/php.ini /usr/local/etc/php/ # Configure the mail sent utility msmtp (http://msmtp.sourceforge.net) and make it readable only by www-data COPY config/msmtprc /usr/local/etc/php/ RUN chmod 600 /usr/local/etc/php/msmtprc \ && chown www-data:www-data /usr/local/etc/php/msmtprc # Remove all default site files in /var/www/html RUN rm -fR /var/www/html/* # Copy ProcessWire core files COPY ProcessWire/wire /var/www/html/wire COPY ProcessWire/index.php /var/www/html/index.php COPY ProcessWire/htaccess.txt /var/www/html/.htaccess # Copy site-specific files COPY site /var/www/html/site # Make www-data the owner of site-specific files RUN chown -R www-data:www-data /var/www/html/site VOLUME /var/www/html/site Based on the official image `php:5.6-apache`, it installs missing packages to the system, adds mod-rewrite and mod-ssl to Apache, plus a number of PHP modules needed by Processwire (core or modules): mysqli, pdo_mysql, iconv, mcrypt, zip, and gd. Then it copies the site files to the location expected by the Apache server. Finally it declares a Docker volume `/var/www/html/site` (i.e. the site files and assets), so that it can be shared with other containers. 3. Set the msmtp configuration We need to configure a sendmail utility, so that we can send emails from php, for example when a user registers on the website. The simplest way to do it is to rely on an external smtp server to do the actual sending. That's why we use msmtp. - define the desired smtp account in `config/msmtprc` account celedev-webmaster tls on tls_certcheck off auth on host smtp.celedev.com port 587 user webmaster@celedev.com from webmaster@celedev.com password thepasswordofwebmasteratceledevdotcom - in `config/php.ini`, configure the sendmail command so it uses msmtp: sendmail_path = /usr/bin/msmtp -C /usr/local/etc/php/msmtprc --logfile /var/log/msmtp.log -a celedev-webmaster -t 4. Build the Docker image docker build -t php-5.6-pw-celedev . 5. Create a Data-only container for the site files docker run --name celedev-data php-5.6-pw-celedev echo "Celedev site data-only container" 6. Run the web server container docker run --name celedev-site -p 8088:80 --link database:mysql --volumes-from celedev-data -d php-5.6-pw-celedev Note that this container is linked to our database and shares the 'celedev-data' volume created previously During development, it can be convenient to keep an access to the host file system from the container. For this, we can add a shared volume to the previous command: docker run --name celedev-site -p 8088:80 --link database:mysql -v /Users/jean-luc/web/test-docker:/hostdir --volumes-from celedev-data -d php-5.6-pw-celedev Our ProcessWire website is now up and running and we can test it in our browser at http://hostaddress:8088. Great! What we now have in Docker bash-3.2$ docker images REPOSITORY TAG IMAGE ID CREATED VIRTUAL SIZE php-5.6-pw-celedev latest 2aaeb241c2e2 3 hours ago 1.149 GB nazarpc/phpmyadmin latest e25cd4fd48b3 8 days ago 521 MB mariadb latest dd208bafcc33 2 weeks ago 302.2 MB debian latest 9a61b6b1315e 5 weeks ago 125.2 MB bash-3.2$ docker ps -a CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES 68cc5d976f0d php-5.6-pw-celedev "apache2-foreground" 20 hours ago Up 20 hours 443/tcp, 0.0.0.0:8088->80/tcp celedev-site 0729fe6d6752 php-5.6-pw-celedev "echo 'Celedev site d" 20 hours ago Exited (0) 20 hours ago celedev-data e3e9e3a4715c mariadb "/docker-entrypoint.s" 3 days ago Up 3 days 3306/tcp database Saving the site data We can create an archive of the site files by running a tar command in a dedicated container: bash-3.2$ docker run --rm -it --volumes-from celedev-data -v /Users/jean-luc/web/test-docker:/hostdir debian /bin/bash root@2973c5af3eaf:/# cd /var/www/html/ root@2973c5af3eaf:/var/www/html# tar cvf /hostdir/backup.tar site root@2973c5af3eaf:exit bash-3.2$ Tagging and archiving the Docker image We can also add a tag to the docker image that we have created in step 4 (recommended): bash-3.2$ docker tag 2aaeb241c2e2 php-5.6-pw-celedev:0.11 bash-3.2$ docker images REPOSITORY TAG IMAGE ID CREATED VIRTUAL SIZE php-5.6-pw-celedev latest 2aaeb241c2e2 3 hours ago 1.149 GB php-5.6-pw-celedev 0.11 2aaeb241c2e2 3 hours ago 1.149 GB nazarpc/phpmyadmin latest e25cd4fd48b3 8 days ago 521 MB mariadb latest dd208bafcc33 2 weeks ago 302.2 MB And we can archive this image locally if we dont want to push it now to the Docker Hub: bash-3.2$ docker save php-5.6-pw-celedev:0.11 | gzip > php-5.6-pw-celedev-0.11.tar.gz And that's it! You now have a portable image of your ProcessWire website that you can run directly on any docker-compatible system.

Hi Guys, A new launch from us. Ensoul.co.uk - Interior Design, Architecture & Project Management, London. Background Based in London, Ensoul are Interior Architects specialising in high-end / luxury interiors, basement conversions, extensions, and residential renovations etc. We based the site on ProcessWire because it's agile, scalable and a pleasure to work with. Given that the Ensoul team will shortly be updating the site and blog in-house we needed a CMS that would also be intuitive for them to use. Overall the nature of the site is very visual and relies heavily on photography. It was essential the CMS had solid image management built in and this was another factor in choosing to run it on ProcessWire. More on that shortly. The plan This is Phase 1 (design and launch) of a multi phase project. Phase 2 consists of optimisation, refinement and a comprehensive SEO project. In particular we'll be redesigning the homepage, building a blog and looking to speed up page loads. With ProCache due to be installed very shortly, we plan to dramatically increase the site speed, minify a lot of the JS and gain points on Googles mobile speed test tool. Image Management I just wanted to highlight some of the nice image management features which ProcessWire brought to the table. 1. Background images Most of the pages have a large background image and we wanted the freedom to swap and change these on a page by page basis and test a lot of different photos. Given 80% of the page and background image is covered by content, not every image was going to work. We solved this simply by creating an image filed called Background Image into which we (or client) can drag and drop a photo of their choice. Any background photos are integrated into the jQuery Backstretch plugin In the case of the homepage where three background images are used, PW and Backstretch will create a slideshow instead. <?php // if Background_Image field contains more than 1 photo, echo the images in a slideshow // Mainly for Homepage if($page->Background_Image->count > 1 ) { $bgimage = $page->Background_Image; echo '<script>$.backstretch(["'; echo $bgimage->implode('", "', "url"); // results in url", "url", "url echo '"], {duration: 5000, fade: 1000});</script>'; } else // otherwise echo a single image on its own // Mainly for all other pages if($page->Background_Image->count == 1 ) { $bgimage = $page->Background_Image; foreach ($bgimage as $image) { echo" <script> $.backstretch('$image->url'); </script> "; } } ?> 2. Portfolio The Portfolio page is image heavy and features a masonry grid of photos which are then filtered by project type. On the front end, I was able to restrict each thumbnail and pop-up image to the size of my choice without having to crop each individual photo. To achieve this, I used a $thumb and $large variable and PW automagically handled the cropping. foreach($page->Images as $image) { $large = $image->width(800); $thumb = $image->size(340); echo ".... Creating the filters which toggle the display of rooms by type was surprisingly easy with ProcessWire. I used the image tag field which I hadn't really used before and quickly allowed me to tag a photo as a kitchen, bedroom or basement etc. It really was an eye opener into the power of PW: <div class="portfolioFilter"> <strong>View:</strong> <a href="#" data-filter="*" class="current">All</a> <a href="#" data-filter=".Kitchen">Kitchen</a> <a href="#" data-filter=".Bedroom">Bedroom</a> <a href="#" data-filter=".Bathroom">Bathroom</a> <a href="#" data-filter=".Sitting-Room">Sitting Room</a> <a href="#" data-filter=".Gym">Gym</a> <a href="#" data-filter=".Basement">Basement</a> <a href="#" data-filter=".Home-Office">Home Office</a> <a href="#" data-filter=".Kids">Kids</a> <a href="#" data-filter=".Garden">Garden</a> </div> <div class="portfolioContainer"> <?php foreach($page->Images as $image) { $large = $image->width(800); $thumb = $image->size(340); echo " <a class='fancybox-portfolio port-item {$image->tags}' href='$image->url' rel='gallery1'> <img src='$thumb->url' alt='$thumb->description' class='portfolio-thumb'> </a>"; } ?> </div> 3. Coverage Thumbs The client is receiving regular coverage in leading interior design magazines and at the end of the project I required a way to differentiate between Features and Opinion pieces. Again, PW made this very easy for me. I knew I could easily create a field called Coverage Type and select the type of coverage a publication should belong to. Traditionally I would have relied on the Page field to achieve this but I didn't need the initial more involved setup which that would require. Instead I opted for the new, simpler Options field instead. Featured Modules RenoTheme CoreConfig Upgrade Markup Simple Navigation CroppableImage FormBuilder ProCache (shortly) SEO Page Path History Redirects SiteMap XML ListerPro WireMail SMTP Conclusion That's pretty much it. I know some of the techniques here won't set the PW world on fire and probably are pretty basic but hopefully seeing the screengrabs and examples will help other beginners understand PW a little better. Thanks as always to the PW community who helped build this with their advice and answers along the way.

New processwire - responsive - site live on www.rugpijnweg.nl Thanks to this forum I found vxda who did all the coding while the design was done with his colleague Piotr from 7thavenue. Rugpijnweg.nl uses procache, and gets high scores on gtmetrix.com. It still needs some better way to optimize images and serve scaled images. Any feedback much appreciated, this site is meant to be fully responsive. Used Modules: - Procache (thanks Ryan) - ModulesManager (thanks soma) - ProcessJumplinks (thanks mike-rockett) - Thumbnails (thanks apeisa) - Get Video Thumbs (thanks adrian) Still some minor stuff needs done, happy to incorporate any feedback to make it better!

You're page field is preset with fixed pages to choose from, so I'm not sure what exactly you want to compare here, but to do compare a page (from the field) with a page(from the selector) just use this: $pageSelector = $pages->find("…"); $pageField = $page->myPageField; if($pageSelector->id == $pageField->id){ // We have a match }

Often those accessable url's are used for the pages only showing a specific category, but you can surely prevent that. One way would be using only templates without a corresponding template.php file. If there's no file, then there's nothing to render, which results in the default 404 error. Another way would be using the right selector to get the categories $pages->find("parent.id=[path=/categories, include=unpublished]"). This does get you all children of the page found by the selector within the square brackets (subselector). Keep in mind, that urls are always lowercase.

I also change line 63 in the module to: $storageLocation = $this->wire('config')->paths->root.rtrim($field->get('storageLocation'), '/') . '/'; So my secure file path is relative to my web root: eg: ../secure_files/ Which is just one level down from my web root, and is easily configured on most shared hosts. Just saves a bit of time working out absolute paths on shared accounts. Might be an option within the module to select "Relative path to Processwire root" or "Absolute Path"

Trick is to modify the `links` field `Selectable Pages` into `Custom Selector`. Go to Setup > Fields > links Click on Input tab Under Selectable Pages Remove `Parent of selectable page(s)` settings Add custom selector under `Custom selector to find selectable pages` Thanks

forklift can do some amazing things, multi-rename, browse archives etc; also the split screen each with unlimited tabs is great when working on huge projects where you need fast access to 10 different folders; and then you can save entire workspaces...

Foundation 6 for sites will have a release candidate out next month.

I'd really suggest storing this data separate to the map-marker data. In such a situation you don't want to depend on a tool you cannot surely control what data it spits out (changes to the module or the api).

Fantastic! Really love this site. The imagery is fantastic. Just showed a client this site as an example of using larger images and they were blown away. I owe you a beer amigo!

I was actually thinking of converting all feature request/enhancement issues to something in the PW website (powered by PW pages). Something like the sites directory, with the ability to "like" requests, so that the most requested ones could rise to the top and get more focus. This would also get them out of GitHub, so the focus there can be on issue reports. Though I think it's good to still submit feature requests at GitHub, but I would just move them to the more dedicated system and close them out there once that's done.