CodeBlog.ch

in concrete5 you can create an alias if you want a page to appear at two different locations. If you look at the following site structure, you can see that we have two categories and two different services we’d like to offer.

For whatever reason, we’d like to make sure that our main service shows up beneath both categories. It’s physical location is right under the first category but how do we add an alias underneath the second category? In the UI this is super easy, just drag the service to the second category and release the mouse button – a dialog will show up where you can select that you want to create an alias and that’s it! But how do we the same using code? It’s also pretty simple:

1
2
3
4

<?php
$pageToAlias = Page::getByPath('/category-1/service');
$parentOfAlias = Page::getByPath('/category-2');
$newAlias = $pageToAlias->addCollectionAlias($parentOfAlias);

I’ve used Page::getByPath to get both page objects but you can of course use Page::getByID or anything else that returns a valid page object. As soon as you’ve run this code, you’ll have an alias in your sitemap like that:

In this article I’m going to explain a nice code that works with attribute. It’s something quite a few people are using but it never crossed my mind to write something about it until my friends from 100pro asked for it.

Let’s start with a quick look at the problem we’re going to solve. Our page layout is pretty simple, two columns, some content and in our case the most important part: A picture in the head of every page:

Assuming we’ve got the following structure in our sitemap:

As you can see, this company has two slightly different offers on their site. Due to that, the boss wants to have different pictures that match the two topics. Easy, you might say, just add a block in the header of each page – until you notice that there are quite a few pictures & videos and thus lots of pages. Still easy you might say, why not create two page types and use the page type defaults to manage these pictures? Well, you could do that but using a page type for that feels wrong and sometimes it’s not that clear that you need two different pictures.

Silly story short: We want to specify a picture for “Business 2 Business” which is used on that page as well as all its children and we also want to specify a picture for “Funny Things” and its children.

Use an attribute from parent pages

We’re going to use an attribute to assign a picture to these two pages. If you’re logged in, open this page on your site: /dashboard/pages/attributes/. At the bottom, select “Image/File” and hit “Add”. Enter “header_pic” for handle and “Header Picture” for name.

Next, go back to the sitemap /dashboard/sitemap/full/ and click on “Business 2 Business” and then “Properties”. If you switch to “Custom Attributes” and scroll to the bottom, you’ll find our new attribute. Click on it and select a picture of your choice. Save everything and do the same for the second page “Funny Things”. Now that we’ve assigned the two pictures to our pages, it’s time to do the coding.

Fetch attribute from parent pages

This step might look slightly different depending on your theme but should be farily easy to adapt with a basic understand of HTML. The header area you want to replace with the picture selected in the attribute is mostly likely found in elements/header.php of your theme. In my case, the part we have to modify looks like this:

1
2
3
4
5
6
7
8
9
10

<div id="header-area">
   <div class="divider"></div>
   <div id="header-area-inside">
   <?php 			
   $ah = new Area('Header');
   $ah->display($c);			
   ?>	
   </div>				
   <div class="divider"></div>
</div>

Looks have a look at the comment code that replaces the code above:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<div id="header-area">
    <div class="divider"></div>
    <div id="header-area-inside">
        <?php
        $nh = Loader::helper('navigation');
        $ih = Loader::helper('image');
 
        $c = Page::getCurrentPage();
 
        // get list parent pages of current page
        $collectionTrail = $nh->getTrailToCollection($c);
 
        // add current page to array
        array_unshift($collectionTrail, $c);
 
        // loop through all the pages back to the home page
        foreach ($collectionTrail as $page) {
            // get attribute from page
            $picture = $page->getAttribute('header_pic');
 
            // check if attribute on page exists
            if ($picture instanceof File) {
                // make sure the picture isn't bigger than 800x300, cameras
                // these days take huge pictures
                $thumbnail = $ih->getThumbnail($picture, 800, 300, true);
 
                // print thumbnail
                echo "<img src=\"{$thumbnail->src}\" alt=\"\"/>";
 
                // stop searching through more pages
                break;
            }
        }
        ?>	
    </div>				
    <div class="divider"></div>
