Interactive Llama :: Interactive media tutorials and tips » plugin

CSSsprite: Photoshop script combines two images for CSS hover

Stephen James — Wed, 19 Nov 2008 20:48:41 +0000

The need

Professional web developers have been aware of CSS sprites or CSS rollovers/hovers since 2004 (The rollover term is taken from JavaScript and the hover term is taken from CSS). They are the background graphics that change position based on mouse hover thus eliminating the need for JavaScript image swaps and image caching since the “mouse on” and “mouse off” are one image. I have been using sprites for years. It is a more tedious process than clicking Swap image on a DreamWeaver drop down menu, but it produces more accessible and more clean code. The most tedious part of creating CSS sprites for menu navigation is aligning the static (in-active) and hover (active) images. This script solves this problem by taking two images and merging them into one. I hope this increases your productivity and creates a more standards-compliant web.

There are online CSS sprite generators out there. My Photoshop script is not as remarkable as these 20 image sprites, but it’s much simpler, and you can assign a keyboard shortcut to it. Also, all my sites are designed in Illustrator which is a slightly different work flow than most. I find that Photoshop is an awful layout program.

Download CSSsprite.jsx

Installation

A JSX script is similar to a Photoshop plugin or an action, but are commands in Photoshop’s JavaScript based script interface. Download and copy this script within the Presets>>Scripts folder of your Photoshop application folder:

OS-X: Macintosh HD/Applications/Adobe Photoshop CS3/Presets/Scripts/
Windows: Program Files/Photoshop CS/Presets/Scripts

The Script will appear under File>>Scripts>>CSSsprite on the menu. You can assign a keyboard shortcut to this script. I prefer Control+Command+S. This shortcut fits well with the Save for Web shortcut, Command+Alt+Shift+S.

Usage

Open two files (and only two files) with the same height and width (if they are different sizes, the offset of your hover button state will not be half of the height). Select the non-hover background image, making it active–thus making the hover background image de-active. Run the script from the Scripts menu mentioned above. This will place the hover background image on the bottom of the sprite. This script does not support adding a third state to the sprite, but you could add a third and fourth state. To do this, first combine the third and fourth state, and then combine that image with the normal/hover sprite.

For your information: States for this script

The following is a list of Photoshop commands that are executed in this script:

Convert Image Mode to RGB
Make horizontal guide at 100% of canvas height
Switch to inactive document (-1 in document array)
“Duplicate Layer. . .” Layer Menu via right click
Switch back to inactive document (+1 in document array)
Double canvas size vertically
Transform/Move top layer down (50% of canvas size)
Zoom In (twice)

Result
This gives you a two-layered Photoshop file with second layer the CSS hover layer. Save the file as GIF, PNG, or JPEG using File>>Save for Web.

Notes
Adobe Photoshop JavaScript is the only cross-platform scripting language for Photoshop. This script was only tested Photoshop CS3 Extended (Mac). Our firm does not use Photoshop for web layout–only for image manipulation. We use Illustrator for layout.

I would like to thank the creators of ScriptingListenerJS and ActionToJavaScript.

You may be interested in this PhotoShop script that creates a sprite from all the images in a folder.

Create reading list in WordPress from Amazon Wish List using Yahoo! Pipes

Stephen James — Wed, 25 Jun 2008 19:18:04 +0000

I read many books from the library. I don’t finished reading many books though. First of all, they are free, since they are from the library, and second my attention span doesn’t last that long. I believe browsing the web daily from age 14 (circa 1996) will do that to someone (read the latest cover story in The Atlantic Monthly, is Google Making Us Stoopid). Most of the books I read come from the magazines I read (The Atlantic, Books & Culture: A Christian Review) or from the podcasts I listen to (Diane Rehm, This Week in Tech).

Either way, I want to share my latest reading endeavors across my blogs. But how?

Originally I used Roblog’s WordPress Plugin, Now Reading, It’s truly a great plug-in. You can search Amazon for your book and grab the information. It has Now Reading, Have Read and Planned Reading sections. You can rate your books and write reviews. I discovered early on that I was not interested in writing reviews of the books. The other drawback was that it was locked into one blog. I placed it my Cultured Media blog where I list the podcasts and media that I listen to. I wanted to place my current reading in the sidebar or the footer of all my blogs–and why stop there? Why not Facebook, too? The other problem is that I didn’t want to search for the name of the book on Amazon, then log into my blog and paste the name into Now Reading to add it.

