3RM Design Blog » Tutorials

How to Design for Letterpress

Brennan — Wed, 25 Aug 2010 05:15:03 +0000

Letterpress can push your design to the next level, but before letting your imagination soar, it is important to know the limits and possibilities of letterpress printing. Here are some helpful tips on how to design for Letterpress.

1. Know your medium

Letterpress is a wonderful, time-tested process with unique qualities. Before even beginning your design, there are a few things to keep in mind about how Letterpress works.

Letterpress is a spot color printing process

When designing for Letterpress, it is important to remember that you’re dealing with a spot color printing process, and not the 4 color (CMYK) process. Where the 4 color process matches your on-screen colors by combining percentages of Cyan, Magenta, Yellow, and Black, a spot color process is very specific, using pure color rather than a mixture of CMYK. It is very important to reference your spot colors in person, and not simply rely on the on-screen rendition, as this can be vastly different from the actual Pantone color. Pick your colors in person using PMS, or the Pantone Matching System, then use those specific colors in your design (This post is written for Adobe Illustrator, but Photoshop and InDesign also contain Pantone swatches).

Letterpress inks are translucent and will overlap

Letterpress inks are thinned out and translucent to best work with the equipment. What does this mean for your design? If you have overlapping elements, the colors may blend unfavorably once printed. Do not overlay objects and design elements unless you want their colors to blend (you may preview this effect by switching transparency mode to “Multiply”). Of course, you can certainly use this feature to your advantage to achieve new colors without paying for additional inks.

Every color is printed separately

This might already be apparent based on the previous Letterpress qualities, but every color in your design will be printed separately, and you will need to separate these colors for your printer. In Illustrator, it is easy to put each color on its own layer (described later in this post). The image below shows one color of our 3 color business cards, separated into its own layer:

Note that photographs, full-color imagery and gradients will not print well unless you know how to separate your colors (using techniques like halftones).

Letterpress literally ‘presses’ your imagery

Letterpress always makes an impression. When you send a printer your separated design, every layer/color is etched onto its own metal plate. This metal plate is then coated with your specified spot color and pressed onto the paper to apply the ink, creating an impression in the process. A light impression is called a “kiss.” A deep, noticeable impression is called a “bite.” For our business cards, I requested a “bite” on the front and a “kiss” on the back (putting a deep impression/bite on both sides of your design will show through to the other side).

2. Create your design accordingly

Now that you know more about what Letterpress can offer, you can begin developing your design. I used and recommend Illustrator, as it provides crisp designs that are easily translated to this printing technique. A few tips for your design:

Sketch it out first. This is important for any design, but especially a project as costly as Letterpress. You want to ensure you are completely satisfied with your design before investing in this technique.
Keep Letterpress constraints in mind. Do not use full-color images, extremely small type, or razor thin strokes. Use techniques like halftones and tints with purpose, and keep in mind that they might not always show up as they would with an offset press.
Utilize the benefits of Letterpress, such as a kiss/bite or by taking advantage of translucent inks to create a third color. You can also get fancy with custom die-cuts (notice the 3-corner die cut on my design below).
Choose your colors wisely. Color can be a great asset to your design, if utilized properly, and remember to use spot colors, not CMYK.

Here is the finalized mock-up of my design:

3. Prepare your design for print

Printers will ask for your files in whatever best fits their work flow and setup. With that in mind, here are some general file preparation tasks that should make your printer’s life easier:

Separate your colors

Unless you’re paying a fee to have this done for you, you will need to separate your colors before sending your file to print. To separate your colors in Adobe Illustrator:

First be sure that your artwork is all set. Save this editable art file in case you want to make changes later on.
Once you’ve saved, choose “Save As” and name it something straight forward, like “Business Card Front.”
Group your objects together (Object > Group). In my case, I grouped all of the shapes and text.
Outline any live text (Type > Create Outlines) and then expand any stroked objects (Object > Expand).
With your group selected, open your Pathfinder window (Window > Pathfinder) and click the “Merge” button under “Pathfinders.” This will ensure that nothing is accidentally overlapping.
At this point, all of your colors should be on the same layer, everything grouped and merged into one object.
Use your Direct Selection Tool and select one of your colored objects.
In your top menu bar, click “Select > Same > Fill Color.” This will select every object with that same spot color.
Without deselecting this color group, create a new layer (Layers window > Create New Layer).
Move your selection to the new layer – Edit > Cut > Select your new layer in the layers palette > Edit > Paste in Front (you must choose “Paste in Front” to keep everything aligned).
Once your selection is on your new layer, regroup it (Object > Group). This layer should now have every object from the one selected spot color.
Repeat this process for remaining spot colors.
Once every color is on its own separate layer, save the file. If you have a double-sided design, save each side as its own separate file.

In the example below, the gold objects are on layer one, the red “web” bubble is on layer 2, and the deep red “creative strategy” bubble in on layer 3:

Pull your bleeds