</div>

This code uses the navigation helper to get a list of all the parent pages and then loops through all of them until a page is found where the attribute with the handle “header_pic” has a valid file. In this case, we replaced the existing area but you can of course also keep it and add the code shown above as an extension.

The method “getTrailToCollection” is usually used to build a breadcrumb like navigation. There’s an autonav template called “breadcrumb” that does that as well but if you wonder how to create a breadcrumb navigation with code, here’s an example:

1
2
3
4
5
6

$nh = Loader::helper('navigation');
$c = Page::getCurrentPage();
$collectionTrail = array_reverse($nh->getTrailToCollection($c));
foreach ($collectionTrail as $page) {
    echo "<a href=\"{$nh->getLinkToCollection($page)}\">{$page->getCollectionName()}</a> ";
}

I hope you were able to get nice pictures with little effort into your site! If not, post a comment and I’ll do my best to get it fixed!

You might have read or heard that Google added PHP as a supported language to their cloud hosting platform App Engine. The official documentation is available here and gives you a lot of information to get started:
https://developers.google.com/appengine/docs/php/gettingstarted/.

If you’re a returning visitors to this blog, you’ll probably have noticed that I often work with a CMS called concrete5. It’s a neat CMS to work with for end users but also very powerful to extend for developers.

No surprise, I wanted to see if I could get concrete5 running on GAE for PHP. The documentation has clear instructions that help you to get a test environment ready on your local computer. You’ll need to install Python, PHP as well as the Google App Engine SDK for PHP, more about that here: https://developers.google.com/appengine/docs/php/gettingstarted/installing.

The Hello world tutorial explains almost everything you need to know to get concrete5 running, I’d recommend that you follow it too, it only takes you a few minutes to install everything and get the famous “hello world” output on your screen https://developers.google.com/appengine/docs/php/gettingstarted/helloworld. As you can see in this tutorial, Google doesn’t use a htaccess file but rather a file called app.yaml. This is where you specify your applications settings as well as redirect rules. The most important part is this:

- url: /.*
  script: index.php

This will tell App Engine to redirect all requests to index.php which is exactly what concrete5 does too, but normally using this:

RewriteRule . index.php [L]

However, there’s one more thing we have to take care of, there are static files that won’t be served correctly at the moment. Let’s have a look at the original .htaccess file first:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME}/index.html !-f
RewriteCond %{REQUEST_FILENAME}/index.php !-f
RewriteRule . index.php [L]
</IfModule>

Let’s just focus on the first RewriteCond, this will make sure that the RewriteRule statement is only executed if the requested file doesn’t exist. If /concrete/themes/default/main.css is requested, Apache will know that it exists as a real file and stops the rewrites process, but if /about is requested, Apache will forward that request to index.php. I couldn’t find the exact same functionality but with an additional handler, I was able to see resources like the pictures just fine. Here’s the complete content of app.yaml:

application: concrete5
version: 1
runtime: php
api_version: 1

handlers:
- url: /(.*\.(ico$|jpg$|png$|gif$|css$|js$))
  static_files: \1
  application_readable: true
- url: /.*
  script: index.php

When working on your local computer, you can easily use your existing MySQL installation but if you want to deploy your application to the cloud, things work a bit different. Unfortunately I wasn’t aware of that, I thought that if I only use very little resources, App Engine would be free. From what I can tell, you can run a PHP application for free but as soon as you want to store something in a database, you have to pay. There are two different options, first Google Cloud Storage which is a simple database without a lot of functionality, if you want to port an existing SQL based application, you might want to look at Google Cloud SQL which is a MySQL database running in the cloud. More about that here https://cloud.google.com/products/cloud-sql. Here are a few technical things that you might want to check out https://developers.google.com/appengine/docs/php/cloud-sql/developers-guide.

Since I wanted to move my concrete5 site concrete5.ch to Google App Engine, the fact that storage isn’t free, is a killer argument at the moment. I’d very much like to finish the experiment but I’ll wait till I have a project where I actually make some money before I spend money.

However, I’m pretty confident that I could get concrete5 running on App Engine.