How to customize the subject line in an automated email generated by the Drupal webform module

Sometimes examples save a lot of descriptive verbiage…

field label “First Name” – field key “fname” –
webform email custom subject line “Message from %value[fname]”

and

field label “Last Name” – field key “lname” –
webform email custom subject line “Message from Mr. %value[lname]”

unless the field in question is contained in a fieldset element! If that’s the case:

field label “First Name” – field key “fname” – fieldset field key “contact_info” –
webform email custom subject line “Message from %value[contact_info][fname]”

and then click “Save e-mail settings” and you’re done!

This information was derived from the last comment on this page: http://drupal.org/node/823408 after 45 minutes of looking through a bunch of dead ends. I hope this post is easier to find, digest and get back to what you were doing before you forget why.

Since reading Khoi Vinh’s Ordering Disorder: Grid Principles for Web Design I’ve been using grids – mostly just columns, really – to bring greater order to my designs. So far this new approach has been fruitful. A helpful tool in this regard is The Gridulator, which makes it easy to determine the dimensions of your grid and also download a graphic representation of the grid that you can use as an overlay in the above mentioned graphics programs while you are working out the details of a site design.

However, even if my idea is pretty nailed down in the sketching and graphic-editor stage, the act of actually building the site with HTML + CSS always presents new problems and solutions. Part of this is due to my clients not providing all of their content (or even knowing what it will be) until I’m at that stage. Another part of it is that laying out website designs in a static graphic state makes it easy to overlook some aspects of the site.

For these reasons and others I find myself doing a lot of actual designing from within the browser, either via Firebug or just a lot of trial and error with different properties in the code. Page structures in HTML + CSS can get complex fast and it can be tricky to stick to your grid if you aren’t always keeping it in mind. It would be helpful to have an easy way to overlay your grid over the web pages as they are built, adjusting the CSS properties until they are absolutely perfect. Or at least pretty damn close!

One recent weekend I had a freelance project that I wanted to avoid and so I determined that I would focus on this grid overlay problem and see if I could build it better and smarter. Figuring out this grid problem was a lot more important than working on a project that I would get paid to work on. I’m sure you can relate to the wacked-out sense of logic that leads to such decisions.

The result of that ridiculous procrastination was the initial version of what I am calling The Heads-Up Grid. It was actually looking good enough to share with others at that point. A friend suggested I post it on Hacker News to see if anybody would find it interesting. I did just that and got one comment from somebody that suggested I use JavaScript to generate the HTML elements, simplifying the necessary setup to get the grid working. They even gave me a bit of code to show how easy it is to do that with jquery. Once I saw that and understood how it worked, I really went to town!

The somewhat-final result is a fairly easy-to-use web page grid overlay. It has some nice features:

• simple settings
• vertical grid with columns and gutters
• horizontal or baseline grid that can be vertically adjusted
• on/off button displayed in top-right corner
• set grid to be on or off on page load

Please give The Heads-Up Grid a try. I hope you find it useful. I would love to hear feedback about it being useful or if you have some ideas about how it could be better.

1. Have a WordPress website up and running
2. Install the NextGen Gallery plugin
3. Install FancyBox the old fashioned way or as a plugin
4. Read this post about Facebook Open Graph WordPress Integration to learn about adding proper Open Graph meta elements to the header of your site.
5. From your WordPress admin pages go to Gallery > Options > Effects
1. JavaScript Thumbnail Effect: Custom
2. Link code line: rel=”gallery”
6. Then go to Gallery > Options > General Options
1. Actiate Permalinks: YES and define a slug.
7. Then go to Gallery > Options > Gallery
1. Show ImageBrowser: YES

The trick with getting NextGEN Gallery to both display your image galleries large images as FancyBox overlays and create unique pages with URLs to display each individual image is to enable the ImageBrowser mode but then alter NextGEN Gallery.php template so that the FancyBox (or other overlay solution) code is used regardless of the “Show ImageBrowser” setting.

With the above settings in place, backup a copy of the NextGEN gallery plugin files from your web server.

/wp-content/plugins/nextgen-gallery/

Then navigate to following file and open it with your favorite text editor.

[YourDesktop or wherever]/nextgen-gallery/view/gallery.php

Scroll down to the part where it says “Thumbnails” in comments. This is the loop that outputs the thumbnail grid that displays your embedded NGG gallery on the page. Find the line below:

<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>"
<?php echo $image->thumbcode ?> >

and change it to:

