Drupal

Twitter Issues On Pantheon?

Having trouble getting your Twitter feed working on Pantheon? Does it work locally but not in your Pantheon environments? If your Twitter solution uses PHP's http_build_query function (as does the Rise theme's front page), you're not going crazy. It's them, not you.

The http_build_query function takes an array and returns a URL encoded query string suitable for use by functions that might find query strings handy, like PHP's curl functions. By default, PHP uses the & character to separate query string parameters, but on Pantheon, this value is set to use the HTML entity & instead. If you try to pass a query string with & instead of &, it will fail.

Fortunately, you can override this value using  the third paramter of the call to http_build_query. For example,

http_build_query($my_params, '', '&');

But what if the call is in somebody else's code and you don't want to hack it and cause kitten-death? Well, there is still a potential solution. If you are not relying on the & output from http_build_query elsewhere on your site, you can globally override Pantheon's value with a setting in your site's settings.php file :

ini_set('arg_separator.output', '&');

That's it. No Twitter token regenerating, no hacking, no hair pulling. Just a one line fix.

North Texas Drupal Users Group - Sept meetup

Great meetup of the North Texas Drupal Users Group last night.  The new Addison Treehouse cowork / incubator space was good enough to host us.

First off Kyle Taylor showed off his efforts in integrating the (becoming standard) Bootstrap theme with the core Color module and LESS.  The lead Bootstrap maintainer, Mark Carver, is one of our members and was in house to answer deep Bootstrap questions.

Then Randall Knutson did a presentation on Static Drupal – Taking the Pain out of Drupal Hosting.  It's based on some work he's doing at Phase2, to improve the load times and security of Drupal sites. You can learn more from his blog post and download the Static module on drupal.org.

We're working on the what and where for the October meetup - stay tuned!

HTTPS is now a Google Ranking Factor

You may have noticed that when you use your web browser to do online banking or shopping, and it generally switches to HTTPS / SSL mode (with the little lock graphic) for added security.  Looks like Google wants to make that the standard for everyone soon. According to the Official Google Webmaster Central Blog

"Over the past few months we’ve been running tests taking into account whether sites use secure, encrypted connections as a signal in our search ranking algorithms. We've seen positive results, so we're starting to use HTTPS as a ranking signal."

When HTTPS mode is enabled, all traffic is encrypted between your computer and the web server. Which is generally a good thing, but does add a small performance penalty for the time it takes to encrypt and decrypt all the traffic.  Often this is done on non-ecommerce Drupal websites just for the user login and user editing pages, as most content is really not that security sensitive.  But with this announcement from Google, it's time to start thinking about switching your entire site over to HTTPS.

So, how to do that in Drupal? The complete process is too complex for the scope of this blog post, and you will need to make changes on both the webserver and the Drupal sides.  On the server side, you will need to install an X.509 SSL certificate and make some configuration changes. Many web hosts will greatly help with that process, including our hosting partner, Pantheon. On the Drupal side, the easiest way to enable HTTPS mode is by using the Secure Pages module.

Screenshot of Drupal Secure Pages module configuration

The Secure Pages module will not let you engage secure mode until the server is correctly configured to use SSL.  To best comply with the Google initiative, you should select Make every page secure .. and delete all the pages listed in the Pages box, so that every page runs in HTTPS.

Ironically, that Google blog post (and the entire website) is not running in HTTPS mode.

Google And Drupal : Alt and Title Tags for Images

Generally when you see an image on a webpage, the <img> HTML tag is being used on that web page to instruct the browser which image file to display and how.  The code looks like a little something like this (from this very page):
 
<img src="http://fireroaddigital.com/sites/default/files/frd-blog-alt-title-tags.jpg" alt="Squirrel using a video camera">
 
Simple enough, but what’s that alt tag?  
 
The alt attribute is used to help search engines and assistive technology such as screen readers for the visually impaired to understand the image.  Googlebots are getting smarter and smarter, but may not yet know that image is of a 1940’s film camera being operated by a 1940’s squirrel. Or that it might be an Australian spotted flying squirrel.  Or maybe it’s a muskrat.  I’m a human and I can’t even really tell what it is.
 
Sites like Google Images use this alt data to help categorize their collections of images, and the use of alt tags across your site is known to be one of the many Google search engine ranking factors.  So, not only is the use of the alt tag required to achieve HTML conformance, it’s good for SEO.
 
So how do we enable it on our Drupal sites?  Easily, of course.  First we make sure our Drupal site is providing a place for a content editor to enter the alt text for all images and that the resulting text is included in the resulting HTML code.
 
For an example, let’s look at the default Drupal content type Article. Navigate on your admin menu to Structure >> Content types, then under Article, click on manage fields.  If you haven't changed the default Article content type, it should look like this:
 
Figure 1- Screen shot showing Article content type fields

Figure 1: Article content type

The Article content type comes with an Image field by default.  You can also add an Image field to any new content types that you create. Click on edit under Image. Scroll down about halfway until you see this.

Figure 2- Screen shot showing how to enable the Alt tag on the Drupal Article content type

Figure 2 - Enable Alt Field on Article content type

On the Article content type, the Enable Alt field checkbox should already be checked- comes that way by default.  But it won't when you add an Image field to a new content type you created. You will need to check that box.  And notice the Enable Title field checkbox?  Go ahead and check it too - we will talk about it shortly.

So then how do you enter Alt text for images?  Let's create a new Article and find out.  Navigate to Content >> Add Content >> Article.  Enter title & body content.  Scroll down to the Image section.

Figure 3 - Screen shot showing adding an Image to an Article

Figure 3 - Adding an Image to an Article

Choose a file and upload it. I've chosen a picture of four lovely donkeys standing in field.  It's also generally a good idea to name the field descriptively (and use keywords related to your content if applicable).

Figure 4 - Screen shot showing Added Image

Figure 4 - Added Image

Save the node and you are done!  The alt text will show up in your page HTML code.

A few more loose ends though:

  • what about all those little design-element images throughout your website- do they need alt text?
  • what about inline images I add to a page using the WYSIWYG editor- how do I add alt text to them?
  • what about that title attribute you said you'd talk about later?

Ahh good- you've been paying attention.  Let's start with the first one.  You probably have small graphics, lines, shadows etc. all over your website, sprucing up the design.  The W3C standards say that for images that have no semantic meaning to the viewer, you can set the alt tag to null.  ".. if the alt text is set to null (i.e. alt="") it indicates to assistive technology that the image can be safely ignored."

For inline images (like all screenshots I've included in this post) - your Drupal WYSIWYG editor should have a way to enter the alt text.  We use CKEditor on this site, which looks like this while inserting an image. Other editors work similarly.

Figure 5- Screen shot showing setting the title tag for inline images using CKEditor

Figure 5 - Setting the alt tag for inline images using CKEditor

And finally, the title tag.  It tells the browser what to display as a tooltip when the viewer hovers his cursor over the image.  It is generally more useful when the image serves as a link, either to a larger version of itself or to another webpage.  The best practice then is to put a description of what will happen when the user clicks on the image.  It is generally not thought by the community to have any search engine ranking value.  But it is a good practice to follow for good user interaction, which may indirectly lead to better conversions.

If you check the Enable title field checkbox on the Image field in the content type, it will add an additional field under alt for you to enter title text for images.  In CKEditor, the title text can be entered under Advisory Title on the Advanced tab.  

Pages