If you want your design to go right to the edge, you will need it to “bleed.” This simply means expanding the color/imagery past the trim mark. A good rule of thumb is to expand your bleeds at least 1/8″ past your trim marks. For example, if your finished business card is going to be 3.5″ x 2″, your design should be at least 3.75″ x 2.25″ with bleeds included. Note: You should get specifics from your printer before finalizing your file, to ensure your file meets their specifications.

Utilize your given space

When printing mass quantities, it is usually cost effective to print more than one design at a time. In my case, I placed my business card design 4 times on the same file, to decrease press runs and therefore, decrease cost. By printing 4 cards at once, space, time and resources are used efficiently. Here is the design after the first color was pressed (notice how different this printed gold color is compared to my original on-screen mock-ups):

4. Double check, then send to print

Once you’ve finished your design, separated your colors, checked your bleeds and margins, and specified any final details like foil stamping or die-cuts, then you are ready to roll. Save your files in an acceptable format, send them off and wait to see how your freshly Letterpressed design comes out! Most printers will also bring you in to do press checks, but if not, always request press checks for Letterpress, to ensure that what’s being printed is exactly how you want it before the entire order goes through.

Our newly printed examples

Check out some photos of the recently finished 3 Roads Media business cards below. Special thanks to Denver’s own Foils + Dies for the beautiful finished products.

Design details:

Created using Adobe Illustrator CS5
3-color wrap-around design
3-corner die cut
Deep “bite” for front design/light “kiss” for back design
Font: Rockwell

Multilevel dropdown category navigation in ExpressionEngine

Ryan — Thu, 22 Jul 2010 21:54:50 +0000

If you’ve ever wanted to create dropdown, category-based navigation in your ExpressionEngine website, you’ve probably also wanted to punch a hole in your desk. It’s not easy. Or is it? In this tutorial, I’ll show you how.

Requirements

To follow along in this tutorial, you’ll need:

An ExpressionEngine website running EE 1.6.x (I haven’t yet tested this in EE 2.0)
The Subcategories plugin
To use category URL titles in your links, not category IDs

The Subcategories plugin is available for download on this thread in the EE forums; however, since it’s not clear which version to grab, and since there was a minor bug in the code, I’ve made a corrected version available for direct download right here.

Grab the plugin, save it as pi.subcategories.php, and upload it to your system/plugins directory.

Live Demo

If you’re the visual type (like I am) you probably need to see the menus in action. The demo is pulling from a live EE install on our web server. It may also help to see a screenshot of the category heirarchy.

Template Structure

Once you’ve uploaded the plugin file, you’ll need to create a few templates:

embeds/navigation
embeds/subcategories
embeds/sub_subcategories
an additional embed for each additional level of subcategories (if you desire more)

For the visuals, here is a screenshot of my templates page.

The embeds/navigation template controls your main, top-level navigation. Embedding this template as I have done is optional; you can also leave your main navigation code in your header template (or wherever it normally appears).

The embeds/subcategories template is only called if a top-level category has any subcategories. It displays a list of, well…subcategories.

The embeds/sub_subcategories template is only called if a subcategory has any subcategories.

You can create as many levels of dropdowns/flyouts as you want by replicating the embeds/subcategories template and naming it something else (like embeds/sub_sub_subcategories).

The Code

In your embeds/navigation template, place the following code:


   {exp:weblog:categories parent_only="yes" style="linear"}
      
         {exp:query sql="SELECT cat_id FROM exp_categories WHERE parent_id = '{category_id}' LIMIT 1"}
             0} class="fly"{/if}>{category_name}
            {if '{total_results}' > 0}{embed="embeds/subcategories" cat_id="{category_id}"}{/if}
         {/exp:query}
      
   {/exp:weblog:categories}

If you’re scratching your head about what that all means, here it is:

First, we use the exp:weblog:categories tag pair to show a list of all categories. We show only top-level categories by using the parent_only=”yes” parameter.
Next, we output a link to the category and display the name (using {path=’SITE_INDEX’} removes the “category” segment from the URL). The {exp:query} call allows us to add a class of “fly” to anchors that are associated with parent categories. This is useful if you’d like to add styling to your parent categories (see the demo for an example).
The {exp:query} call also checks to see if your top-level categories have children. If so, call the embeds/subcategories template.

In your embeds/subcategories template, place the following code:


   {exp:subcategories root_node="{embed:cat_id}"}
      
          0} class="fly"{/if}>{category_name}
         {if '{subcategories_count}' > 0}{embed="embeds/sub_subcategories" subcat_id="{category_id}"}{/if}
      
   {/exp:subcategories}

Here is an explanation of the code:

We passed in the parent’s category ID as cat_id. The subcategories plugin takes this value in the root_node parameter to pull a list of subcategories.
For each subcategory, output a link. The Subcategories plugin has a neat variable called {subcategories_count}, which lets us replace the SQL query that you see in the embeds/navigation template. If there are subcategories, apply a class of “fly” to the anchor. This lets us style our anchors to indicate that there are more dropdowns/flyouts.
Lastly, use the {subcategories_count} variable to see if the current subcategory has subcategories of its own. If so, call the sub_subcategories template.

In your embeds/sub_subcategories template, place the following code:


   {exp:subcategories root_node="{embed:subcat_id}"}
      
         {category_name}
      
   {/exp:subcategories}

