Jeremy Casson - An Architectural and Historical Journey Around Europe
Drupal in the Jungle
1. Drupal in the jungle
Redesigning a Web site for a
Remote Wellness Retreat, On Site!
By Malcolm van Delst
2. Talk Map
1. Intro
2. Who I am
3. Project, intro
4. Process
a. Research, project and site orientation, project planning
b. Design and development
i. Setting up development environment
ii. Upgrade from 6 to 7
iii. Design and development
5. Key modules and other tools
6. Workshop content type
7. Glossary
3. 1. Intro
Aloha! I've just spent 6 months at a remote Hawaiian wellness retreat redesigning and
updating the retreat's Drupal 6 web site. I will present a case study of this project that
covers:
•upgrading a fairly simple but large site from Drupal 6 to 7
•including
• new architecture and
• new design
• mobile device compatibility
• different home pages for local and remote audiences
• building a class calendar with options for cancellations and changes on a per day basis, that is easy
for a non-technical administrator to use
• module upgrading
• encrypted forms to accept credit cards
•working from loose specification and design documents.
•I will discuss some of the challenges presented by the environment, like spotty internet
connections, moist and salt-permeated air, and working with a volunteer team who's
members change continually, and who's members have varying degrees of technical
knowledge and experience.
4. 2. Who am I?
•I make
communication tools for awesome clients.
•Mainly
freelance since about 2000, though maybe not anymore.
•Consulting,
design, direction and development.
•I work for
people and projects I support. This usually means creative, challenging
work and/or projects that are good for humans and their environment.
•Regarding
Drupal, I’ve worked with the software since 2005. My first project was
helping port GranvilleIsland.com, with Agentic.
•I’m often a
one-lady show, or, working on small teams in a loose front-end dev
capacity.
5. 3. Project, intro
•Craigslist ad
•My pre-
project status:
• Wellable.ca (Wordpress farm – templated sites- for the wellness industry).
• past client, Massage Therapy Assoc. of BC, asked me if I wanted to provide
low cost sites for their members. I thought doing a Wordpress farm would
be perfect and continue the good times we had. I was wrong!
• Building a business is haarrrdddd work!
• Hawaii for 3 months to rebuild a Drupal site for a wellness retreat: "perfect!”
•client had
graphic designer, content writer/editor and php guy to help
•Drupal 6 site
•new site was
designed
6. 3. Project, intro (cont.)
Project (cont.)
•*Home page, and the Workshop display page were designed
• only had paper and low res pdf versions of these designs due to a computer
crash
• Architecture *changed several times throughout the project - is
this something everyone experiences? *Menus/architecture have
to be malleable. - Malcolm, make note of this and keep in mind on
next project!
•PHP guy was also the centre’s (Visual Basic) database programmer. He
had made a navigation block prior to my arrival. We used that, but he
was mainly preoccupied with his own work and didn’t have a lot of time
to help with web site tasks.
(…c0nt.)
7. 3. Project, intro (cont.)
Project (cont.)
•The centre was in the midst of organization rehaul,
• founder/ED stepping aside and a new ED stepping in
• Accounting systems (and database) being overhauled
• Shift to a more business-like mode of existence, while remaining a US
registered non-profit.
Web sites:
•http://kalani.com - existing
•http://beta-kalani.com - new
8. 4. Process
a. Research, project and site orientation, project
planning
b. Design and development
i. setting up development environment
ii. upgrade
iii. design and development
9. 4. Process
a. Research, project and site orientation, project
planning
• [TECHNICAL] Review/research:
• existing site's modules to see if they have been upgraded for D7
• how to upgrade
• twitter was great - DUG was great - Dale and Renee suggest installing and setting up D7 site, then
migrating content, using Migrate module, into new site; also talked to original site developers
• mobile and mobile tourism sites - want to do mobile first - twitter and Gregory Heller
• existing site and client notes with regard to possible structure and content presentation
improvements; ie. views, grids for room display, weekly calendar, etc.
• sales stats with regard to target market
• 33/33/33 split between guests, workshop participants and (including payment and labour provided)
volunteers
• Google Analytics data
• interesting that there was such heavy Mac/Safari usage:
• Browser use, across mobile and desktop
• 35% of visitors use Safari
• 21% IE (mainly IE 8 and 9; 10% 7)
• 22% Firefox
• 18% Chrome
10. 4. Process (cont.)
a. Research, project and site orientation, project
planning (cont.)
• (set up Wordpress site for Puna Music Festival)
• [T] GIT set up attempt
• [T] Set up local and remote installs of drupal 7 to familiarize myself with
the processes - I had never worked with Hostgator nor D7 before
• [T] got beta-kalani.com url on new account – 2 accounts under the
kalani.com url made it difficult to set up beta.kalani.com on newest,
development account.
• [DESIGN AND ARCHITECTURE] Review site architecture with Marketing
Coordinator
• [PROJECT ORGANIZATION] Write project plan
• [DA] Create site map (tree structure) from flip chart
11. 4. Process (cont.)
a. Research, project and site orientation, project
planning (cont.)
• [PO] discussion with client - doesn't want to do mobile first
because desktop site is most necessary
• [T] Review migrate module
• [T] Watch screencast re. technical aspects of d6 to 7 migration
• [T] Using the migrate module seemed difficult and unnecessary for
this site, which, though largish, was pretty straightforward so
instead chose to copy live site to dev server, and upgrade that to
D7.
12. 4. Process
b. Design and development
i. Setting up development environment
1. [T] Pull down existing d6 site to laptop (localhost); db with
phpmyadmin - cannot install because it's "too big"; download
and install back up and migrate – doesn’t work either
2. [T] troubleshoot mysql errors
• On Mac, use Applications/Utilities/Console
1. [T] complete db import on laptop
2. [T] review d6 install
3. [T] move localhost install to remote:
• move files (ie. Sites/name-of-folder-drupal-install-lives-in) - via ftp or cpanel
• export/import db,
• adjust settings.php file,
13. 4. Process
b. Design and development
i. Setting up development environment (cont.)
6.[T] move files from kalani.com to beta-kalani.com
• search and replace file paths on sql file
• back up existing db before uploading new one
• error message "Notice: unserialize() [function.unserialize]: Error at offset 2
of 131 bytes in variable_initialize() (line 943 of
/home/kalani/public_html/beta-kalani.com/includes/bootstrap.inc)." -
research error - no solution - restore old db and start again,
• contact hostgator re. php globals – they had to turn on
• reverse db, clear caches, run update.php, re-upload db with paths reset,
• install variablecheck module (update.php, clear caches) and use to address
variables error - success!, finish removing "kalani6" from paths in db and
upload,
14. 4. Process
b. Design and development
iii. Upgrade from 6 to 7
On localhost:
1.[T] upgrade all modules to most recent d6 versions
2.[T] turn off modules
3.[T] upgrade core from 6 to 7
4.[T] upgrade modules
• troubleshoot xml sitemap upgrade errors
• search and replace "/drupal/sites/default" with "/kalani6/sites/default"
on db and reload
• update views - add fields which haven't imported with the upgrade,
adjust filters - press and events views
• images not showing up in press view - review D7 image handling
1.[T] review pages, menu by menu, for issues after upgrade
15. 4. Process
b. Design and development
iv. Design and development
1.[PO] redo architecture per marketing coordinator, Drew
2.[T] install Omega and create sub theme
3.[T] review Omega functions
4.[T] download and install modules on local site,
5.[PO] site description document
• decide to use design mockup and existing site as site description document.
Maybe not the best decision, but writing those documents is just not my thing.
1.[DA] update site architecture doc
2.[T] remove migrate module
3.[T] install node sym links (to create duplicate menu items with
different page aliases)
16. 4. Process
b. Design and development
iv. Design and development (cont.)
9.[DA] design secondary pages, using graphic designer, Jai's home page
design
10.[DA] research how to turn Jai's design into a mobile version
11.[T] add content from Cameron, content writer's, docs
12.[DA] work out path strategy - path auto still has issues -
http://t.co/Se8taFWp, so set paths to be only 2 menu levels deep - in the
end, we just used page titles as paths instead of menu based paths
13.[DA] [T] adjust blog categories per Cameron - used Term Merge
module
14.[T] create glossary content type and view (using Drupal's default
glossary view, and sorting alphabetically)
17. 4. Process
b. Design and development
iv. Design and development (cont.)
15.[T] set up delta/contexts (templates) for local and distant homepages,
16.[T] install and configure ip reading (ip geolocation and smart ip) modules
– to serve local or distance home page - register for key and input,
17.[T] push work to remote site
• major issues - Administration menu bar disappeared, Omega sub theme stopped
working, links to images stopped working, seems that permissions for images changed
so that going directly to image in url gives a Forbidden, research "Forbidden" message -
server issue? - check apache log - apache is denying drupal access to many files
• apache error “[client ::1] client denied by server configuration:... “ returned after
updating to OS 10.7.4.
• Fixed by changing the “Allow from 127.0.0.1” I added to the sites/.htaccess file to
resolve the issue the first time, to “Allow from localhost”.
15.[T] convo with Pathauto creator re. menu paths for path auto - install DEV
version, and set menu path
18. 4. Process
b. Design and development
iv. Design and development (cont.)
19.[T] theme headers and home page
• home page slideshow:
• taxonomy to tag content for home page
• add block to home page,
• add 2 dummy slides, configure fade, enable and test controls to see what can be rethemed to create numbers at
bottom of images,
• add "Slideshow Order" field to Workshop content type; add sorting via this field to Featured Programs
(slideshow) view,
• trying out video slideshow extras – don’t use
• configure pagers
• install exclude node title module to remove home page title,
19.[T] research mac not opening .gz (site back up files)
• attempt to use Unarchiver (install and test) - end up changing backup and migrate settings to
".zip" instead of .gz
19.[T] Recent posts block - how to deal with images - review how they are added and
options for displaying inline images smaller
20.[T] setting up Upcoming Workshops - troubleshooting Views paths not working - find
workaround; update Workshop path aliases
19. 4. Process
b. Design and development
iv. Design and development (cont.)
23.[T] create custom date format and setting up grouping of Upcoming
Workshops view
• *after making a custom date format (admin/config/regional/date-time/formats/add – it’s
easy via http://www.php.net/manual/en/function.date.php!), don't forget to add it to your
system at admin/config/regional/date-time
23.[T] home page quotations: views-block and content type
24.[T] menu: client wanted exact functionality - PHP guy had already built a
module to do it. I did some basic research re. doing what client wanted with menu
views; menu minipanels and om maximenus - both White Screened the site ,
though the white-screening proved to be the result of a php/server error; not the
result of either of the modules - tried Suckerfish menu - same as Nice Menus - tried
Context - sort of getting there - back to Nice Menus and jquery rollovers, review
jquery options - left to finish rest of site
25.[T] left sidebar features: create taxonomy tags and view, create image
crop/resize dimensions and functions (at admin/config/media/image-styles), add
Sidebar Tall fields to content types
20. 4. Process
b. Design and development
iv. Design and development (cont.)
27.[T] Workshop pages - context? Go with simple cck blocks - wsod upon enabling
• increase php limit in php.ini to 192mb, uninstall d6 modules (dormant modules)- getting lots of
errors, unzip d6 cck modules, uninstall others, check error logs, create my.cnf file and up max
packet size - doesn't fix - google, attempt to install coder module and address dead cck modules,
thinking they might be reason - cannot install coder - google - uninstall Quotations module -
allows me to install cck blocks module, but stii cannot install panels - google, http://
bogdan.org.ua/2008/12/25/how-to-fix-mysql-server-has-gone-away-error-2006.html
• drupal 7 wsod upon enabling module, removing modules from sites/all/modules and running
update.php brings site back – CREATED my.cnf file in MAMP/conf/my.cnf. Set permissions to read
only (otherwise MAMP will ignore it), add “[mysqld] max_allowed_packet = 128M”. Increase until
error goes away. Can also try adding “wait_timeout = 600” and increasing until error goes away,
if you need.
• Changing parameters in my.cnf file - quit Mamp, instead of just stopping/restarting servers - file not
being read because permissions allow "everyone" to write to it - change permissions - re-enable
modules - problem solved
• set up sidebar blocks for workshop pages - enable cck blocks, adjust workshop fields, add pic
field, adjust displays to move fields to sidebar blocks, add blocks and configure - facilitator fields
need to be grouped AND editor must be allowed to add several facilitators to a workshop - install
field collection module, set up field collections and blocks for left sidebars of workshops,
• create page-room-teaser tpl file to add Learn More link to rooms' grid
• use "Integer" field type in room field collection, so I can add $ prefix
21. 4. Process
b. Design and development
iv. Design and development (cont.)
28.[T] set up Weekly Calendar view- "Calendar plugin is missing" - need to set up
specialized date fields for D7- add specialized field to Event content type and test view,
add filters,- block working on non-templated view, but filter is not; filter working on
templated view but block is not -
29.[T] theme workshops pages, add facilitator names to main page area - cannot parse
out names from facilitator field collection -
• research, find module patch & apply- adjust field display to show only facilitator names, finish
less framework setup, theme workshops page,
28.[T] theme home page - site is squished in IE - research - adjust settings from "Narrow"
to "Normal", set up Footer map and theme,
29.[T] footer menu: try a variety of things, but none look good nor allow for easy theming
- menu mini-panels, footer site map, Site Map, - settle on footer map module
30.[DA] [T] sketched out plan for Accommodations page as it relates to Workshop pricing
grid, looked at Relations and node reference (references for D7) modules, create list of
fields for Room content type,
31.[T] create Room content type, fields and field display,
32.[DA] [T] add room reference field to Workshop and configure, look at existing
workshops to see what kind of options they need,
22. 4. Process
b. Design and development
iv. Design and development (cont.)
35.[T] adjust fields for Workshop and display of fields - create field collection for Rooms and
pricing, create template file and adjust for teaser view of Room content type, theme,
36.[DA] [T] design and theme Workshop Workshop Fees section, adjust template file and css,
change text on Read More link,
• per Marketing Coordinator, add Double/Single Occupancy and pre/post table comments and style,
35.[T] make rooms and theme
36.[T] grid layout for Rooms on Workshops' pages: field collection, node reference
37.[DA] [T] create and design workshops listings page
23. 4. Process
b. Design and development
iv. Design and development (cont.)
40.[T] Weekly Schedule - how to create it? Create Class content type, with
default fields and "Cancellations and Changes" fields to overwrite default
fields, if they are present
•Class content type: add date type
• max timeout error on repeating date field - repeating dates still buggy in D7
• look at using Google calendar, but client wants class schedule to look like site -
doesn't like look of Google calendar
• research contextual filters
• more timeout errors
• try date repeat instance module but it breaks site
• try to add popups, but wonky - cannot access controls with Rubik theme and
admin menu for popups throws errors - abandon
•theme Weekly calendar
24. 4. Process
b. Design and development
iv. Design and development (cont.)
41.[DA] [T] organize Resource Centre (blog), following structure of
another popular wellness retreat’s resource centre section
• create view that uses taxonomy, not content
• design and theme section home page, sub-section home pages and blog
post pages
41.[T] research ways to import/export content only -node export
module is buggy; could only get it to export/import one node at a
time - *someone suggested RSS feeds, but noted that they are not
simple to set up
42.[T] theme pager for resource centre (blog) pages
43.[T] checking user permissions for editors - * did I remake or did
they come over with import? (they came over)
44.[DA] [T] design and theme resource centre pages
45.[T] set up context for resource centre
25. 4. Process
b. Design and development
iv. Design and development (cont.)
47.[T] SEO modules: Seo Compliance Checker, SEO Tools andSEO
checklist; add AddThis code to a block and add to pages (way faster
than using AddThis module);
48.[T] install Boost to help with site speed/Weekly calendar issues
49.[T] install Path Redirect Import module to help bring over all paths
from old site to new, grab csv files from live site for path redirects and
url aliases - compare paths to new site, adjust new site's menu system
and paths to architecture-v4 document
50.[T] review all pages and notate path issues on spreadsheet
51.[T] review url aliases and paths and map to new site via spreadsheet,
test import ability - it works!
52.[DA] [T] create Access Denied page and add login block to page,
remove Add This links on Page not Found and Access Denied pages,
26. 4. Process
b. Design and development
iv. Design and development (cont.)
53.[T] check rest of wysiwig styles and adjust,
54.theme accommodations and rooms pages
55.[T] update Reservation form with encrypted fields, add encrypted
credit card fields to Application form and theme, set up ssl certificate
per Hostgator (we got it free with business acct; otherwise, you might
have to pay),
56.[T] create contexts to put sidebar menus on different sections
57.[DA] [[T] review Workshop forms, adjust and add descriptions, make
field groupings collapsible, to reduce clutter/aid usability,
58.[T] install secure pages and apply core patches to support secure
pages - backup site beforehand - backup and migrate not working -
research error - update back up and migrate to most recent version,
works - back up site - getting redirect errors - contact hostgator,
27. 4. Process
b. Design and development
iv. Design and development (cont.)
59.[T] test reservation and volunteer application forms, down/upload
volunteer forms to beta-kalani.com
60.[T] troubleshooting path auto issues to no avail
61.[T] adjust Workshops' rooms grid for IE
62.[T] remove legacy (no longer in use) pricing fields from Workshops'
admin pages
63.[T] issue with php globals and inability to run update.php - contact
hostgator - they fix
64.[T] turn off management and navigation blocks for editors,
65.[DA] [[T] design sidebar menus: add contexts for each section
• design and theme sidebar menus
• Adjust background image for charitable programming section which uses both one
menu and two menus in places,
28. 4. Process
b. Design and development
iv. Design and development (cont.)
67.[DA] [[T] adjust colours and size of leaf background on sidebar menus,
68.research navigation best practices,
• make top 3 nav items clickable,
• add Contact and Reservations to top header,
• sit with Jim as he navigates site and make notes,
• [DA] [T] go through top menu and add pages,
• fix broken links and
• make names of pages consistent with menu items,
67.[T] review site in IE - menu adjustments for IE, theme
Contact/Reservations in header,
68.[T] adding menus to individual blog pages
• detangle conflicts between community section and resource center contexts'
blocks
30. 6. Workshop Content type
7. Glossary
[T] Technical
[DA] Design and architecture
[PO] Project organization
Notas do Editor
[T] GIT set up attempt - got SSH enabled; lots of back and forth with Hostgator over 4 days, at which a Sr. Engineer told me we needed to upgrade our plan in order to host a repo. Original Kalani site developer said otherwise, but by this time, I just wanted to move on. (Tried Gitolite later, but also gave up)- abandoned - whoever takes over site will probably not be able to use anyway. [T] Set up local and remote installs of drupal 7 (using Hostgator shared hosting, business account) [T] got beta-kalani.com url on new account, because client is apprehensive about giving me access to live site server to set up sub domain
install and test media elements html5 video solution - research for mobile: Video module might work better, but needs zencoder config - Video module plus JS Player not working; not sure why need video wysiwig solution: install and config Media module
I researched a bunch of responsive base themes. I’ve heard all the arguments for and against Omega – this site is pretty simple, so it seemed like a good choice.
Delta allows you, via the Context module to make duplicates of your theme settings for any context on your site. This gives you the ability for alternative layouts as a reaction in Context... </awesomesauce>