I’ve recently blogged enthusiastically about Panopoly in the context of a simpler, lower cost and more “share the wealth” democratic path to powerhouse Drupal web app development emerging from the recent Denver DrupalCon 2012. And I’ve promised to write a series of articles on “using Panopoly as a starter kit for the rest of us” in the context of a responsive process and the creation of a responsive user experience. Well, with the recent release of Panopoly 7.x-1.0-beta3, there’s no time like the present to write the kick-off article.
So together with my fellow AWebFactory web developer compañero martindido (Martín Di Doménico) we installed the new beta3 version and here share our findings:
Installing Panopoly on your dev box
-
Grab panopoly
$ wget http://ftp.drupal.org/files/projects/panopoly-7.x-1.0-beta3-core.tar.gz
-
Unpack
$ tar xvzf ~/downloads/panopoly-7.x-1.0-beta3-core.tar.gz
-
link this release symbolically to permanent virtual host directory
$ ln -s panopoly-7.x-1.0-beta3/ panopoly
-
Ready MySql database and get site ready for install (we are making the modules directory writeable in order to automate the download and enabling of the Panopoly apps. Don’t worry we will fix that later)
$ chmod -R 777 sites/all/modules/ $ cd sites/default $ cp default.settings.php settings.php $ chmod 777 settings.php $ mkdir files $ sudo chown www-data files
-
Point your browser at the instance URL and install the Panopoly distribution
-
Select Panopoly distribution and click Save and continue
-
Enter database info and click Save and continue
-
Profile installs
-
Enter site and admin info and click Save and continue
-
Enable support for Apps; click Continue
-
The Select apps to install page appears; deselect Panopoly Search ( otherwise you will get an error Parse error: syntax error, unexpected T_PAAMAYIM_NEKUDOTAYIM … see issue http://drupal.org/node/1565996 )
-
Click on Install Apps
-
Panopoly Apps modules are downloaded and enabled.
-
Starting theme page appears, choose and click on Choose theme.
-
Confirm theme settings and click on Save configuration.
-
The Prepare Site appears. Click on Prepare your site.
-
The “Finished! Congratulations, you just installed Panopoly!” page appears, click on Visit your new site!
-
The HomePage Demo appears!
-
Fix permissions
$ cd sites/default/ $ chmod 644 settings.php $ cd ../all
-
Don’t let www-data (or apache http server user) have ownership or write permissions over modules directories
$ sudo chown -R username modules
$ find modules -type f -exec chmod 664 {} ;
$ find modules -type d -exec chmod 775 {} ;
Is it responsive “off the shelf”? Yes… (hint: just don’t select Bartik…)
When I have Stark or even Garland as the default enabled theme, things look great. Pretty damned responsive out of the box!
However, initially during the installation I had picked the Bartik theme, and it wasn’t at all responsive. Why? Because it isn’t designed to be (For example, something was screwed up with the images, since the main image actually gets bigger on the minimum breakpoint).
The solution might be to include Stark in the list of options presented during the installation of the Panopoly distribution (more inviting than Garland) and maybe exclude Bartik.
Making your life simpler: Just do it on Pantheon!
So even though there is something nice and free about being able to install Panopoly on one’s own box without any other kind of dependency, one’s life can certainly be made simpler by just doing a “single click” install of Panopoly on Pantheon, which is now open to everyone (you no longer need a key-code or invite to open an account). You can create a free account here: https://dashboard.getpantheon.com/register
Once you are logged in, you are taken to your Sites and Account page. Click on Add a site. Enter a name for your site, modify the suggestion for the Site Development URL if you wish, and click Continue. On the Spin Up a Site page, once your “Instant Drupal” site has been created, click Continue. At this point there are lots of choices, among them (scrolling down) are the options to start your site off with a Drupal product, including Panopoly (another option might be Open Academy, which is based on Panopoly). Click on the Install Panopoly button. The Setup a Site page is displayed, showing the various stages involved. Once you see “Pantheon site setup complete!” click on Continue.
You are now taken to the site Dashboard page. This is a complete development environment, including Development, Testing and Live instances. For the present let’s just check out Panopoly. (By default On Server Development should be Enabled, which is the setting required for Panopoly installation. If it isn’t for some reason, click on the Enable button.). Now click on the link to the Development Site, at the top of the right-hand column. You will be taken to the Panopoly installation profile page. Select Panopoly and click Save and continue. The core and contributed modules will be installed, including the main Panopoly module. Enter your site and admin info on the Configure site page and then click Save and continue.
On the Enable Support for Apps page we see a reminder at the top to the effect that “On Server Development” should be set to Enable so that the Panopoly Apps can be directly downloaded and enabled. Since we took care of this just a moment ago, just scroll down and click on Continue.
On the Select Apps to Install page, since we are on Pantheon, we don’t have to worry about anything, support is already configured for everything, so we just click on Install Apps to get all the apps. The modules are then downloaded, updates downloaded and the apps enabled.
On the Starting Theme page, DO NOT choose Bartik since that will override Panopoly’s built in support for Responsive Web Design. Click on Choose theme and then click on Save configuration to accept the default theme settings. Once the configuration options have been saved, click on Prepare your site so Panopoly can “do its magic”. Then click on Visit your new site!
For best results, we would probably immediately create a Stark sub-theme and enable it. For the present Click on the Adminisration Toolbox Icon (Upper left of your screen), then click on Administration > Appearance and click on Enable and set default for the Stark theme. Click on the main Drupal icon in the header or the Homepage Demo link.
There you have it, responsive web design goodness right out of the box with Panopoly! (make the screen wide, and then narrow it down, and you will see incremental changes in the images and box widths, as the layout also adapts to narrower breakpoints).
In subsequent articles, we will explore all the site building features we get with this awesome starter kit! In the meantime you might want to explore the Customize this page and Change this layout buttons.