3. Jared Stoneberg I am a Drupal themer. (but I wasn’t always) I own and operate Stoneberg Design and Aioli Web.
4. Jared Stoneberg I am a Drupal themer. (but I wasn’t always) I own and operate Stoneberg Design and Aioli Web. I am active in the Seattle Drupal User Group and helped with planning for the PNW Drupal Summit.
18. CSS Class Changes adios clear-block! hello clear-fix ! New classes to control display .element-hidden .element-invisible http://bit.ly/hideinvisiblecss Classes are now easy on the eyes! block-user-0 -> block-user-login
19. CSS $classes is an array You can more easily manipulate the $classes variable
25. Template Files As a front ended tpl’s are my bread and butter There are some new tpl files- including html.tpl
26. Template Files As a front ended tpl’s are my bread and butter There is a new tpl file – html.tpl Template suggestions have changed Beware the double dash!
This is the story of Jared, a drupal themer.I started as a front end developer using HTML and CSS to make websites. I was really good at this, using clean markup and solid CSS. So, I am going to talk about theming in drupal. I am going to use my history of being a drupal themer as a rough outline for looking at how I have seen changes happen between Drupal 5 and Drupal 6. Then I am going to spend some time looking at some changes in Drupal 7 that will affect themers.
This is the story of Jared, a drupal themer.
This is the story of Jared, a drupal themer.So, I am going to talk about theming in drupal and will be touching on some changes we will see in drupal 7, but I am going to take a bit of a long way around to get there. I am going to use my history of being a drupal themer as a rough outline for looking at how I have seen changes happen between Drupal 5 and Drupal 6. Then I am going to spend some time looking at some changes in Drupal 7 that will affect themers. Lastly I would like to step back and use my story, this brief drupal theming history and the changes that we see in the upcoming release of drupal 7 as an opportunity to reflect on drupal theming in general and share a few of my thoughts.
I started as a front end developer using HTML and CSS to make websites. I was really good at this, using clean markup and solid CSS. I discovered Drupal just a few weeks before drupal 5 was released and started site building and theming with Drupal 5. So I built a couple sites and themed them strictly using CSS, …, in D5. It was painful. As I look back one of the most important things to note here is that I was theming Drupal without the ability to affect the output. This made theming very challenging and for me and ended up with me writing some seriously obtuse CSS to deal with achieving the desired designs. This is not the fault of Drupal,but rather highlights an important part of the development of a themer- maybe you could say a marker on the drupal themer learning curve- learning to controlling output.
A huge step for me came late one night on IRC when a very patient coworker taught me that I could in fact gain control over what drupal was doing by dissecting the variable in my node.tpl file called $content (via the node variable). This changed my world.
My coworker showed me that I could use a little thing called print_r($node) and find the chunk of output I wanted and then I could print that out all by itself. And I could wrap those bits in my own markup … with my own classes … and this meant I ended up with tpl files that looked like this:
Reading this tpl was really unpleasant, but at the end of the day I was really pleased because I could theme drupal, I was doing it!One last note on D5 because my soul still bears scars -Theming Views 1
This is what I look at when I am having a bad day to remind myself that things could always be worse…But good news was just around the corner…
Drupal 6 --- yea!I have been at Drupal for over a year and now we have a new version, Drupal 6! Wow, this version had some changes- I could now add regions to my theme in this new .info file which was super cool. This version saw the new contributed module Theme Developer- this was very helpful, kinda like a firebug for drupal. Preprocessing functions appear, but I couldn’t figure out how to use one for over a year. Around this time I discovered the Drupal Dojo and learned lots there, looking forward to bugging joshk on irc as he spent his Sunday afternoons tirelessly teaching.Template files started to show up in more places and I learned that I could simply override one by placing a copy in my theme and editing it there. <then some time went by> Then Views 2 and CCK were released for Drupal 6 and I actually started using D6 for client sites(remember that?). Also around this time I learned a trick to clean up those messy looking tpl files with all those verbose print statements.
The trick was to catch variables in my template.php file and assign variables there which I could just print in my tpl files which looked like this in my template.php file –
And now I could make a tpl file that looks like this! Much easier on the eyes, but essentially the same attitude towards $content – I was not printing it - anywhere. I was still setting up my own output, I was just being less messy about it. This is just a different- albeit less visually offensive- way to hack $content.Around the time I started using this cleaner method to make cleaner tpl files I would stare at this picture for hours trying to figure out wtf it meant…
I knew it meant something…..
But I didn’t know what.You can see at this stage my PHP skills are still quite rudimentary, I could not explain to you what a function was or what all these developers meant when they would say things like “just pass that to the theme_ function blah blahblah”Drupal 6 was indeed easier to theme with just css, but I still couldn’t do everything I needed. I did spend a lot of time with the ‘Display Options’ page on the content type administration page and learned that I could exclude fields here.
This is a good thing and allowed me to still keep $content intact in some instances when I only needed to place a few of the fields in other places, generally though I was removing $content from my tpl and printing fields myself to gain maximum control. With the advent of the theme registry I also learned a new mantra ‘Clear the cache’. Around this time I read an article by a talented themer at palantir named colleen that talked about something called sustainable theming.
One of the concepts being that you should avoid doing the very thing I was doing when I would replace $content because it would end up biting you in the butt. I had seen this myself when I would add a module and it would appear to not be working because it’s output would not show up. This is because it was putting its output in $content and I was not printing $content in my tpl. So, I started to grok the problem with the approach I was taking, but did not have an alternative.Also, many of my projects involve me theming and a developer developing and I can just tell them “just give me the stupid date field in this markup and I will do my CSS” This pretty much takes us to today. So I want to get on to what you probably came here to hear about – theming changes in Drupal 7.Now I would like to talk about Drupal 7.
For a complete rundown of the theming changes please visit this page on d.o – I am going to talk briefly about the things here that I think will have a significant impact on me as I work as a drupal themer.
Ahhhhtpl files
Show node—article.tpl.php when talking about the double dash. Do not mess with the $page_top and $page_bottom – they hold things like the toolbar and scripts that need to be added at the end… think of it like the $closure variable you might be familiar with- if you remove it you might see some strange things going on.
Show node—article.tpl.php when talking about the double dash.
So, this function is new. If you look in your core tpl files you will see it wrapped around things in places where in the past you would see print $variable now you will see print render $variable. Angie mentioned it this morning and talked about how it allows for more granular theming. In order to fully take advantage of this granular theming you need to take advantage of render() ‘s helper function – hide()
You can get in front of where you are rendering the $content and you can take things out with hide()
Themes now have access to alter hooks. It’s kind of a big deal.So, those are the d7 highlight. If there is time I can show a couple of these in action, but I want to take this story and tell you about a few of my conclusions…
I started using Drupal just at the time Drupal 5 was about to be released. I was immediately taken with the power of Drupal but was leery of PHP because it was completely different than where I was coming from. This apprehension is hard to understate as we push forward the vision to attract designers to Drupal. The Drupal community has made great efforts to become friendlier to the design community and the effects have been quite successful IMO. BUT, this point continues to be true and bears repeating- “PHP is scary for many talented and interested designers/front end developers”. I would like to point out that it is not just the Drupal community’s responsibility to make an effort in this area- designers must move outside of their comfort zone and try to learn PHP. But, Drupal is making an effort in this area and my opinion is that there is a cultural shift that has taken place to make it a priority to embrace and empower people for whom PHP is a challenge/scary/uncomfortable. The decision during core development to embrace tpl files to control output whenever possible is a great example of a tangible way that Drupal is making an effort in this area. As a front end developer I can look at a tpl file and see something that resembles the .html files I am used to seeing and working with, even if the if() and ‘print’ statements look foreign I can see markup that looks familiar and with each version of Drupal I see these tpl files controlling more and more of the different pieces of the page Drupal output. THIS IS GREAT! I also see a change in the way modules developers and maintainers are approaching this issue. When I started working with Drupal it was common practice for modules to output their markup directly in the .module and some even included inline CSS in that markup. This made overriding and theming very cumbersome. Today I find many of the modules I use providing /css directories with .css files in their packages and /template directories with .tpl files as well- some even help you create your own .tpl files for overriding output ( <3 VIEWS! ). THIS IS EVEN GREATER! I see this as a cultural shift within the community that is implementing self-imposed best practices that encourage module developers to spend time they otherwise would not have to make changes like abstracting their css and using template files that will empower the less PHP proficient themers and front end developers to more easily extend the functionality they are implementing. I think those developers making this effort deserve a round of applause as this is no small thing and is helping to change the notion that Drupal is not friendly to designers and front end developers. <applause> I also think the leadership in the community that persists in reaching out to the front-ender types by challenging themselves and the coders in the community also deserve a round of applause for their determination and consistency in being open to making changes that lower the barrier of entry for people like me. <more applause>
Remember this article I mentioned that helped the penny drop for me?Well, if you look down in the comments you will find this.
I also think the leadership in the community that persists in reaching out to the front-ender types by challenging themselves and the coders in the community also deserve a round of applause for their determination and consistency in being open to making changes that lower the barrier of entry for people like me. <more applause>