<a href="<?php echo $image->imageURL ?>" title="&lt;div style=&quot;float:left;
width:70px;&quot;&gt;&lt;iframe src=&quot;http://www.facebook.com/plugins/like.php?
app_id=YOUAPPIDNUMBERHERE&amp;amp;href=<?php echo urlencode(get_permalink()) ?>%2F
YOURGALLERYSLUGHERE%2Fimage%2F<?php echo urlencode($image->image_slug) ?>&amp;amp;
send=false&amp;amp;layout=box_count&amp;amp;width=50&amp;amp;show_faces=true&amp;amp;
action=like&amp;amp;colorscheme=light&amp;amp;font&amp;amp;height=60&quot; scrolling=
&quot;no&quot; frameborder=&quot;0&quot; style=&quot;border:none; overflow:hidden;
width:70px; height:60px;&quot; allowTransparency=&quot;true&quot;&gt;&lt;/iframe&gt;
&lt;/div&gt;" <?php echo $image->thumbcode ?>  rel="gallery">

Save gallery.php and upload to your webserver. If you have the OpenGraph meta elements in place you should now be able to navigate to a NextGEN Gallery on your site, click on a thumbnail and see something like this (right):

This is an individual Like button, allowing your visitors to “Like” specific images within a gallery. Now, it doesn’t work perfectly. Even though you are linking the Like button to a URL that is specific to that image, in my experience Facebook still grabs the first image from that gallery for the thumbnail displayed on the individual’s Facebook Wall. And it seems like the link from Facebook will take visitors to the gallery page of the specific image. Again, this is odd and shouldn’t be, but Facebook is doing a lot of magic here, so who knows why it isn’t working perfectly. The important thing is:

1. Your visitors can Like individual images.
2. If visitors see a link to your image on Facebook, clicking the link will take them to the gallery that contains the image in question.

If you get this successfully working to fulfill your needs, be sure to keep a backup of your gallery.php file. Every time the NextGen Gallery plugin is updated this file will most likely get overwritten.

Fig. 1: Default WordPress Admin Bar

At least since WordPress released version 3 of its open source website CMS it has included a new feature called the “Admin Bar”. This Admin Bar is a menu bar displayed at the top of your WordPress site’s public-facing pages when you are logged in to your site. It is a handy way to move back-and-forth between your public pages and your site administration pages. (see fig. 1)

Sometimes this isn’t a good solution. Especially if the navigation on the public site is at the top of the page with fixed positioning. In that case the admin bar lays over the site’s actual navigation, making impossible to use while logged in.

Fig. 2: Example of Admin Bar as a Sidebar

I haven’t seen a lot of discussion online about how to customize this without installing another plugin. After attempting some tweaks by manipulating the CSS with Firebug it became apparent that this Admin Bar could easily be styled by simply adding CSS rules that apply to the end of your theme’s stylesheet.

On a recent project I developed some CSS style rules to add to your site theme’s style.css file. These styles will transform the long, horizontal admin bar into tall sidebar. This probably won’t work for a 1024px-wide screen, but for many widescreen laptops and displays this should work well.

It still has the default WordPress admin look so I figured this little bit of CSS might be helpful to others. Below is the CSS that I used to make the Admin Bar appear as it does in fig. 2.

/* WordPress Admin Bar Styles */
div#wpadminbar {
    width:120px;
    min-width:120px;
    height:100%;
    background:url('/wp-admin/images/menu-shadow.png') repeat-y top right #737373;
    border-right:solid 1px #999;
}
div#wpadminbar ul li {
    width:100%;
}
div#wpadminbar .quicklinks > ul > li > a {
    border-width:0 0 1px 0;
}
div#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar ul,
div#wpadminbar ul li.menupop ul {
    z-index:1000;
    margin-top:-28px;
    left:114px;
}
#wpadminbar .quicklinks .menupop ul {
    border-top:1px solid #DFDFDF;
}
div#wpadminbar div#adminbarsearch-wrap {
    display:none;
}

I make no guarantees, but do let me know if this worked for you or if you see any problem areas.

The cover design looks AWESOME.

Well, there’s good news. It’s not as slick as Hulu, but YouTube does provide some options on their embedded player. Most importantly there’s an option to specify a custom starting point for any embedded video. Here’s the parameter:

start

You can use this parameter by adding it to the source URLs in the provided embed code. For example, if I wanted to start my embedded video at the 1:12 mark, the YouTube embed code would look like this:


<object width="656" height="517"><param name="movie" value="http://www.youtube.com/v/tqXJzZ_T8kg?fs=1&amp;hl=en_US&amp;rel=0&amp;start=72"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/tqXJzZ_T8kg?fs=1&amp;hl=en_US&amp;rel=0&amp;start=72" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="656" height="517"></embed></object>

