Drupal
Mullenweg: Scale WordPress to 20,000,000 Views per Day for $100 p/month
An interesting article appeared on the front page of the drupal.org website, detailing the migration of the popular “crooks and liars” blog from WordPress to Drupal. According to the developers, when the site was averaging around the “200,000 hits per day mark, we started experiencing a lot of down time from server overloads. We were utilizing the famous wp-cache plugin for Wordpress, as well as hosting the database on a single master and two slaves, using the HyperDB class for Wordpress to handle the replication.” After experiencing a high degree of server downtime from the massive number of comments on the site, “crooks and liars” began to consider porting the site to Drupal for performance issues.
According to the site development team, benchmark tests showed that a Drupal 5.x installation was able to serve more than 8 times the number of pages per second vs. a standard WordPress 2.3 set up:
“I setup default installations of Wordpress 2.3 and Drupal 5. I only enabled the core caching mechanisms in both setups and populated them with the exact same data and display options. Both systems also used the default themes and features. After running a series of tests through JMeter, I quickly confirmed my beliefs and even exceeded them as I saw Drupal was able to handle about eight times the requests per second as Wordpress, both on the front page and the same single post view with 157 comments.”
An interesting overview of the migration, and custom modules used in the development of the “crooks and liars” site can be found online here:
What is more interesting, is after the post was published, WordPress / Automattic founder Matt Mullenweg weighed in personally on the issue, by commenting on the post and listing ways to configure WordPress to scale to 20 million hits per day – at a cost of only $100 per month. He writes:
“Always sorry to see someone leave WordPress, but you ended up pretty much the other best place I could think of. Features are a great reason to switch, but scaling doesn’t need to be. We host some of the largest poltical blogs like all of CNN’s which regularly get thousands of comments per day and we do about a billion pageviews a month on WordPress.com, so here are some tips for future people who may come across this post (some which may be useful to the Drupal community as well):
1. Every release of WP gets faster, so upgrading can get you sometimes significant boosts depending on your bottleneck.
2. Use the memcached object cache backend.
3. If memcached is set up, use Batcache instead of wp-cache.
4. If you get a lot of comments, consider using InnoDB as your storage engine instead of MyISAM inside of MySQL.
5. Double-check that your webserver is set up properly for static requests, this is the cause of 90%+ of the problems we see.
With the above and a single $100/month server from LT you can get around 20,000,000 pageviews a day. With shared Batcache and HyperDB (which you already used, nice) it’s a lot easier to scale out both the web and database tier independently as needed. We haven’t found the upper limit of this strategy yet.”
Included are links to Quantcast’s statistics proving 1 billion page hits per month on wordpress.com (globally): http://www.quantcast.com/p-18-mFEk4J448M/traffic
Link to the Memcache Plugin: http://plugins.trac.wordpress.org/browser/memcached/trunk
Link to the Batcache Plugin: http://wordpress.org/extend/plugins/batcache/
According to the site:
“Development testing showed a 40x reduction in page generation times: pages generated in 200ms were served from the cache in 5ms. Traffic simulations with Siege demonstrate that WordPress can handle up to twenty times more traffic with Batcache installed.”
Based on Quantcast statistics, Drupal.org ranks 13,298 overall while WordPress.org ranks #11. Global tracking statistics are not available for drupal.org on the site.
Styling the Drupal User Login Block - PHP Code & CSS
This tutorial goes through the steps of one way to create a custom user login block for Drupal. Best is to disable the original login block in the admin/build/block section, start with a new block with custom code, and then style the details with CSS. The requirements for this project are a rounded corner, blue background block with two custom tabs at the top.
1. in admin/build/blocks – click on the “add new block” tab
2. enter the following code:
<?php global $user; ?>
<?php if ($user->uid) : ?>
<span class="login_text">Welcome, </span> <?php print ($user->name); ?> <br>
<?php print l("Your Account",'user/'.$user->uid); ?> |
<?php print l("Log-Out","logout"); ?>
<?php else : ?>
<div id="usertabs">
<span class="utabs1">Log In</span><span class="utabs2"><a href="/user/register">Sign Up!</a></span>
</div>
<div id="umain">
<form action="/user?<?php print drupal_get_destination() ?>" method="post" id="user-login-form">
Username:
<input type="text" maxlength="60" name="name" id="edit-name" size="20" value="" tabindex="1" class="form-text required" />
<br>
Password:
<input type="password" name="pass" id="edit-pass" size="20" tabindex="2" class="form-text required" />
<br>
<span class="utabs3"><a href="/user/password" title="Forgot your password?">Forgot your password?</a></span>
<span><input type="submit" name="op" id="edit-submit" value="Log In" tabindex="3" class="form-submit" />
</span>
<input type="hidden" name="form_id" id="edit-user-login" value="user_login" />
</form>
</div>
<?php endif; ?>
This code originally came from: http://nossdutytask.com/node/240
There are also some nice examples at: http://nossdutytask.com/node/228
I modified the code to add some css IDs, classes, span tags, and also the text/links for the top tabs.
3. Select PHP code for the input and save the block.
4. From the main blocks page, click on “configure” for the block you just created. I selected to show this block only for “anonymous user” because I did not need the simplified display after the user has been logged in. The code generates a block that can also be customized to show the site status for authenticated users, but usually the navigation menu does this sufficiently. Enable the block and position it where you like in the display.
5. The rest is basically CSS – setting the image as the background for the login area and the tabs, positioning the text elements and fields. This example is based on a 250px wide column with a two column layout. It includes bold text on the display and overrides the default styling of the Drupal user login form elements.
There is a vertical-alignment fix to standardize the display in IE, and a 1px addition to the lower input field so that the form will align evenly on both ends. Add the following CSS to your theme in style.css, blocks.css, or wherever fits best.
#block-block-4 {
color: #fff;
}
#block-block-4 a {
color: #fff;
}
#umain {
font-weight: bold;
height: 127px;
width: 250px;
background: transparent url("../img/login_bg.jpg") no-repeat top left;
padding-top: 20px;
vertical-align: middle;
}
#usertabs {
height: 23px;
width: 250px;
background: transparent url("../img/tabs1.jpg") no-repeat top left;
}
#usertabs a {
color: #333;
}
.utabs1 {
font-weight: bold;
float: left;
padding-top: 4px;
padding-left: 25px;
}
.utabs2 {
font-weight: bold;
float: right;
color: #333;
padding-top: 4px;
padding-right: 60px;
}
.utabs3 {
font-weight: bold;
float: left;
padding-left: 25px;
padding-top: 4px;
}
#umain #edit-name {
margin-bottom: 5px;
width: 147px;
}
#umain #edit-pass {
margin-bottom: 10px;
width: 148px;
}
Note: the “block-block-4” value will be contingent on the name of the block that was created to input the custom PHP code of the login form.
IMAGES:
Upload to your theme’s “image” folder (in this case named ‘img’):
Tabs Background image: tabs1.jpg:
tabs1.jpg
Login Background image: login_bg.jpg
login_bg.jpg
7. To add a custom button, also upload and add this CSS:
#umain #edit-submit {
float: right;
margin-right: 20px;
background-color: transparent;
color: #333;
border: none;
font: 9pt/1.5em Arial, Tahoma, Verdana, "Lucida Grande", sans-serif;
font-weight: bold;
background-image: url("../img/button1.jpg");
background-repeat: no-repeat;
height: 24px;
width: 58px;
cursor: pointer;
}
BUTTON IMAGE:
button1.jpg
button1.jpg
FINAL RESULT:
screenshot-login.jpg
Hopefully, this will save some people a lot of time and is also a good base for doing further customization with the background images and CSS.
FURTHER REFERENCES:
http://drupal.org/node/134319
http://drupal.org/node/19855
http://drupal.org/node/92657
http://drupal.org/node/84724
Adding a YouTube Button to FCKeditor in Drupal
This is a reference article for adding a YouTube button for automatic video uploads in Drupal with FCKeditor. Basically, there are a few small issues that I ran into when setting up the plugin, but the process is simple and quick. If you want to give embedded video support through the WYSIWYG editor, without having your users cut and paste the embed code through the source directly, then this method may be of interest.
1. Install and configure FCKeditor in your Drupal installation.
2. Download the YouTube Plugin for FCKeditor at:
http://sourceforge.net/projects/youtubepluginfo/
3. First Change – the documentation for the plugin says to upload it into the:
fckeditor/editor/plugins folder
Disregard this and upload it into the upper level folder of the Drupal FCKeditor module. The path should be:
sites/all/modules/fckeditor/plugins/youtube
4. Download and open the fckeditor.config.js file from the main module folder.
5. Add the following code to the end of the file, at the very bottom line:
FCKConfig.Plugins.Add( 'youtube', 'en,ja' ) ;
6. Add the YouTube button to your FCKeditor configuration, i.e. if you are using “Drupal Full,” “Drupal Basic,” “DrupalFiltered,” or whatever, change the fckeditor.config.js file to add the button like this:
BEFORE: FCKConfig.ToolbarSets["Default"] = [ ['Image','Flash'] ] AFTER: FCKConfig.ToolbarSets["Default"] = [ ['Image','Flash','YouTube'] ]
7. Save and upload the modified fckeditor.config.js file to the site.
8. If you test the module out now (clearing the cache & refreshing the JavaScript), the button will display, and a pop up will load – it is a single screen that says “YouTube Property” and has a single text field for pasting the embed code from YouTube.
The problem – after pasting the code, and clicking “ok” – the window just stalls, it does not submit and it does not close.
9. Fix for this – in the “youtube” folder of the plugin, there is a HTML file named “youtube.html”. In the header, you will find the code:
<head> <title>YouTube Properties</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta content="noindex, nofollow" name="robots"> <script src="../../dialog/common/fck_dialog_common.js" type="text/javascript"></script> <script src="youtube.js" type="text/javascript"></script> <link href="../../dialog/common/fck_dialog_common.css" type="text/css" rel="stylesheet"> </head>
For whatever reason, the file structure is incorrect here, so I entered the full path to the files on the server. Example:
<head> <title>YouTube Properties</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta content="noindex, nofollow" name="robots"> <script src="http://www.example.com/sites/all/modules/fckeditor/fckeditor/editor/dialog/common/fck_dialog_common.js" type="text/javascript"></script> <script src="youtube.js" type="text/javascript"></script> <link href="http://www.example.com/sites/all/modules/fckeditor/fckeditor/editor/dialog/common/fck_dialog_common.css" type="text/css" rel="stylesheet"> </head>
10. Now – return to any page where the FCKeditor is enabled, and test the “YouTube Button” – it works perfectly.
References:
YouTube Plugin: http://sourceforge.net/projects/youtubepluginfo/
FCKeditor: http://www.fckeditor.net/
FCKeditor Module for Drupal: http://drupal.org/project/fckeditor
Note:
If you have the time, you can also vote on the question: “Should FCKeditor change its name?” at the fckeditor.net website.
According to the site – 58% of the people surveyed said that the name should be changed, for whatever reason.