Note how similar this code is to the embeds/subcategories code. The only difference is that we did not check to see if the grandchild categories had subcategories of their own. We can easily do this by adding the following line…

{if '{subcategories_count}' > 0}{embed="embeds/sub_sub_subcategories" subcat_id="{category_id}"}{/if}

…and then creating an embeds/sub_sub_subcategories template. In this way, you can create as many levels of menus as you want.

Enjoy

Adding category based dropdown menus to an ExpressionEngine website doesn’t have to be a drag. This tutorial should get you up and running without trouble; however, if you find bugs or see ways to improve the examples here, let us know in the comments.

How to install and configure sIFR

Ryan — Wed, 21 Oct 2009 00:05:41 +0000

Using sIFR (scalable Inman Flash Replacement) to replace standard web fonts on our web projects has become a de facto standard for us. Since I use it so often, I wrote a quick tutorial to show you how to get sIFR up and running.

This tutorial is geared toward both the novice user installing sIFR for the first time and to those who have done it many times before. If this is your first time working with sIFR, you should know a few things before getting started:

To work with sIFR and follow along here, you’ll need Adobe Flash.
sIFR requires both JavaScript and Flash to work. In the absence of either, it will fall back to displaying regular text.
Don’t try testing sIFR locally, or nothing will work. It needs to run on a server, either remotely or on a local XAMPP install.
sIFR is not intended to replace large blocks of text. Try to use it sparingly, for headers and small snippets of copy only. Too much sIFR will bog down your site, increasing page load times.

1. Accommodate those without JavaScript

The very first thing you should do is to make sure your to-be-replaced text looks correct before using sIFR to replace it. If you don’t do this now, you’ll spend more time later switching between your sIFR text and your regular text (they end up using different stylesheets) to make sure they both look right. It’s better to take care of the non-JavaScript people first.

When you’ve gotten your text where you want it, move on to step #2.

2. Download the sIFR files

Download the latest version of sIFR and unzip it somewhere on your computer. For this tutorial, we’ll be working with sIFR release 436.

3. Open sifr.fla

When you unzip the sIFR archive, you’ll see four folders: css, demo, flash, and js. You can completely ignore the demo folder. Click into the flash folder and open sifr.fla.

4. Modify sifr.fla

Once you’ve opened sifr.fla, you should see something like this:

The white rectangle in the middle is called the stage or the canvas. Double click it and you’ll see this:

Double click the stage again to select the text inside. Delete everything, then type a single character (glpyh) of your choice for each font style you’d like. For instance, if you only need normal and bold styles, enter two glyphs: one for normal and one for bold. Make sure all of your glyphs are the same letter.

Of course, you’ll have to choose a font that supports all of the styles you need. In this tutorial, I’m using Arno Pro, which has bold, italic, and bold italic glyphs.

5. Choose your font

Select all of your glyphs, then look to the right of your screen for a dropdown menu like the one highlighted below:

All of your characters will now be the default “normal” style of the chosen font. If your font supports additional styles, the “Style” menu will be active. Highlight each individual glyph you want to change, then choose a different style from the dropdown. In the example below, I’m about to make the second glyph italic:

For fonts like Arno Pro, which have tons of glyph styles, you may be tempted to pick a “caption” or “extra wide” style. These will not work, since HTML only supports normal, bold, italic, and bold italic.

TIP: If you only need to display one style on your site, then you only need one glyph on your stage. I.e., if you only want to display bold, then type one glyph and bold it. You don’t need any more than that.

6. Add additional glyphs

If you anticipate using special characters (for example, Ñ, β, £, «, ™), you’ll need to embed them in your Flash movie. Right beneath the menus you just worked with is a “Character Embedding” button which, when clicked, pops up a window like this:

The basic glyph sets are already chosen for you, along with a list of extra characters. Choose the additional character sets you want (if any) or type special characters in the list, then click OK.

7. Publish your movie

When you’re happy with your font, go to File › Publish Settings. Untick the box near “HTML” since we won’t need to output any HTML files. Next, click the “Flash” tab near the top to adjust your settings.

The only setting you should change is JPEG quality. I always set it to 100, since there’s almost never a difference in file size between 80 and 100. This ensures your replaced text looks as good as possible. You can, of course, adjust this setting to try and reduce the size of your Flash movie.

Once this is set, click Publish.

8. Rename your movie

Go back to the folder that has your sIFR files and click into the “flash” folder. You should now see a sifr.swf file, which is the movie you just published.

It’s good practice to rename your movie after the font it contains, since it’s not uncommon to replace more than one font on a website. This naming convention will make it easy to know what’s what.

I renamed my movie arnopro.swf.

9. Open sifr-config.js and configure

Now it’s time for the hearty, meat-and-potatoes part of the tutorial. You’ve got your movie; you just need to tell your site where to find it and what to do with it.

Go to your sIFR folder, click into the “js” folder, and open sifr-config.js.

There are instructions in the file, but here are the basics:

On line 15, change the variable name to match your font’s name and change the path to point to your swf file. For example:

