Error message
Custom templating Fields/CCK field output
The Drupal theming and templating possibilities are endless and once you get how it's done it's a breeze! I say once you get it, because you can have a hard time figuring out how. For the next version of my portfolio website, which I'm building in Drupal 7, I had a hard time figuring out how to override the HTML that was generated automatically by Drupal for a Fields (former CCK) field. I had a custom content type with a multiple value image field from Fields (the 'new' CCK in Drupal 7) plus some other more standard fields.
Working with the Views 2 module and creating some custom templates for the output I was able to generate my own clean and minimal HTML without all the extra div's and wrappers the Views Module can provide. There was however one problem, I could not figure out how to have the image field rendered without the div wrapper and field label divs. Here's what it looked like:
<div class="Custom-Div">
<div class="field field-name-field-photo field-type-image field-label-hidden">
<div class="field-items">
<div class="field-item even"><img alt="" /></div>
</div>
</div>
</div>
Now that's a lot of DIV! What I wanted to achieve was to loose all the extra DIV's and just have my Custom-Div containing all the image fields, like this:
<div class="Custom-Div">
<img ..... />
<img ..... />
..................
</div>
At first I thought this could easily be achieved with the Views templating possibilities, using views-view-fields.tpl.php to customize my output. For all fields that worked fine except for this Fields/CCK image field! Searching for options in other Views templates or writing out the raw query result via some custom code couldn't help me. Then all of a sudden I started realising I was looking in the wrong place! The extra HTML was generated because this image field was a Fields (CCK) field added to the content type. I found an article explaining this for the Drupal 6 CCK fields. So I started searching for the same info in my Drupal folders in the Fields section and voila!
Fields/CCK have a custom theme function for generating the field output! And it works almost similar overwriting this with you custom code. Even for single CCK fields. You can find the file field.tpl.php in the Fields module folder structure that comes with Drupal 7 core. Just copy this file to your theme folder, modify it to your needs and you're done!
If you want it to apply to only one certain field use the name of that field in the file name like field-[FIELD_NAME].tpl.php. Heck, you can even narrow it down to certain content types by adding field-[FIELD_NAME]-[CONTENT_TYPE].tpl.php to the file name.
Sometimes, the simplest solutions are the hardest to find.
2010 must-read starters
Happy new year and best wishes for 2010. And it'll be a promising year!
Here some topics you might have already heard of or read about on the web if you're into webdesign, development and all else that is front-end. If you haven't then it's reading time for you, because these topics really picked up speed in 2009, and I hope to hear and see more about them this year. So these things need word of mouth.
Scrollbars....hmmmmmmmm:
More and more I read blog post and articles referring to conventions we disliked in the past, but are currently turning around, or get more consensus. It does also come together with changing technologies like screen resolutions, internet connection speeds , etc. (ah..... progress) but it just feels like we're really getting into the next phase of the development of the web. Scrolling for instance, it was very important not to too far beyond the screen bottom with your important content, concentrate your important content above the 'fold', but no more: "It's ok to scroll"
- http://www.456bereastreet.com/archive/200912/dont_fear_the_fold_people_do_scroll/
- http://www.thereisnopagefold.com/
Bye bye IE6:
IE6 is out. Every day more people denounce it officially: "Bye bye IE6"! Now, visitors using IE6 get custom I-do-not-support-IE6 pages, messages blocks or only get to view the site in minimal boring visual style with barron IE6 css stylesheets. It got picked up by the big sites as well. It's a revolt! And I'm glad it's here.
Type:
Typography gets bigger and bigger. It seems you need a type of text replacement thingy on a website now. There are several ways, each with it's own pros and cons. As always, embrace it, use it wel but use it wisely and sparsely!
24 new ways:
And as allways at the end of the year, the excellent 24ways! Enough to catch up on.
How to get Drupal Views render-as-link-fields W3C compliant
Edit jan. 2011: The solution below is outdated. Views has been updated and so has my knowledge of Drupal in the past years. ;). There are better ways to solve this.
I love Drupal. What's not to love about it? The steep learning curve? Come on, better stay with Wordpress then you. For al you other people who took the 'elbow greased' plunge like I did, a tip on the Views module. The Views module in Drupal allows you to make your own pages, blocks, etc with the content you would like to have on it from the different content types. There is no limitation! And that's what makes Drupal so great and flexible. Recently however, I stumbled upon a spec on this immaculate module.
It has to do with the fact you can write out a field with Views and have it render as a link. When this option is selected, it generates exactly what it should do. However....., those fields get an alt attribute (version used D6.x - Views2.8), and that's not what we want on the A tag. The XHTML Strict 1.0 doctype does not like 'alt' attributes in the A tag. In the IMG tag, ok. So how do we get rid of this and have a strict compliant page? It's easy!
In Views there is a function that generates this alt attribute and the title attribute as well. It's render_as_link or render_link which is located in the file modules/views/modules/node/views_handler_field_node.inc. Together with some code in modules/views/handlers/views_handler_field.inc approx. at line 517, the alt and title attributes are generated:
$alt = $this->options['alter']['alt'];
$alt = strtr($alt, $tokens);
if ($alt) {
$options['attributes']['title'] = $alt;
$options['attributes']['alt'] = $alt;
All you have to do is take out the piece of code that's writing out the alt attribute. Save it and see the alt disappear on all those links on your site! There's a patch or it as well on the Drupal site. More info can be found there as well.
Pitchblond in Wordpress
Last year I did the design and development for the website of rockband Pitch Blond from the Netherlands. All in ASP, I decided to rewrite it and incorporate it into Wordpress.
This seemed to be the better choice, also for the future as the use of the plugins that are available online is great. Wordpress keeps impressing and surprising me, and it's very usefull not only as a blog cms but as a cms for sites as well!
Inspiration for doing this came from webdesignerwall.com as well. Credit where credit's due off course!
Take a look on PitchBlond.com and more importantly, take a listen to some of their songs.
Edit:
Pitchblond released a new album and decided to go for the web 2.0 choice with a minimal website and the use of Flickr, Hyves, Facebook, Myspace, etc. I'll post the design of the site on my portfolio in the future.
Recent comments