Portable list of information that can be subscribed to from multiple locations? Sounds like RSS feeds to me. I found an Amazon Wish List import for Yahoo! Pipes. It did an XML look-up on any public wish list and then published the information you wanted. I cloned it to my Pipes page, and soon found out it was an old version of Amazon Web Services. After a few hours spent parsing, the new version 4 web services offering from Amazon, I was good to go.

The limitation of my Amazon-Yahoo! Pipes RSS lookup is that you can only grab one page of items at a time. This isn’t a problem for my use. I didn’t want more than 10 items anyway.

Once, you have your pipes set up, then use FeedList to display your RSS feed from Yahoo! Pipes. An example of this is at the bottom of my blog. When I want to update my reading list, I add an item to my Amazon Wish List. And there’s nothing to limit this process to books. Whatever you add your Amazon Wish List will show up in the feed–not only books.

SideBlog changes: remove titles, link post content

Stephen James — Thu, 19 Jun 2008 15:12:54 +0000

As you already know, I post all my non-reply tweets from Twitter on my personal blog with Twitter Tools. I do not display the posts with the Twitter Tools widget, but with SideBlog. With SideBlog you can place all posts from a particular category in the sidebar. I have chosen to show only my “Tweets from Twitter” category. The original output of SideBlog places a title, post content and a permalinked “#” at the end of the post. This wasn’t minimalistic enough, and on top of that with Twitter Tools the first 40 characters of your content is your title, so you are repeating yourself. I don’t care for the pound sign, “#”, either. So I made the following changes to the plug-in.

Edit One
This edit comments out all the SideBlog plug-in’s output except for the permalink and the content. You will find this code within SideBlog 5.1 at about line 170 within the function, sideblog($asidecategory=”).

// smjdesign BEGIN edit
$replacements[] = $sideblog_content->post_title;
// $replacements[] = wpautop($sideblog_content->post_content);
// $replacements[] = "#";
$replacements[] = ""
.format_if_content_contains_link($sideblog_content->post_content);
// $replacements[] = "post_title . "\">"
.$sideblog_content->post_title . "";
// $replacements[] = $sideblog_content->post_date;
// $replacements[] = ""
.$sideblog_content->post_date . "";
// $replacements[] = $excerpt;
// $replacements[] = $excerpt2;
// smjdesign END edit

Edit Two:
Place the function, format_if_content_contains_link(), within sideblog.php. I have placed around line 200 after function, sideblog(). This function tests to see if the post content contains a link. There are better (non Regular Expression) ways to do this with PHP5. This function is needed to make content that contain links valid HTML (or XHTML). If not used, links tags will encapsulate other links tags.