// what you see when you open the file
var futura = { src: '/path/to/futura.swf' };

// an example of what you should change it to
var arnopro = { src: 'http://www.3roadsmedia.com/flashstuff/arnopro.swf' };

Now is a good time to upload everything to a web server so you know the path to your movie. You won’t be able to test sIFR by just calling the movie from your hard drive.
Do a find/replace to swap out all instances of futura with the name of your new font.
Tell sIFR how to display your new font by adding CSS selectors and style rules (see the next step)

10. Tell sIFR how to display your new font

All of the styling for your Flash-based font is handled via sifr-config.js, starting on line 53.

A couple of pointers:

Be sure the font name after sIFR.replace matches the name you specified in line 15
The “selector:” tells sIFR which HTML element to target with the style rules. sIFR supports most HTML elements, but if you want to target things like :first-child, read this article on how to do it.
You can target multiple selectors at a time by using a comma-separated list; e.g.:

selector: 'h1, h2 a, #footer h3',

When using hex colors, always use the full six digits. Three-digit CSS shortcuts do not work here. For instance, use #003300, not #030.
If you’re getting a funky colored box behind your replaced text, add this line to each of your selectors:

wmode: 'transparent'

To style hyperlink hover behavior, do something like the following:

css: [
   '.sIFR-root { color: #000000; }',
   'a { color:#9f2321; text-decoration:none; }',
   'a:hover { color:#99e232; text-decoration:underline; }'
   ]

11. Include the sIFR files in your web page

For this tutorial, I’m assuming you already know how you want to style your font, so you can configure first and hook up second (sounds like I’m inviting some derisive snickering…).

sIFR requires 3 files to work: sifr.css, sifr.js, and sifr-config.js.

Add these files to the section of your web pages by copying/pasting this:


"stylesheet" type="text/css" href="http://path/to/sifr.css" />

12. Upload everything and test

Upload everything to your web server and load your web page. If all went as planned, you should see your new font instead of that old, dreary thing you’re replacing:

If you don’t see your new font, go through this checklist:

Double check the paths to all of your files.
If your JS files are linked properly, make sure you entered the right path on line 15 of sifr-config.js.
If that’s linked properly, try to load the Flash movie directly. If you don’t get anything, you may not have Flash installed or it may be turned off.
Make sure JavaScript is enabled in your browser.

Once you’ve got your replaced font showing, tweak your CSS in sifr-config.js until things are exactly where you want them.

13. Tweak the CSS

The final step is to tweak your replaced text. You may notice it’s a bit off in some places, or that it wraps in the middle of a word. The solution is to edit sifr.css, which is located in the “css” folder of your sIFR download.

Once you’ve opened that file, scroll to the very bottom, where you’ll see this:

@media screen {
 /* Example:
 .sIFR-active h1 {
 font-family: Verdana;
 visibility: hidden;
 }
 */
}

This is where you make your edits (you can leave the rest of the file alone).

A common fix you may need to implement is preventing your replaced text from wrapping in the middle of a word. This is caused by the replaced text taking up less space than the sIFR text. The solution is to increase the font size, letter-spacing, or width of the replaced text. If you do this in your regular CSS file, you may find that your regular (non-sIFR) text is too large.

In this case, you’d create a new rule in your sifr.css file to make the font larger only for the replaced text; e.g.:

// regular CSS file
h1 { font-size:20px; }

// sifr.css
.sIFR-active h1 { font-size:28px; visibility:hidden; }

Regardless of whether you edit sifr.css, you must include it in your section.

Post script: frequently asked questions

You’ve got sIFR up and running, but something isn’t acting quite right? I’ve compiled this short list of questions that I’ve seen asked many times before:

How do I adjust line-height in sIFR?

Flash doesn’t understand the concept of line-height. Instead, it uses a custom property called leading. To adjust the line-height in sIFR, do this in your sifr-config file:

// leading must be a number (decimals allowed); no units needed
css: '.sIFR-root { color:#5a3b00; font-size:25px; leading: -3; }',

How do I style links in sIFR? My cursor doesn’t work.

A common problem with sIFR-replaced links is that your cursor doesn’t appear as the friendly hand pointer, but as a text selector. This is because you haven’t replaced the link, but the text inside the link. Read here for how to fix this.

That’s it!

If you have suggestions for improving this tutorial, or if you get stuck, feel free to leave a comment. You can also post a question at Stack Overflow where Mark Wubben (lead sIFR developer) is great at answering questions.

Improving WordPress page navigation: fixing next_post_link() and previous_post_link()

Ryan — Sat, 12 Sep 2009 18:06:07 +0000

WordPress’ next_post_link() and previous_post_link() functions are used to navigate between posts in single post (permalink) view. They work great…until you come to the very first or the very last post.

When viewing the latest post, next_post_link() displays nothing; when viewing the earliest post, previous_post_link() displays nothing. This can result in some less than friendly navigation.

In this post, I’ll show you how to use a built-in WordPress function and PHP conditionals to improve your WordPress page navigation.

The problem

Here is an example of next_post_link() and previous_post_link() at work on our blog’s old theme:

