Chili Pepper Design

Web development relleno

Insert Flash Media Embed Code TinyMCE Plugin

| Comments

I’ve run into a problem providing my clients good, easy-to-use media embed functionality with the existing JavaScript WYSIWYG editors. The big players, CKEditor (formery FCKEditor) and TinyMCE both provide a “Flash” button which works okay with YouTube and other large video providers, but what about embedding a Picasa slideshow? None of the WYSIWYG editors come with plugin to just insert some HTML code. If you want to embed something like a Picasa slideshow, customized YouTube player, or Google Map you have open up the source code, find the location you want to insert it, and paste in the code. Fine for some, but difficult and scary for most as it breaks the WYSIWYG paradigm.

On one of my latest Drupal websites there are multiple bloggers, none of whom are particularly tech savvy. I set up the CMS with TinyMCE because I like how they can drag and drop images around (I just wish Drupal had an image embed uploader like WordPress!). After a while they complained that the Insert Flash button in TinyMCE just wasn’t cutting it. So I set about fixing it. How hard could it be to make a plugin that just inserts some HTML code where your cursor is? Like it already does for images?

It turns out it is very easy. I was able to just edit the TinyMCE “Example” plug-in, which already did basically exactly what I wanted. So here I provide it to you, Internet. I hope it is useful, and please let me know if it’s broken (or could work better). Thanks!

Learning Drupal Module Dev: Dependent AHAH/AJAX Forms

| Comments

So, I’ve been working on a simple module for a Drupal project lately. I wanted to have two administrator settings for the module, the second of which depends on the first. A “dependent dropdown”. It would be cool if it was “AJAXy” too, I thought. Well, it just so turns out that in Drupal 6 there are built in AHAH (Asychronous HTML and HTTP) functions in the Forms API to do just this. Easy! Or is it?

It also turns out there is a steep learning curve to making “Ajax forms” with the Drupal Forms API. I got it working, but it took a fair amount of effort. So, to help out future Drupal AHAH developers I am providing my code below, along with a list of links to resources that were a great help in unraveling this problem.

First, to help provide an “aerial view” of what’s going on here, this is a list of the components involved:

Easy SEO: +2,500% Page Views From a Year of Casual Blogging?

| Comments

You know, you always read in SEO articles about how important blogging is for increasing traffic. It’s one of the top suggestions around for improving a website’s search engine juice. Well, I am here to testify that it truly is a great SEO tool.

Granted, the title of this post is hyperbolic link-bait. ;) But it’s true nonetheless!

I’ve had this site, http://chilipepperdesign.com, up for probably five years now but only as a static portfolio site for most of that time. Then, a year ago, I upgraded the site and added a blog to it. In that year my monthly page views have increased 2,500% and the number of monthly visits has gone up 4,400%.

How to Programmatically Create Views in Drupal 6

| Comments

So, this stumped me for a while. I needed my small custom Drupal module to select a bunch of nodes based on a CCK Date field and the Publish status. It is a pain to query the CCK tables directly, so every forum post I could find told me to do this via Views. That’s all well and good, but the instructions for doing this all involved creating a View with the Vuiews UI, then calling it to make my query.

But I wanted to have some of the View’s query parameters change dynamically based on my module’s admin settings. Although you could probably do this with some custom Views Argument PHP code, I didn’t want to do it this way. It divorced the code from my module too much somehow. It would mean that after I installed my module I would have to create a View and paste in some custom PHP code! Yuck.

Unobtrusive jCarousel Page/tab External Controls With jQuery

| Comments

I am using the very slick and enjoyable jCarousel plugin for jQuery on a new project to display featured content on the front page. I wanted to use the external controls to allow users to easily jump between slides. However, all the examples I found required hard-coding the control links into the document HTML. This is not best practice because when JavaScript is disabled and the carousel degrades to a simple list you have a bunch of control links that do nothing sitting there on the page. Better to create the controls in JS and append them to the DOM with jQuery! This way the controls only appear when the jCarousel script is loaded and ready to use them.