And the result will be the following:

You’re welcome!

Troy Sobotka

He makes some good points, but the last half of his post is a lot of alarmist speculation. The obvious answer to improving Gimp is to contribute to its development. Complaints about difficult developers sounds like a bunch of complaining. With any open source project you have to earn the respect of the senior developers through consistent work, usually the not-so-exciting kind. With any open source project there are more users than developers and certainly more users suggesting ideas than making any attempt to squash bugs, write documentation or provide objective and helpful feedback. Opinions and assholes.

Anyway, I left a LONG comment today and wanted to duplicate that comment here. The only thing I should have added is a need for Gimp to continue improving color management and that’s why I just said it. Anyway, here’s my comment:

I’m a professional graphic designer. I use Photoshop and Gimp at a very high level of proficiency. Just to point out where I’m coming from. I like Pshop and Gimp for their different strengths, but some of the above arguments are wrong. Gimp certainly has room for improvement, but anyone that actually used Photoshop in 1996 knows that Pshop itself has come a LONG way in 15 years.

I would like to point out something that needs to be understood about the importance of bit-depth. I am constantly working with hi-res jpegs from a wide variety of professional photographers every day. You know how many of those files use 32 bits/channel? None. You know how many of those files use 16 bits/channel? None. They are ALL in 8 bits/channel. It’s certainly great to have the higher bit-depth options, but the importance of that capability in terms of graphic design/manipulating images for press is greatly exaggerated.

Also, CMYK color space in Photoshop is misused by graphic designers because most of them know very little about color space and/or color management. Some of us know (I don’t mean to offend anyone) but the majority of designers I have worked with are completely oblivious. I’ve even seen creative directors explicitly instruct their designers to select “discard color profile” when confronted with the “What should I do?” dialog in Photoshop. The need for CMYK color space, though useful and great, is also greatly exaggerated.

I also think the complaints about the UX are very subjective and usually only illustrate how little effort the commenter put into learning about and using the Gimp.

Two things that would greatly improve Gimp and many people’s impressions of Gimp are:

• better image scaling/anti-aliasing algorithms
• layer groups and layer styles

Those two things are certainly complex, but if they were implemented, and it sounds like they will be soon, I would be extremely satisfied with Gimp’s capabilities.

I think it’s healthy to critique software, but the Gimp rarely receives praise for its remarkable capabilities.

Gcolor2 is an excellent and simple little tool for web designers and developers running Linux. It has a dropper that can select a color from anywhere on screen and it describes each color in hexadecimal as well as HSV and RGB parameters. You can even keep a list of saved colors if would like.

However, the one shortcoming of the application is its bronze-age icon. It looks like it would be right at home on any ’90s-era desktop. See for yourself:

Needless to say, it looks awkward in the context of any contemporary desktop. It also lacks a nice clean edge, giving it jagged silhouette.  For this reason I opened up  Inkscape one night and created a new icon for Gcolor2. I really think the “drawn with a crayon” look was a ’90s style, so I abandoned that approach and recreated the tri-color cube as a more contemporary and clean-edged glowing box:

I think this a good solution. It’s not a complete departure from the original design but it is a refresh that will hopefully look great on the latest desktop systems. I have tried to submit it to the Gcolor2 project, but there hasn’t been an update since 2005 and none of the developers seem to have time to respond to my proposed new artwork. Today I submitted a patch and included the new artwork as a PNG and SVG files. You can certainly go there to get them, but you can also download the files here if you’d like to update your own desktop:

Download my 2010 version of the Gcolor2 icon as SVG

Another great application for working with colors in Linux is called Agave. It generates color schemes based on various color relationships like complementary, triadic, tetradic and analogous. Just give it one color and it will give you other colors according to the relationship type you specify. Fortunately it already has a very nice icon!

Sound Recording (Phonogram) Copyright Symbol

A friend was looking for the circle-P character to include on the jacket design for a musical recording. I was surprised to discover a glyph/character that I wasn’t aware of. We weren’t even sure what this symbol meant in relation to the copyright symbol. Turns out this symbol, the Phonogram Copyright Symbol or Sound Recording Copyright Symbol, protects the copyright of the sound recording itself as something separate from the written music and lyrics. Good things to know!

Regardless, this character can now be found in my ever-growing HTML Character Code tool. Enjoy!

Needless to say, my character chart now includes decimal and hexadecimal/Unicode references for the characters in the Polish alphabet.

HTML CHARACTER CODES