Jump to content

Philipp

Members
  • Posts

    199
  • Joined

  • Last visited

  • Days Won

    3

Posts posted by Philipp

  1. TL:DR I've updated a PW page we've built 9 years ago for the first time and it's still a solid experience.

    Backstory

    Back in May I was on a crowded train somewhere in the middle of Germany. Now working as a "Consultant" who builds slidedecks instead of websites, I happily noticed the men next to me talking about responsive webdesign with his friend. During the obligatory "This train is late" announcement we started to chat.

    My seatmate, a geography teacher, recently attended a web workshop at a large Hamburg agency. He told me he now understands the value of a CMS for updating their site and he wonders how to build a responsive layout. They don't get paid for this and work on their homepage in their spare time. And they have a Typo3 installation ?

    Back in 2013, together with my friend Marvin, we've rebuild our school website with ProcessWire optimized for mobile devices. Launched in 2014 this was quite an impressive feat including online time tables, a working event calendar (with import feature) and many small nice touches.

    After my encounter on the train, I checked the page and yes, It's still online and updated daily! The next day I wrote my old teacher a short email if we should have a closer look into the underlying tech and within minutes I got a super happy reply that he is so glad that somebody would help (again). 

    So let's dive into what we've done.

    Situation

    First some details about this ProcessWire installation that is updated by a few teacher on a regular basis.

    • Over the 9 years they've wrote nearly 900 news articles and kept more than 250 pages up to date. The asset folder is over 11GB.
    • Build with Processwire 2.4 (?) and lots of janky code we've updated the page once to 3.0.15 somewhere in 2016 quick and dirty. They even used the old admin layout.
    • ProCache, CroppableImages3 and a few other plugins were used. Every single one of them required an update
    • It's used the classical append-template approach with a single big "function.php" included file.
    • It's running on PHP 5.6 and for whatever reason no PHP update was enforced by the hoster (But the admin panel screamed at me)
    • A privacy nightmare: Google fonts embedded directly, no cookie banner and a no longer working Google Analytics tag included
    • The old ProcessDatabaseModule made a database backup every week as planned over all these years. Nice.
    • No hacks, no attacks and all teachers are using their own account with assigned permissions

    Changelog

    I've updated the page with a focus on making it stable and reliable for the next 9 years. After making a development copy of the page, I've started working on the following changes:

    • Updated ProcessWire and all modules to the latest stable version. After reloading a few times, no errors encountered
    • Updated the whole templates to make it work with PHP 8.2
    • Removed all externally hosted scripts, disabled cookies for all regular visitors and introduced a 2-click-solution for external content
    • Reworked a few frontend style issues around the responsive layout, made slight visual changes for 2023 (e.g. no double black and white 1px borders)
    • Ported the image gallery feature to more templates (Big wish of the people updating the site, they've used a workaround)
    • Cleaned up folder and structures, removed a few smaller plugins and admin helpers no longer needed

    All this was done back in May and - with a big break - completed now in October. It took a few days and most of the time was spent figuring out our old code.

    Learnings

    • ProcessWire is robust as f*ck. I just clicked "Update" and it mostly worked instantly
    • I nearly removed features for the PHP update. A custom written importer for the proprietary XML schedule was hard to debug and understand (5-dimensional-arrays...). Gladly I've tossed a coin and just gave ChatGPT the php function source and error message and within a single iteration it updated the code for PHP8. 
    • The "responsive" CSS framework aged badly. The used 960gs skeleton uses fixed widths for the responsive layout. I couldn't get it be wider than 320px on mobile screens. So the site is responsive but with a slim profile for now. Replacing it would be a complete layout rewrite

     

    Result and looking forward

    The Werkgymnasium site is now updated and live again. It still loads superfast and looks great after all these years. We have a few more features planned to help our editors input new content but overall it just works.

    Looking forward a few issues remain. ProCache would require the paid update but it still works fine. The layout needs improvement on mobile screens. There is still an error with the pagination.

    We'll cleanup the code more and then make the whole template public on Github so that maybe a few students after us can continue with the updates. Maybe even rebuild the frontend one day. I hope I can give you an update in a few years again.

     

    As a closing note: I'm still grateful for the amazing community here and all the features ProcessWire has to offer. My daily work no longer resolves around websites but PW has a permanent spot in my heart. Thanks Ryan and all the contributors.

     

     

    • Like 33
  2. We're trying to run ProcessWire on an Azure-Setup using the Azure Web-Apps Service with the included MySQL. We used the default template from the marketplace meaning that MySQL is running on the same instance as the webservice.

    Beside some PHP settings and problems we finally got the Processwire instance running.  As this was an IIS-server, the `.htaccess` was converted into an `web.config` based on the example that can be found in the forum here. This works fine so far and no errors etc. happen.

    The main problem is that the performance of the web application is incredible slow on Azure. Every request ist about 5-10x slower than our previously shared webhosting setup. We do not think that latency is the problem, because the slow-down is not the same everywhere.
    We currently can't detect what's the actual bottle neck is. The instance itself is running on a 200ACU + 3,5GB RAM which should be the problem (as any other Node app we have running on lower machines with better performance).

    We tried to avoid the Bitnami installer because it would be about 3-4x more expensive to run.

    So the main question is, does anyone has experience with performance improvements on Azure (Web Apps) or at least with running Processwire on a Windows host with IIS?

    We know that IIS is officially not supported on Processwire but maybe someone has an idea or got it running smoothly.

  3. This Looks really good. As said on HN: file size went down, SASS Support, fewer but better components.

    After learning Foundation (5) last month, I have to re-evaluate both Frameworks when Boostrap 4 launches. I really prefer the default Styling of bootstrap (and the components) but I don't like the Container>row>column approach with the outer padding.

  4. Nice site and a great description about the Solutions you found.

     

     

    Just an issue with a "regular" PC: When browsing with the IE11 and Windows 7 on a regular (Office) FullHD Screen, the logo becomes crispy and unreadable. See the attached screenshot.

    post-752-0-48272100-1440157168_thumb.jpg

  5. Can also confirm that ProcessWire works well as a JSON-Backend-Service for Ionic-Apps. (The german Ionnic page is built with PW)

    But in General, using ProcessWire as a backend is possible with native Android apllications. Mostly you fetch JSON from a REST-API and PW can deliver that. As an alternative, you could for example look at Parse.com

  6. FTP should be running and it is scheduled to restart frequently. 

    The problem with accessing images is a problem with ProcessWire itself. When the creation process fails, the image file is created but not accessible. This can happen, even when you fix your old image code. Try removing the files manually and then recreate them.

  7. This is up to you. The module doesn't generate markup so you could just trigger the PHP call when a user clicks on a star.

    Theoretical, you fire a Javascript event when the users clicks the star together with the value (1,2,3,4,5) of the star. Then your code adds this rating.

  8. Finally found time so rewrite the thing. In short, it is now working but I can't figure out what didn't work before.

    1) My $size was set to 0. This was my mistake. The width() options just ignored the $options array.

    2) I manually removed all pages including the image files and re-upload them. This made PIM PageImage objects work as well as the ProcessWire ones.

    Sorry, this seems like a fault on my side. PIM works fine once you get the things around right.

    • Like 2
  9. Not tested and quickly put together here based on the HelloWorld.module demo. This should give you an starting point.

    Hook before the page saves (I think this is possible?), then write the other field based on the source_url field.

    <?php
    
    /**
     * ProcessWire 'Hello world' demonstration module
     *
     * Demonstrates the Module interface and how to add hooks.
     * 
     * See README file for further links regarding module development.
     * 
     * ProcessWire 2.x 
     * Copyright (C) 2014 by Ryan Cramer 
     * Licensed under GNU/GPL v2, see LICENSE.TXT
     * 
     * http://processwire.com
     *
     */
    
    class Helloworld extends WireData implements Module {
    
    	/**
    	 * getModuleInfo is a module required by all modules to tell ProcessWire about them
    	 *
    	 * @return array
    	 *
    	 */
    	public static function getModuleInfo() {
    
    		return array(
    
    			// The module'ss title, typically a little more descriptive than the class name
    			'title' => Rewrite field after save', 
    
    			// version number 
    			'version' => 1, 
    
    			// summary is brief description of what this module is
    			'summary' => 'An example module used for demonstration purposes. See the /site/modules/Helloworld.module file for details.',
    			
    			// Optional URL to more information about the module
    			'href' => 'http://processwire.com',
    
    			// singular=true: indicates that only one instance of the module is allowed.
    			// This is usually what you want for modules that attach hooks. 
    			'singular' => true, 
    
    			// autoload=true: indicates the module should be started with ProcessWire.
    			// This is necessary for any modules that attach runtime hooks, otherwise those
    			// hooks won't get attached unless some other code calls the module on it's own.
    			// Note that autoload modules are almost always also 'singular' (seen above).
    			'autoload' => true, 
    		
    			// Optional font-awesome icon name, minus the 'fa-' part
    			'icon' => 'smile-o', 
    			);
    	}
    
    	/**
    	 * Initialize the module
    	 *
    	 * ProcessWire calls this when the module is loaded. For 'autoload' modules, this will be called
    	 * when ProcessWire's API is ready. As a result, this is a good place to attach hooks. 
    	 *
    	 */
    	public function init() {
    
    		// add a hook before the $pages->save, to issue a notice every time a page is saved
    		$this->pages->addHookBefore('save', $this, 'saveShortUrl'); 
    
    	}
    
    	/**
    	 * Save as another field.
    	 *
    	 */
    	public function saveShortUrl($event) {
    		$page = $event->arguments[0]; 
    		//#todo Rename to your field names.
    		$page->domain = parse_url($page->source_url,PHP_URL_HOST);
    		//#todo Maybe some more error handling.
    		$this->message("Save the domain {$page->domain}."); 
    	}
    }
    

    But maybe the experts on this topic hand help you with any further questions ;)

  10. <spam>Lot's of things can be done with AdminCustomFiles. Admin custom files has a lot of info in the JS var config.AdminCustomFiles which can be used to be build upon.</spam>

    Recently I've ported FontawesomePageListLabel to a standalone JS file and included it with the module.

    Maybe make it easier to "hook" into that and provide files for installation? Only Upload a Zip file and it will be loaded in the right place.

    Totally agree, that we don't need 20 modules for 20 super small tasks.

  11. I think there was a discussion about this some time ago in a thread here. While I quite like the ideas, I see some challenges that comes with this approach

    • Who is handling the payment? What about taxes? How to "book" this income?
    • How exactly should they work? Flattr? Paypal Donate?
    • Why not just leave it up to the Developer, to include a Donate Link in his/her description?

    And I'm not sure if that many people would donate after all. If we/Ryan spent about 20-30 hours building the donate function and we only collect 200-300 Dollards in Donation after all..... - better build another great module :)

    • Like 3
  12. Why store the domain twice, if you already have the full source URL?

    Just ouput the part from the source URL field you want to display like horst mentioned:

    <? echo parse_url($page->source_url,PHP_URL_HOST);?>
    

    If you want to store it additionally, look at the HelloWorld.module demo and try to hook after each page save and write the field.

    • Like 3
  13. Thanks for the answer. If I replace the single line where I call PIM

    $result = $image->pimLoad(....)->pimSave()

    with

    $result = $image->size(123,123) 

    all the following functions and stuff works. Yes, you've found a bug/problem in the rest of my code (thanks), but my question is, why does it totally fail with the PI object from PIM and not with the one from PWire? I rewrite all those image stuff this evening and try again.

    I'm using the latest dev build (2.5.10 the latest version on the dev branch as of yesterday 18:00 GMT time) and the time limit is 60 seconds. A try with 120seconds did also fail (with a single image at 2000x1333). Memory limit is 128M.

    _

    I never requested it fo fail silently. The problem was, that an error a developer could made in the past and that is now fixed, affects all future operations with an image because a half-way created image exists on the file system.

  14. Is the use of a dedicated folder important? Add an image field to the homepage and then output a random image from those images in the newly created field

    When the field name with mutliple images is random_photos

    <? echo $page->random_photos->getRandom()->url;?>
    

    This will return a random photo from the images field every time you reload the page.

    EDIT: To make it prettier:

    <?php $random_image = $page->random_photos->getRandom();?>
    <img src="<?php echo $random_image->url;?>" alt="<?php echo $random_image->description;?>"/>
    
    • Like 2
  15. Hi.

    I've got some problems after creating an PIM image. I'm using PHP 5.5.19 and tried it on the current 2.5.2 and on the latest dev from this morning. Server is lightning.pw, so usual this setup doesn't make any problems. I'm using the default 2.5 image settings in the config.php

    Task: First, resize the image to a given width, then grayscale() it and then overlay a transparent gradient.  Afterwards use it on different position in the HTML code. This is my function to create this image variation:

    function getBrandImage($image,$width=1080,$prefix='branded') {
    	if($image->name != '') {
    	
    	//$image->pimLoad($prefix)->removePimVariations();
    	
    	//Path to the overlay png depending on orientation
    	$overlay_path = wire('config')->paths->templates . 'assets/overlay-landscape.png';
    	
    	if($image->width < $image->height) 
    		$overlay_path = wire('config')->paths->templates . 'assets/overlay-vertical.png';
    	
    	//Output
    	$o = array('outputFormat'=>'jpg');
    	
    	// apply it together with other actions
    	$result = $image->pimLoad($prefix,true)->setOptions($o)->width($width)->grayscale()->watermarkLogoTiled($overlay_path)->pimSave();	
    	
    	}
    	return $result;
    }
    

    It will create an image variation that has the desired effect. But now starts the weird stuff I can't figure out.

    1) On my homepage, I'm calling this function with the default width of 1080 and I get back the PageImage. I now pass this PI to a simple function that renders and srcset html output by generating 3 variations of this image with the PW image functions.  This function works when I just pass a regular $page->image->size(120,120) PI object.

    //Renders an image as srcset
    function renderImage($image,$class='',$sizes='auto',$sets=array(400,767,1080,2120)) {
    	$out = '';
    	
    	if($image->name != '') {
    		if($class != '') $class = ' ' . $class;
    		
    		$o = array( 'upscaling' => true, 'cropping' => true, 'quality' => 40);
    		
    		//Start
    		$out .= "<img src='{$image->width(260,0,$o)->url}' alt='{$image->description}' data-srcset='";
    		foreach($sets as $s) {
    			$img = $image->size($s,0)->url;
    			$out .= "{$img} {$s}w, ";	
    		}		
    		$out = substr($out,0,-2);
    		$out .= "' data-sizes='{$sizes}' class='lazyload{$class}'/>";
    	}	
    

    The $image here is the $result from the function above. It will create the first image in srcset (inside the foreach). The other images will output with 0x0 in the filename and are not created. 

    2) On another page, where I need smaller images but only in 1 resolution, I'm calling the getBrandImage() function again but this time with width of 400. It will create the image but I think it crashes because the file permissions are set wrong, so the files can only be seen directly on a file level. 

    I get the same results when I resize the image before I pass it to PIM or try different combinations.

    When I just leave out the PIM stuff and create the image inside PIM with PW (and without the gradient/grayscale) everything works. That why I think this is an issue with PIM but I can't figure out anymore. The errrors.txt file doesn't show anyting. When I turn on debug, those messages appear. They don't appear when I comment out the PIM part.

    Warning: imagecreatetruecolor(): Invalid image dimensions in /lightning/version/2.5.10.5/wire/core/ImageSizer.php on line 1417
    
    Warning: imagecopy() expects parameter 1 to be resource, boolean given in /lightning/version/2.5.10.5/wire/core/ImageSizer.php on line 1438
    
    Warning: imageconvolution() expects parameter 1 to be resource, boolean given in /lightning/version/2.5.10.5/wire/core/ImageSizer.php on line 1439
    
    Warning: imagedestroy() expects parameter 1 to be resource, boolean given in /lightning/version/2.5.10.5/wire/core/ImageSizer.php on line 1528
    
    Warning: imagedestroy() expects parameter 1 to be resource, boolean given in /lightning/version/2.5.10.5/wire/core/ImageSizer.php on line 1529
    
    Warning: imagegammacorrect() expects parameter 1 to be resource, boolean given in /lightning/version/2.5.10.5/wire/core/ImageSizer.php on line 1354
    
    Warning: imagejpeg() expects parameter 1 to be resource, boolean given in /lightning/version/2.5.10.5/wire/core/ImageSizer.php on line 429
    

    Sorry for the long report, but just want to make sure that I didn't overlooked something. Help would be appreciated, thanks :)

  16. You can't select an "existing" page with a repeater either. You always create a new repeater element.

    Your teacher example is possible with PageTable. Create a page template with a selectTeacher Page field and the textfield for the description. When someone wants to add a teacher to a course, he creates a new "page", select the teacher and enters additional information. Or did I miss anything?

    Maybe your example is a little bit of, but having about 80 teachers for a course... Maybe better to add courses to a teacher (the other way)?

    • Like 1
  17. I have the previous model of the Dell monitor you described in your first post (Dell U2711). The viewing angel and colors are great. Even for amateur photography. I've never calibrated the display with a tool like the spyder but the printed results don't look different than the file on the monitor.

    I think a DELL monitor isn't a bad choice.

    Overall, most modern displays are great (having IPS, good colors) compared to the flat screens from five years ago. Buy one of those DELL 27" and try to get a hand on one of those spyder tools. You'll be fine and like all the pixels you can use:) You could also think about 4K, but the market is changing quickly here and the Windows support for such HiDPI displays isn't as great as on Mac (IMHO)

    My next monitor would be an Asus PB287Q but I'm holding my money for cheaper IPS 4K monitors with HDMI2.

    • Like 2
  18. Sorry for the inconvenience. We fixed this earlier today. This only affected the creation service (the background runner creating the site) and not the global login or the sites itself. 

    In more detail, we've updated the server 3 days ago but forgot to restart an intern service. This caused the creation process to fail. We failed to test this and only noticed after three days. Added "Create a site and login once" to our update checklist.

    • Like 2
×
×
  • Create New...