// smjdesign BEGIN edit
function format_if_content_contains_link($content) {
	if( substr($content, strlen($content)-4 , 4) == "" ) {
		$content_arr = split("


You can view the output of these changes in the sidebar at my personal site, Rachel and Stephen.
How to keep SideBlog posts within your post query
I noticed that quite a few people are discovering this page by wanting to NOT exclude “SideBlog categories” from the general post query (i.e.- from index.php). To do that, you will want to remove/comment out the filter:
add_filter('pre_get_posts','sideblog_post_filter');

from the sideblog.php plugin file. I like to include my "SideBlog category" within the general listing, since these are asides or mini-posts.



Change media and images to full size in WordPress media gallery
Stephen James — Thu, 22 May 2008 00:15:09 +0000
I’ve been familiarizing myself with WordPress 2.5′s new media gallery. If you’ve visited my blog before, you know I don’t upload many images, but I’m hoping to upload many images to my wife, Rachel Steely’s website. I was annoyed to find out that the default image posting size is medium (which is about 300px). On top of that, if you select full size, it doesn’t mean full size. It means your WordPress theme’s column width. So unless you are using Kubrick your media size will not be your column width.
Change Full Size image width to match theme
The column width in WordPress’s default theme Kubrick is 500px. Therefore, the default (maximum) image size is 500px. The column width of the blog I am posting to is 614px. You can set a global variable to change this setting. Create if not already existing functions.php in your theme directory. Define your maximum media width (that is “Full Size” in the Gallery interface):




$content_width = 614;

?>
I’ve set mine to 614 pixels since that is the width of my div with the class  “.entry” minus padding. If this does not work, some have solved this problem with $GLOBALS['content_width'] = 614; also. You can view this setting at a post at RachelSteely.com.
Default media to Full Size
I prefer to justify my media (align left and right) to the column width. To do this, set default selected size to “Full Size” by changing the code in /wp-admin/includes/media.php. Move the ‘checked’ radio attribute from Medium to Full Size.
Line 458:



" : '' ) . "

" . __('Medium') . "




change to



" : '' ) . "

" . __('Medium') . "


And that’s it! Happy uploading with the new and improved (and customized) WordPress media gallery.



Ignore reply tweets and SEO URLs with Twitter Tools WordPress Plug-in
Stephen James — Thu, 27 Mar 2008 04:20:09 +0000
It’s been a hot debate over what to include in your blog’s RSS recently. I say you should include more than blog posts in your RSS feed IF (and this is a big if) you can editorialize what goes in. The following, explains how to change which tweets from Twitter get posted to your blog and into your RSS feed.
If you use Alex King’s Twitter Tools (version: 1.1b1), you will want to make the following two changes to his code. The first one will make your tweet-post URLs and title more beautiful and SEO friendly by not splitting words at the end. The second one will remove reply tweets (‘@username’) from becoming posts in your blog, so that half-conversations do not get recorded.
In Alex King’s purpose, Twitter Tools is an archiving tool that saves tweets into his blog. If you use version: 1.2b1, then Twitter Tools can hide reply tweets (those beginning with ‘@’) from displaying in the Twitter Tools sidebar widget, but it will still save every tweet as a blog post. In my purpose of Twitter Tools, I do not want to save (and thus post) tweets that begin with ‘@.’ Therefore you will still need to add the additions to the do_tweet_post function below. If you do not, all tweets will end up in your RSS feed as blog posts.
Let’s not mince words here
If you link your tweets and publish them in your RSS feed, you may have noticed that Twitter Tools trims tweets at 30 characters and usually cuts off a title mid-word. It would be better to index to the previous space and trim the post-slug there. Replacing the code of the function, trim_add_elipsis (at about line 1030 in twitter-tools.php, before function ak_gmmktime()) with the code that follows will do this:
if (!function_exists('trim_add_elipsis')) {
// smjdesign edit begin - - - - - - - - - - - - - - - - - - - - - - - - - - - -
function trim_add_elipsis($string, $limit = 100) {
// shorten string
$string = substr($string, 0, $limit);
//find last space character
$max_char_pos = strrpos($string, ' ');
// shorten to last space and add ellipsis
if ($max_char_pos > 0)    { $string = substr($string, 0, $max_char_pos)."..."; }
return $string;
}
// smjdesign edit end - - - - - - - - - - - - - - - - - - - - - - - - - - - -
As a bonus, I’ll tell you were you can change the length of the title, too. It’s around line 205 within the do_tweet_post function. Look for a ’30′ at the end of a line containing “trim_add_elipsis” Change the ’30′ to something larger, for instance 40 or 50.
When indirect communication is preferred 
UPDATE: Alex has made ignoring reply tweets (beginning with ‘@’) a standard option within Twitter Tools. However, I still recommend changing the trim size as I mention above.
I can’t imagine using Twitter Tools without the following change. If not made, one will be listing half conversations in their blog. In order to ignore direct tweets (or more specifically tweets that start with ‘@’), edit the following code at the end of the do_tweet_post function (at about line 215 in twitter-tools.php):
function do_tweet_post($tweet) {
global $wpdb;
remove_action('publish_post', 'aktt_notify_twitter');
$data = array(
'post_content' => $wpdb->escape(aktt_make_clickable($tweet->tw_text))
// smjdesign edit begin - - - - - - - - - - - - - - - - - - - - - - - - - - - -
, 'post_title' => $wpdb->escape(trim_add_elipsis($tweet->tw_text, 40))
// smjdesign edit end - - - - - - - - - - - - - - - - - - - - - - - - - - - -
, 'post_date' => get_date_from_gmt(date('Y-m-d H:i:s', $tweet->tw_created_at))
, 'post_category' => array($this->blog_post_category)
, 'post_status' => 'publish'
, 'post_author' => $wpdb->escape($this->blog_post_author)
);
// smjdesign edit begin - - - - - - - - - - - - - - - - - - - - - - - - - - - -
if(substr($data["post_content"], 0, 1) != '@') {
$post_id = wp_insert_post($data);
add_post_meta($post_id, 'aktt_twitter_id', $tweet->tw_id, true);
wp_set_post_tags($post_id, $this->blog_post_tags);
}
// smjdesign edit end - - - - - - - - - - - - - - - - - - - - - - - - - - - -
add_action('publish_post', 'aktt_notify_twitter');
}
As always, you can email me from the contact page and ask me for the entire PHP file if you do not feel comfortable editing the file yourself.