When viewing a post that is neither the newest nor the oldest, the post navigation links display as expected.

The trouble with these functions comes when you get to the first or last post. In the case of the first, you’ll have something like this:

When viewing the oldest post, the "previous post" link disappears, leaving an ugly hole.

And when viewing the last post, you’ll have something like this:

Similarly, when viewing the newest post, the "next post" link disappears.

To the rescue: get_adjacent_post

We’re going to use the obscure WordPress function get_adjacent_post() to check if… (shockingly) …there is an adjacent post. If there isn’t, we output whatever HTML markup we like to take the place of the gaping hole we’re trying to fill. If there is an adjacent post, we output it as normal.

The function retrieves a link to the adjacent post (either next or previous) and takes the following form…

get_adjacent_post([bool $in_same_cat, string $excluded_categories, bool $previous])

…and has these parameters:

$in_same_cat : Whether the link should be in the same category
$excluded_categories : A comma-separated list of excluded category IDs
$previous : Whether to retrieve the previous post

The solution, with sample markup

The code block below contains the markup you should add to your single.php template file. Place it where you’d like your navigation to appear, then adjust the parameters and output to suit your needs.

"prev">
    previous_post_link('%link', '« Previous'); ?>
    if(!get_adjacent_post(false, '', true)) { echo '«Previous'; } // if there are no older articles ?>

"next">
    next_post_link('%link', 'Next »'); ?>
    if(!get_adjacent_post(false, '', false)) { echo 'Next »'; } // if there are no newer articles ?>

I then added this line to my CSS file:

#prev span, #next span { color:#ccc; } /* lighter than the normal anchor text */

And here is the final result:

The final result, showing user-friendly language at both ends.

In the example above, I grayed out the inactive links. If you have more room, you might get creative by replacing the text with something like “Sorry, there aren’t any newer posts!”

Use a ModalBox to edit content inline with ExpressionEngine

Ryan — Tue, 02 Jun 2009 20:59:20 +0000

A couple months ago, I wrote a post on how to use AJAX to edit content inline – without accessing the control panel and without a page refresh.

Since then, I’ve found a much cooler and more practical way of editing content inline: by using a modal box. The result is the same: authorized users can update certain content blocks without control panel access and without any knowledge of HTML.

In fact, I think this method is far more robust, flexible, and user friendly than the AJAX one I shared with you a while back.

Let’s get started.

What is a modal box?

If you already know what a modal box is and why you would use it with ExpressionEngine, feel free to skip ahead to the implementation.

A modal box is a JavaScript driven dialogue box that “pops over” a page’s content. It is not a separate popup window, so it won’t be blocked by a user’s browser. Perhaps most importantly, a modal box requires the user to interact with it before the user can do anything else on the page.

A simple modal box

Why use a modal box for inline editing?

Usability. A modal box does not require the user to leave the current page, which means a user can interact with the dialogue (or series of dialogues) while still seeing the same page in the background.

For ExpressionEngine users in particular, not having to leave the page you want to edit is a big bonus, since finding a particular weblog entry in the control panel can be time consuming.

Can I see a demonstration?

Here is the end result of this tutorial. Feel free to make some changes – these are posting to an actual EE database so you can see how this method works.

You can also go to Wildbit’s Modal Box page and check out the demos.

Getting a modal box to work with ExpressionEngine

The goal for this tutorial is to implement a modal box that allows us to edit the content of an ExpressionEngine weblog entry inline; that is, without control panel access.

Step 1: Create a new weblog, custom fields, and template group

To be as comprehensive as possible, I’ll assume that you’re starting with a fresh EE install. If you already have weblogs set up, skip to the next step.

Create a new weblog (in a flash of brilliance, I named mine “ModalBox Test” and gave it a short name of modalbox_test).

Create a new custom field group (or use the default one). Make sure it has at least one text input field type and one textarea field type. I set the formatting for my fields to “none,” but you don’t have to.

Use the short names above if you plan to follow this tutorial to a T.

Assign your field group to your modalbox_test weblog.

Create a new template group. I called mine modalbox_test, the same as the weblog.

Step 2: Grab the ModalBox files

Visit Wildbit’s site and download the latest version of ModalBox (I’m using 1.6.0 for this tutorial).

Extract the zip file on your computer, then upload the modalbox1.6.0 folder to your web server. For this tutorial, I renamed my modalbox1.6.0 folder to modalbox and uploaded it to my system/scripts folder (this folder does not exist by default, so you will have to create it).

For the visually inclined.

The system folder is EE’s default system folder. You may have renamed it to something else.

Step 3: Link the ModalBox files to your template

I’ve prepared the following code block that you can use in your new template. If you’re using my custom field names from Step #1, you don’t need to change anything. Otherwise, be sure to replace my custom field names with your own.

Copy and paste the following code into your modalbox_test/index template (the calls to the ModalBox files are in red boldface):




    
    Inline Editing with Modal Boxes
    

    
    
    
    
    
    