To do this I just had to add a little extra code to the initCallback method I was already using to bind the external controls. Here is the JS needed to unobtrusively create a jCarousel with 4 external control links:

Adding the “Rel” and “Title” Attributes to Image Links in CKEditor 3

| Comments

CKEditor is the new and improved successor to the venerable FCKeditor JavaScript WYSIWYG editor. I’ve used TinyMCE and FCKeditor before, but this was my first time trying out the new CKEditor 3.1. I am using it on a new Drupal website via the Drupal CKEditor module. The problem I ran into, however, is using Lightbox2 on images inserted via CKEditor. CK does not provide a way to add the “rel” attribute to image links (or any links for that matter). CK also doesn’t allow adding the “title” attribute to image links. Lightbox uses both of these to determine which images to display, group together in galleries, provide a caption, etc. I found a patch for FCKeditor which allows adding a “rel” attribute to image links, but I couldn’t find one for the new CKEditor. So here we are. :)

This is a total hack, since I have not looked in to how to properly make a plugin for the new CKEditor, but it works pretty well. Maybe someone who knows how to make plugins to CKEditor can show me the way.

Configuring and Compiling Nginx and PHP-FPM on Ubuntu for Magento, Part 3

| Comments

This is the 3rd and final article about installing Magento on Nginx with PHP-FPM. Part 1 is here, and Part 2 is here.

This part explains how I set up my public web directories, and how I did the Nginx configuration files for a Magento site. One of the tricky things about switching to Nginx from Apache is that Nginx does not use .htaccess files or the usual Apache mod_rewrite rules for pretty/SEO URLs. You can replicate all of Magento’s mod_rewrite rules with Nginx’s own rewrite module, but it takes some getting used to and Magento doesn’t come with them pre-written (like the mod_rewrite rules in the .htaccess files).

Here are some of the resources I used:

First we’ll set up the directory structure like we are used to with Apache:

Configuring and Compiling Nginx and PHP-FPM on Ubuntu for Magento, Part 1

| Comments

So, Magento is a huge piece of modular and extensible PHP code. Each request takes a lot of CPU cycles and memory to kick out a Magento page. This means it is slow. The performance of Magento is a frequent complaint, and rightfully so: consumers won’t wait around all day for an ecommerce store to load. They will bail out and try another store if a page doesn’t load in just a few seconds. A default Magento 1.3 install on budget web hosting can have page load times of up to 10secs, which is unacceptable.

So what can be done to speed up Magento?

There are a number of things. I have tried almost all of them at this point. And I did reduce the page load time greatly, at least on the front end. But all of the AJAXy scripts on the backend (which has no caching, as far as I know) meant store maintenance and order fulfillment remained a tedious process. So I decided to try one final thing: make the switch from trusty old Apache to Nginx.

Book Review: Magento Beginner’s Guide

| Comments

I was recently approached by [packt] Publishing to do a review of their book, the Magento Beginner’s Guide (by William Rice). I’ve been working with Magento a lot over the past year and blog about it here from time to time, so they figured I would be good to review it. After setting up, modifying and maintaining four Magento stores in the last 10 months I don’t feel I have much to learn from a “beginners guide”, but I figured I could use my experience of what a beginner actually needs to know and see if this book covers all the bases.

I have read parts of the official Magento User Guide (and php/architect’s Guide to E-Commerce Programming with Magento) but this book fills a different gap than the others. The User Guide covers all of the features, but it is not a practical guide. (The programming book was great, but did not cover how to actually use Magento). My favorite thing about the Beginner’s Guide is that it showed how to use Magento in a practical, day-to-day way. Being just a “beginner’s guide” it does not cover all of the features, but it covers a wide swath of the important ones. What really impressed me was the way it provided tips on how to deal with and overcome some of Magento’s serious (and occasionally deal-breaking) problems that make the day-to-day administration of an online store difficult.