Peter Knight

Thanks Philipp That's pretty distorted alright. Possibly because I'm serving up a 2X image and scaling it down with a max-width selector in CSS. Will look into it right away.

For sure! Phase 2 is on right now!

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.

Forklift looks great. Thanks for the tip Adrian. @elabx Transmit is good and I can recommend it. I think the version purchased via the Apple App Store has a sync limitation or can only sync via DropBox and not use it's native sync function. Also remember using it the first time and noticing that it prefers drag n drop over uploading a file. If you upload a file the normal way make sure "Linked Folder Navigation" is on so your folders will navigate in sync, local and remote, at the same time. Always found Transmit support very good too.

A lot of us are running the latest Dev version (2.6.13 right now) on live production sites with no issues. You have to make that decision yourself and ensure you have a backup etc but I've had no issues. I use the Upgrade module to keep an eye on what the latest Live and Dev version is.

Hi abmcr Do any of your templates use the settings found under the Family tab? This ensures that new pages using certain templates can only be children of specific pages. I think that's fundamental to seeing the Add New option in the Pages menu,

Don't date/time fields have the option to default to the current time/date. That's how I handle it and then manually set it if required.

Hi Rick I've read few intros on the PW forums and this seems to be a common experience (myself included). Can you recall why it didn't seem to match requirements initially and which version (approximately) was it at? P

Might be an option. I'll need to build out a few pages first. Luckily the videos my client is featuring are all cinema releases so they're almost always going to have a high res image in there. I noticed 0,1,2,3 pull in small thumbnails as opposed to a largeish screengrab of the 0,1,2,3 frames. Presume thats a YouTube thing (tiny thumbnails Vs decent W/H images)

@adrian Thanks so much for building this. I just installed this for a site I'm building which features a ton of vids. I'm not familiar with YouTube's image settings etc but in general out of the following, which is most commonly used? maxresdefault, hqdefault, mqdefault, default, 0, 1, 2, 3 I'm tempted to pull them all in and allow my client to tag a thumbnail they wish to use. However, equally, I'd rather not take up bandwidth if I knew that by dafault, YT always has a default thumb etc. Obviously, 0, 1, 2, 3 are also good defaults.

Ah, thanks Nico. That was it

Can someone assist with some SEO Module questions I have? By default, the SEO tags are outputting by default just before the </head>. I'd like them to render instead right after the opening <head> If I want to choose exactly where they render, someone posted that this work <?php echo wire('page')->seo->render; ?> On my site, this works but renders the SEO fields twice. In the default location (before the closing HEAD) and in the preferred position after the opening HEAD. My second question is if the following (and only) How to use is still correct? I might be doing this wrong but including any of the following renders nothing <?php echo $page->seo; ?> or <?php echo $page->seo->title; ?> or <?php $page->seo->render; ?> Thanks - appreciate it.

I have the Title Format option set to {title}, {sitename} How would I make the module use a filed called Long_Title instead of title but only is Long_Title is set I tried the following using a pipe {Long_Title | title}, {sitename}

Hangs for me too on a test server. Great Module though. Love the ability to run the check directly in the Admin.

Is anyone using this on 2.6.8?

Soma has a Module called Page List Image Label. Would that work? You could also try the ListerPro module (paid but very reasonably priced) where you can create a custom view of lists of pages arranged by columns. One of those columns could be an image associated with a page. Next column could be the title.

Do you mean that in the Admin you want a thumbnail beside the title?

Did some further reading. Google have confirmed they are working on a global solution. Launch TBD

I've been reading up on Referral spam in Google Analytics and wondered what others were doing to counter it. It's such a new problem that Google themselves have so far failed to deal with it effectively leaving us web developers to figure out solutions. Some of the guys on the forums are using .htaccess tweaks to block the domains in question etc. What (if anything) are you doing? I saw a WordPress plugin which I think is a good idea. It pulls in a central repository of known referral spammers and blocks them. Might be a good idea for a PW Module?

@Horst - thats what I thought too. Hopefully Ryan can clarify.

Skitch. It's great for taking quick screengrabs and then saving them to a dashboard of all your screenies.

There's a relatively new Config module which enables setting basic config options directly in the admin. Was wondering if you could clear up some points as I'm a bit confused regarding the process and which files take precedence. Q1: Risk of wire/config being overwritten If we want to add a custom Configuration property under the Core tab, we are supposed to edit wire/config.php. For example, I made a new test property in wire/config.php. Refreshing the Config module successfully displays my custom property. Yet on the official docs it states that wire/config.php should not be edited as it'll be overwritten. Q2: Precedence or inheritance of site Vs wire config So, should custom settings instead be setup in site/confing.php? I don't think they should as adding new Configuration settings here has no effect on wire/config.php or the available Config Module properties Q3: New Site tab Again, adding anything to the site/config.php has no effect on my Config Module and the tabs are only. Core | Custom and Remove. Yet the documentation differs here.... I'm wondering if the Custom tab is what you meant instead of Site? Q4: Site Title In the current Custom tab, there is a Config property called Site Title. Where is the Config Module reading this from? It's not set in Site or Wire config.php that I can see.

Reminds me of the old Scooby Doo cartoons and their cut-in sequences

Could be something related to .fa-spin { -webkit-animation: fa-spin 2s infinite linear; animation: fa-spin 2s infinite linear; } located in wire/templates-admin/styles/font-awesome/font-awesome.min.css or one of lines following it which handle some rotation. Commenting it out removed the problem. No, nothing. I'm pretty sure it's only happening on this site. Definitely an edge case and noone else seems affected.

@renobird Here's a Vimeo recording from the moment after I click Login. Do not adjust your sets!