An example of inline editing with ExpressionEngine and Modal Boxes


    {exp:weblog:entries disable="categories|member_data|pagination|trackbacks" weblog="modalbox_test"}
        
            {title}
            {modalbox_input}
            {modalbox_textarea}
        
    {/exp:weblog:entries}

Notice the {scripts} variable. That is a global variable I set up in EE that contains the path to my scripts folder (e.g., http://www.yoursite.com/system/scripts).

Step 4. Add an “Edit” link

Before you go any further, add some test entries, then preview your template to make sure everything is hooked up correctly.

Once that’s done, add the following line of code to your template. Place it where you’d like the “Edit” link to appear (I placed mine right below the

tags in the sample code).

{if logged_in}"Modalbox.show($('modalbox-content-{entry_id}'), {title: this.title, width: 800}); return false;" title="Edit this weblog entry" href="#">Edita>{/if}

This line of code tells the ModalBox script to load a DIV with an ID of modalbox-content-XX (where XX is the entry’s ID) into a ModalBox that is 800 pixels wide with a heading of “Edit weblog entry.”

Step 5. Create the DIV

In the previous step, we told ModalBox to find and display a DIV with a particular ID. This DIV will contain a SAEF (stand alone edit form), which allows us to easily and safely post our changes to the EE database.

Grab the SAEF code here and paste it wherever you like in your main template, so long as it is within the {exp:weblog:entries} tags.

The only thing you’ll need to change in the SAEF are the custom field ID numbers associated with each of your custom fields.

What?

When you created custom fields for your weblog, ExpressionEngine assigned each of them a unique ID number. We need to know what these numbers are in order to pull the correct information from the database.

To find these numbers, go to Admin › Weblog Administration › Custom Weblog Fields, then click “Add/Edit Custom Fields” next to the field group you created for this tutorial. Mouse over each of your custom fields and note the number that appears in the bottom left of your browser:

How to find a field ID for each of your custom fields

Here are my field IDs:

modalbox_input: 73
modalbox_textarea: 74

In your SAEF, find any references to these field IDs. They will look like field_id_XX, where XX is the field ID. For example, I would change my SAEF to look like this (my changes are in red):

Modalbox Input
73" id="amount" value="{modalbox_input}" />
73" value="none" />

Modalbox Textarea
74</span></strong>" id="details">{modalbox_textarea}
74" value="none" />

The field_ft_XX lines control the formatting for a particular field. You can leave them set to “none” to remove all HTML formatting.

Step 6. Test your ModalBox

Save and preview your template, then click an “Edit” link to call the ModalBox. If you’ve followed along closely, you’ll see a form populated with your weblog entry’s content.

The results of our hard work

Make some changes and click “Save” and you should be sent to the location specified in the “return” parameter of your SAEF. If this is the same page you just came from, you should see your changes.

Step 7. Add a success message

If you make a change and get dumped back on a page without any visual cues that something changed, you (or your client) may not have a clue what just happened.

That’s why I suggest adding a success message.

First, alter the return parameter in your SAEF to include the following:

return="modalbox_test/index/?updated=true"

You can set “updated” to be anything you like; it’s just a variable name.

Next, in the page you are returning to (modalbox_test/index), add the following lines of PHP:

Your weblog entry was successfully updated.";
    }
?>

This snippet checks the URL for the segment we just added; if it finds it, then it displays a success message.

Step 8. Add a dropdown menu

In my last tutorial on inline editing, I didn’t touch the subject of dropdowns, since trying to get them to work with that script was impossible.

Luckily, we can use the SAEF with a bit of PHP to get what we need. Add the following where you’d like your dropdown to appear in the SAEF, being sure to replace the field IDs as needed:

Dropdown List
<select name="field_id_XX">
    {exp:query sql="SELECT field_list_items FROM exp_weblog_fields WHERE field_id = 'XX' "}
        php
            $items ="{field_list_items}";
            $items = explode("\n", $items);
            $howmany = count($items);
            $i = 0; do {
            $item_id = $items[$i];
        ?>
        <option value=""><?=$item_id?>option>
        
    {/exp:query}
select>

This bit of code will loop through all of your manually entered dropdown items, then display them.

Step 9. Enjoy!

Feel free to share your own experiences, or to suggest ways to improve the code I’ve presented here. Have a question? Got stuck and need help? Let me know!

Postscript: Streamlining your implementation

I was fortunate enough to receive some feedback from Markus Stolpmann, a fellow EE user, on how to improve the modalbox implementation. The steps above are fine if you don’t mind including hidden divs in your code – but what if this isn’t your cup of tea?

It’s far easier to maintain your code if you include the SAEF in a separate template.

To begin, create a new template group (something like modalboxes works well). This new group will hold all of the content shown in your modal boxes. Our company intranet, for example, has templates like:

modalboxes/add_prospect
modalboxes/add_invoice
modalboxes/edit_prospect
modalboxes/edit_invoice

Each of these templates contains a SAEF with fields specific to the task (i.e., I won’t have an “invoice number” input box in my edit_prospect template). Here is an example of what my modalboxes/edit_prospect template looks like:

{exp:weblog:entry_form weblog="prospects" return="prospects/prospect_added"}
    
        
            Prospect Name*
            
        
        
            Email
            
        
        ...
        
             or Cancel and close window
            
            
            " />
            
        
    
{/exp:weblog:entry_form}

Go ahead and remove the divs we created in step 5, transferring them to your new template group. Then find your “edit” link (step 4) and replace it with the following:

This line of code passes each weblog entry’s ID to the “modalboxes” template group, where it’s picked up automatically and used to populate your SAEF.

You can now enjoy modalboxes without cluttering your main templates with hidden divs. Enjoy!

Inline editing with ExpressionEngine and AJAX

Ryan — Sat, 07 Mar 2009 17:53:40 +0000

Web developers are a demanding lot. We’re impatient for change, we wanted it yesterday, and we love shortcuts. I don’t mean the “cutting corners” type of shortcut. I mean the “this will make life easier” type of shortcut.

In this post, I’ll show you how you can use AJAX to edit your ExpressionEngine content on the front end, without a page refresh, and with a simple click of the mouse.

NOTE: I recently wrote about an improved method for inline editing with EE using modal boxes. Read the tutorial here.

The Problem

Making changes to front end content can be time consuming and confusing. Even if your templates are set to display WordPress-style “edit” links next to each weblog entry, you have to use the control panel (CP) to make changes. Many end users don’t feel comfortable using the CP, and many times you just want to make a quick change without leaving the front end.

The good news is that with a bit of AJAX, we can bypass the CP altogether, greatly simplifying the editing process.

The Solution

I took my inspiration from an old post on inline editing at 24 ways. I’ve modified the code to work with ExpressionEngine, and will show you how you can get it to work with your own EE site.

Step 1: Create a new EE weblog and template

Create a new weblog and connect it to a custom field group with at least one textarea field (make sure the formatting is set to “none”). Enter a few sample entries, and then create a new template.

Enter the following HTML in your template, substituting your weblog name for ajax-test and your custom field name for {body}:




    
    Edit-in-Place with Ajax
    



Editing Inline with ExpressionEngine and AJAX

{if logged_in}
    {exp:weblog:entries disable="categories|member_data|pagination|trackbacks" weblog="ajax-test"}
        {title}
        {body}
    {/exp:weblog:entries}
{/if}

{if logged_out}You must be logged in to view this page!{/if}

I recommend previewing your template to ensure the entries are displaying properly.

Step 2: Grab the Prototype JavaScript library

The script we’ll be using requires Prototype. Get the latest version of Prototype here, upload it to your server, and add the following line to your template (inside the tags):

Step 3: Grab the Script

Here’s where all the magic happens. Grab the script here and save it as editinplace.js (don’t upload it just yet). Be sure to place a call to the script in your template by adding this line:

I recommend leaving the script open in another window while you follow along here.

Step 4: Get familiar with the script

Let’s take a closer look at editinplace.js. The first line ensures the script won’t run until the page is fully loaded. The init() function defines which element ID we want to be editable – in this case, editTitle.

The makeEditable() function does three things:

On mouseclick, call the edit() function, which hides the editable text and displays a textarea and two buttons (“Save” and “Cancel”)
On mouseover, add a CSS class to the editable area (this allows us to highlight it on hover)
On mouseout, remove the CSS class from the editable area

Notice that the showAsEditable() function is creating and removing a CSS class called editable. You can rename this to whatever you want, but be sure to add a declaration to your stylesheet.

The declaration I’m using on the demo page is:

.editable { background:#ffffd3; cursor:pointer; }

If a user clicks “Cancel,” the cleanUp() function is called; it clears the textarea and buttons and unhides the original text.

If a user clicks “Save,” the saveChanges() function is called; it posts the changes, displays a “Saving…” message, and returns the updated text.

Step 5: Grab the PHP

The script you just copied works in tandem with a small PHP script, which takes your changes and echoes them to the screen. Paste the script below into a new file:

Save this file as edit.php and upload it to your server. Update editinplace.js (line 53) to point to your PHP script, then upload this file too.

Step 6: Put the script to work

Now that we know what the scripts are doing, let’s put them to work. Editinplace.js is looking for an element with an ID of editTitle, but your template doesn’t currently have that. Let’s add it in.

Change the

tag in your template to this:

{title}

Save your template and preview it. Move your mouse over your first heading. Assuming you copied my CSS rules from above, you should see a highlighted box surround your heading, and your cursor should change to a pointer. Click the heading, edit the text, and click “Save” or “Cancel.”

If you try to edit your other headings, you’ll notice nothing’s happening.

Why is this? Remember that an ID is unique to a page, so if you have duplicate IDs, you’ll get strange results. In this case, only the first element of a given ID will be editable.

For most ExpressionEngine applications, you’ll be looping through a weblog several times, so this approach won’t work.

Step 7: Making multiple items on the same page editable

First, change the init() function in editinplace.js to this:

function init() {
    var max = 50;
    for (var i = 1; i <= max; i++) {
        makeEditable('editTitle_' + i);
    }
}

Then, in your template, modify your

tag like so:

{title}

Refresh your template and you should be able to make changes to all of your headings.

Step 8: Posting changes to your ExpressionEngine database

Up to this point, we’ve only been echoing changes back to the screen. Now it’s time to make those changes permanent by posting them to a database.

The bulk of the work will come in edit.php, though before we start making changes to that file, we need to add some things to editinplace.js.

Update your saveChanges() function to look like this (changes are in bold):

function saveChanges(obj) {
    var new_content = escape($F(obj.id+'_edit'));

    obj.preUpdate = obj.innerHTML
    obj.innerHTML = "Saving…";
    cleanUp(obj, true);

    var success = function(t){editComplete(t, obj);}
    var failure = function(t){editFailed(t, obj);}

    var url = 'http://path-to-your-scripts-folder/edit.php';
    var pars = 'id=' + obj.id + '&content=' + new_content + '&pre=' + obj.preUpdate;
    var myAjax = new Ajax.Request(url, {method:'post',
    postBody:pars, onSuccess:success, onFailure:failure});
}

If you copy and paste from above, don’t forget to update the path to your PHP file.

Next, update edit.php to look like this:

$pre = $_POST['pre'];
    echo htmlspecialchars($content);

    require_once("path-to-your/include.inc.php");

    $sql = mysql_query("UPDATE exp_weblog_titles SET title = '$content' WHERE title = '$pre'");

    if(!$sql) {
        echo "Unable to update the title!";
    }
?>

You’ll need to create an include file that contains the connection information for your database (grab a sample include file here).

Update the path to your include file, enter your database connection information, save all three files, upload them, and refresh your rendered template. Make some changes to the titles. Refresh the page again, and your changes should remain.

Congratulations – you’ve just made a direct change to your EE database with AJAX!

Going a step further – editing more than just titles

You probably noticed in the demo that the excerpt for each post was also editable. Here’s how you do it:

Step 9: Create another editable element

First, you’ll need to tell the script that you want to make another set of IDs editable. Modify the init() function in editinplace.js to look like this:

function init() {
    var max = 50;
    for (var i = 1; i <= max; i++) {
        makeEditable('editTitle_' + i);
        makeEditable('editBody_' + i);
    }
}

Next, modify your template by adding the new ID:

 id="editBody_{count}">{body}

Finally, to post any changes to your paragraphs to the database, you’ll need to modify edit.php:

    require_once("path-to-your/include.inc.php");

    if(stristr($id, 'Title') == true) {
        $sql = mysql_query("UPDATE exp_weblog_titles SET title = '$content' WHERE title = '$pre'");
    } elseif(stristr($id, 'Body') == true) {
        $sql = mysql_query("UPDATE exp_weblog_data SET field_id_65 = '$content' WHERE field_id_65 = '$pre'");
    }
?>

Since the PHP script is handling requests for both editTitle and editBody, we need to use the stristr() function to determine which ID is being passed in.

Be sure that the field ID matches your custom field! In the example above, it is 65, but yours is likely different.

You can find your field ID by going into the CP, clicking “Admin,” selecting “Custom Weblog Fields,” and hovering your mouse over the field name on the left. The field ID will appear at the very end of the URL string at the bottom left of your browser.

Step 10: Provide a textarea for paragraphs and a text input for titles

You probably don’t want to be editing large hunks of text in a tiny input box. To get a textarea to show up when you click on a paragraph (while keeping a text input for your titles), modify the edit() function in editinplace.js:

function edit(obj) {
    Element.hide(obj);

    if(obj.id.search(/Title/) != -1) {
        // show an input box if we're editing a header
        var textbox ='';
    } else {
        // else show a textarea
        var textbox ='' + obj.innerHTML + '"';
    }

    var button = ' OR ';

    new Insertion.After(obj, textbox+button);

    Event.observe(obj.id+'_save', 'click', function(){saveChanges(obj)}, false);
    Event.observe(obj.id+'_cancel', 'click', function(){cleanUp(obj)}, false);
}

Step 11: Limiting edits to certain member groups

Before you decide to go crazy with inline editing, remember that, without the proper checks, anyone who visits your site can make changes to your content.

For starters, you should wrap your editable areas in a {if logged_in} conditional. Once that’s done, you should also consider only allowing certain member groups to edit content inline. Here’s a quick fix:

{if member_group == 1} id="editTitle_{count}"{/if}>{title}

These conditionals allow you to specify who can edit which areas. You could, for example, allow members to edit your body text, but only allow admins to edit your titles.

Limitations

While working through this script, I came up against a few roadblocks:

When making more than one element (e.g., headers and paragraphs) editable, you must have an equal number of each. In other words, if there are 3 headers on the page that you want to edit, you can’t have more than 3 paragraph blocks that are editable. Paragraphs beyond the 3rd won’t be clickable.
You have to pre-define a max number of editable fields (in my example, this is 50).
Inline editing doesn’t work well with headings that are also anchors

Conclusion

This is my first attempt at getting inline editing to work with ExpressionEngine. I don’t profess to be a code guru, so it is my hope that a little bit of discussion can help improve the code here and make life easier for developers and end users everywhere.

I welcome your feedback, frustrations, and success stories. Good luck!