LightSpeed Webstore: a way to have product images larger than 512×512

Let’s face it, as a web designer it’s not fun to have to tell a client that they can’t have something and if they’re using LightSpeed Web Store for their eCommerce solution ( developed by that venerable company, LightSpeed) they can’t have all the bells and whistles for their product images.

On the client’s side, the LightSpeed POS looks so flashy and so well, capable that they’re often flummoxed when they’re told they can’t have product images larger than 512 pixels, width/height. Make sure right off the bat you pony up that wobbler: 512 x 512 is the max photo size. But keep it a secret if you like explaining big caveats seconds before the launch.

“What’s all this fuss about. I sell products that sell themselves. My customers couldn’t care less about photos.” Really? What kind of products don’t even need a photo? The product photo is the only way to show customers… Wait, you do know we are talking about online stores, right?

“What’s all this fuss about. I only use the POS and couldn’t give less of a hoot.” Why are you talking to me, then?

“What’s all this fuss about. 512 x 512 is plenty big. In fact, if the photos were any larger customers would be able to see how bad my photographs are. Couldn’t have that. Might have to actually pay an actual photographer one day but for now my smartphone’s camera and I do the job. And it’s free.”

Do not get me started on cutting corners with product photography. Besides, just because other webstore owners could have larger images wouldn’t mean you’d have to also have larger images.You could keep uploading little photos.

All joking aside, while it’s not that important to brick & mortar retailers ( for obvious reasons I really hope), it’s very important, if not vital for online resellers to have larger product images. If I shop online I won’t buy an apparel product unless I can see a larger image of it. This goes for shoes, handbags, hats and jewelry. I suspect if covers furniture, art and table-top as well as bath appointments and fixtures and what ever else kinds of products where you have to be able to see the product enlarged in order to feel confident enough about it in order to add it to your cart.

What we can do with the template, right now, out of the box:
If we have the real estate and the desired look allows for it we can enlarge the product detail images area to accomodate a full size 512 x 512 image. But most of the time we don’t have that much space to work with.

But say we can squeeze the full-size in, then what?
If we’re restricted to just 512 w/h, we can’t use a zoom tool because we’d be zooming a 512 image and what we’d get is ugly not to mention useless because you’re supposed to zoom to a larger image than what is already visible not show the exact same image size in a lightbox window.

The “solution” that’s most widely used is to make the main image display at a smaller width/height so that the lightbox window actually shows a larger image… with well-shot additional images that close up on important details, it can work.

But if you can use it WordPress can fill in where LightSpeed leaves off.

First of all, I’m not suggesting you should install WordPress if all you’re going to be using it for is to have larger images. But WordPress makes it so damn easy to upload images, create posts and insert images in these posts and get the webstore template to show the posts in a lightbox/fancybox window that it wouldn’t be so nuts if you did install WordPress just for Larger Product Images. Not everyone uses an FTP client. At least,my clients certainly don’t. So if you go for “ease of use” over how much it’s going to be used I don’t think anyone would blame you. That much.

I registered a custom post type named Larger Product Images in my theme’s functions.php.
When I made my larger image posts I used a Featured Image and I inserted 2 to 3 inline images into the post editor.
As far as creating the single template went, the images inserted into the editor were the_content();.
The Featured Image, the_post_thumbnail(‘larger-image’); was declared in functions.php with add_image_size( ‘larger-image’, 600, 600 );.

I added a new template file to my theme called single-{name-of-post-type}.php. Since I wasn’t really concerned with the way the permalinks looked and I wanted a really, really unique post type name, I’d named my post type “lgr-imgs-gal” which meant my single template was named single-lgr-imgs-gal.php. Again you don’t have to be that precious about setting up the post type. You could do something as slight as this (in functions.php of your WordPress theme):

// register custom post type

function register_custom_post_types() {	
	// register custom post type
	$labels = array(
		'name' => 'Product Larger Image Galleries',
		'singular_name' => 'Product Larger Image Gallery'
	);	

	$args = array(
		'labels' => $labels,
		'public' => true,
		'capability_type' => 'post',
		'exclude_from_search' => true, 		
		'supports' => array('title','editor','thumbnail','custom-fields'),
	); 	

register_post_type('lgr-imgs-gal', $args);
}

add_action('init', 'register_custom_post_types');

This post type doesn’t need an archive and the URLs don’t have to make any sense human-readable-wise. All it’s doing is showing larger images in the webstore. Also, the theme never has to call the file in the WordPress part of the site, meaning you aren’t going to be showing the larger image galleries in a custom page or anything like that. As far as visitors looking through your site are concerned this post type doesn’t exist except to show larger images in the webstore via a “simple” link (placed somewhere logical in product_details.php).

The “simple” link:

<a class="fooey view" href="http://www.your-domain.com/your-wordpress-location/lgr-imgs-gal/<?= strtolower(preg_replace('/[^A-Za-z0-9-]/', '',$this->prod->Name));?>/"><?php _xt("Larger Images");?></a>

Most of the URL is hard coded because it can be. The part that can’t be hardcoded is the name of the product so we have to use code to get that. Luckily that’s included in the template file for us. The new code will take all the spaces and make the product name all lowercase. This should make linking to the single galleries by name easier.

To create the titles of the posts all you have to do is hover over the link that the code above creates. Go to your webstore, click through to a single product and hover over the link text – you’ll see what the revised name of the product is. Use the revised name as the Title of the larger image gallery Post.

You can even copy the link and paste it into the Title area of the Post Editor and delete everything up to the actual name if you’re still not sure what it is.

If you want to be more careful about things ( say you have 2 products with the same name for some reason but they have different product codes) you could put the product code in the URL and use that as the post title.
Just replace $this->prod->Name with $this->prod->Code. We went with names because it seemed easier to understand. If your product codes are strictly numerical you don’t even need the part of the code that removes the spaces and makes it all lowercase ( since all lowercase only applies to alphabetical characters). In that case you could probably get by with just this:

<a class="fooey view" href="http://www.your-domain.com/your-wordpress-location/lgr-imgs-gal/<?= $this->prod->Code));?>/"><?php _xt("Larger Images");?></a>

Where your webstore is installed, locate assets/js/webstore.js.
If you haven’t edited this file you should be able to locate lines 42 to 46:

$(document).ready(function()
{
	$("#xlsSearch").bind('keyup',autosuggest);	
	$("a.iframe").fancybox();	
});

Right after:

$("a.iframe").fancybox();

Paste this:

$('a.fooey.view').fancybox({
'width': '100%',
'height': '100%',
'type': 'ajax',
'ajax': {   
dataFilter: function(data) {
return $(data).find('#largesse')[0];
        }        
   }

  });

$("#thumbs a").live('click', function(evt) { 

     evt.preventDefault(); 

$("#main-image").empty().append(

 $("<img>", { 
 src: this.href 
          }
    ));
}); 

All the above does is make the link load the single galleries in a lightbox-ish window using fancybox which is a jquery plugin that is loaded with webstore by default. *Meaning I didn’t add it, they did so it’s approved to be used in webstore.

*About that little comment:
Whenever possible I try to avoid adding new stuff to webstore because every so often my clients have an issue with the Point of Sale & webstore and the 1st thing they hear is “well, your template is custom, must be a problem with the code in it”. Sometimes this is true. But since I’ve gotten very very very careful when making custom webstores it’s not as true as it used to be :).

In fact you should never mention your webstore is custom when contacting support. Not to be mendacious ( anyway they’re going to look at your store in a browser and see it’s customized) but to stop the support thread from stopping at “well, it’s customized”. If you EVER contact support about something in the webstore not working be sure to tell them that you recreated the issue you’re having with a completely clean webstore. That means the template was switched FROM the Custom template To Deluxe, Basic or Framework and each of these templates are 100% unedited and virgin. It also means removing any other edits you made to any other file anywhere else. And for the sake of everybody’s sanity please actually do this, don’t just say you did it! That’s not fair to support and you won’t get to the bottom of the issue (probably). The whole point of this advice is to make sure they talk to you about the actual issue not about the fact that you webstore isn’t using Deluxe, Basic or Framework.

What about single-lgr-imgs-gal.php?
Won’t the lightbox window load a complete page when we only need to get the galleries not the whole page?
Here is the template:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title><?php
	
	global $page, $paged;
	wp_title( '|', true, 'right' );			

?></title>

<link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_directory' ); ?>/larger-image.css" />
</head>

<body class="single-lgr-imgs-gal">

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
				
<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>									

<div id="largesse" class="larger-images-entry larger-images">
 <div id="thumbs"><?php the_content(); ?></div>					
  <div id="main-image"><?php the_post_thumbnail('larger-image');?>
  </div>  
</div><!-- .entry-content -->

<div class="entry-utility">					
<?php edit_post_link( __( 'Edit', 'coclico' ), '<span class="edit-link">', '</span>' ); ?>					
</div><!-- .entry-utility -->					
</div><!-- #post-## -->					

<?php endwhile; // end of the loop. ?>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript"> 
 jQuery(document).ready(function($) {
     $("#thumbs a").live('click', function(evt) {
     evt.preventDefault(); 
     $("#main-image").empty().append(
     $("<img>", { src: this.href}));
   
     }); 

  });     
    

 
</script>		

</body>
</html>

The code in webstore.js is only going to load div#largesse in the fancybox window.

Everything else such as normal document structure,css and javascript (to make the thumbnails in the gallery load into div#main-image stage) is so that the galleries – if they get loaded outside the fancybox – will work and look nice.
You’ll still have to add the css for the galleries into webstore/yourtemplate/css/webstore.css.

Anyway I hope this helps someone out. I beat my brains out doing it but I’m glad I did it because it works really well.

One last thing: make sure to use http://mydomain.com OR http://www.mydomain.com, not both. So go to WordPress > dashboard > Settings > General and check the wordpress address and the site address. They should be either http://mydomain.com/ OR http://www.mydomain.com. It seems to make a difference with how fast the larger images galleries load with fancybox. I could be out of my mind. But I tried it out and I definitely saw some serious slow loading or never loading when I was in www.mydomain.com. and was trying to load a gallery located with just http://mydomain.com. If you switch to www. in Settings > General you’ll get logged out. But you’ll be able to log back in with the same password and username, don’t worry.

Using WP 3.1, jQuery, Cforms & WP-E-Commerce? Frustrated by Javascript Errors?

The main error I’ve seen when using these 2 plugins and using WordPress’ jQuery is “jquery form.product_form .livequery is not a function” which makes it look like the wp-e-commerce plugin is at fault but it actually isn’t. I know it isn’t because I de activated all my plugins and re activated them one by one until the error came back. With my specific set up the error only came back when I had cforms and wp-e-commerce activated at the same time.

You’ve learned how to enqueue jQuery plugins with WordPress’ jQuery without errors.WP-E-Commerce relies on WordPress’ jQuery. CformsII uses jQuery 1.4.2. WordPress uses jQuery 1.4.4. So now you’ve got 2 versions of jQuery being loaded at the same time which we all know means Javascript errors.

The easiest thing to do is FTP into your server, go to wp-content/plugins/cforms/js, open jquery.js and paste in a copy of jQuery 1.4.4. Doing this will not disrupt cformsII on the backend or submitting forms on the frontend.

If you upgrade cforms you’ll have to do this all over again. But since you’re not editing lines of code this is a snap to repeat.

* Note: Just because FireFox Web Developer or Firebug are reporting JS errors doesn’t necessarily mean things are not working as they should be. But you should remember that Internet Explorer is going show a nasty message: “error on page” or “done, but with errors on page” that your clients and their customers will see. But if you fix it before they see it it can be one less thing you’ll have to hear about.

This advice can be used with other combinations of plugins. If any plugin is enqueuing its own copy of jQuery that is not 1.4.4 and you’ve already enqueued WordPress’ jQuery you can just empty the plugin’s jquery.js so that its enqueuing an empty file or paste in 1.4.4. You’ll have to make sure doing this doesn’t stop the plugin from functioning, I’ve only tested this “fix” with cformsII.

In any event as long as everyone is using the same version of jQuery there won’t be any errors.

How are you dealing with Javascript errors?

WordPress As A CMS: Getting Started

In This Post: The Dashboard De-mystified. Posts or Pages? Categories &Category Relationships. Changing the Look of the Default Sidebar. The Plugins I Like.

Maybe you’ve already chosen WordPress or are seriously considering it. Maybe you’ve even already done the famous 5 minute WordPress installation. Maybe you’ve already chosen one of the free themes or enlisted some paid help getting one made just for you? Whatever the case, you should be very pleased with yourself to have gotten this far and I’ll bet you’re super jazzed to have your own website that uses your own domain name.

Trouble is, now what? How to make sense of the Dashboard? What does what? What do all these crazy terms mean? You’re scared to touch anything! Some settings are self explanatory but the only way to get comfortable is to jump in and start looking and reading. It’s like a new house with lots of rooms and who can stand not knowing what all the rooms look like? If you don’t think its a good idea to change a setting, don’t. But don’t be afraid to at least log in and look at the pages – because just looking does no harm.

Dashboard Settings

General – where your site title and description goes.
Writing -where you pick the default post category.
Reading – controls what the first page of your site shows which, by default, are your posts. You can make a page called Home and pick that to be the first page. Go to Pages >> Add New and create it there. But then you should also choose another page to show the blog posts. So make another page and choose that to be your posts page. You can be very creative with the title: Jeffery Zeldman titles his “The Daily Report” and I think that is pretty cool.Because there is so much one can do with Templates this section really deserves a complete post. But to keep things going I’ve kept it short.
Discussion controls your comments.
Media – choose image sizes
Privacy – choose whether or not search engines can index your site.
Permalinks – choose the way your linkage is set up.
Miscellaneous – pick where your images get uploaded- default is uploads. Also by default they are separated into year and month folders.

And just because I care here are some screenshots to illustrate each page.

Default Blues
All first time WordPress installations have one category, one page, one post and one comment. I can’t tell you how many About Me pages I’ve seen explaining what a Page in WordPress is and how many posts I’ve seen in Uncategorized, too for that matter. You’re expected to rename, edit or delete that stuff. You can’t delete the Uncategorized category (because WordPress needs at least one category) but you can rename Uncategorized to something more personalized like Random or General…The main point is the more you change stuff the more you make it your own. Don’t leave something as is if it is going to be visible on your site. Tip: In your User Profile page, you can type in the name you want to appear in the greeting in the dashboard or next to your posts and then click save. Then you can choose this name from the drop down list box and this will be the author name (and might appear next to your posts if your template allows this). Isn’t Posted by (your name) better than “Posted by admin”?

Sidebars
Default sidebars tend to show everything from a pages menu to a calendar, this is because there aren’t any widgets being used yet. Once you add widgets – only the content displayed by those widgets will show in your sidebars.

The Empty Website Blues 🙁
At this stage you don’t need to worry too much about how your sidebar will look and which widgets to use. You have bigger fish to fry! The biggest problem for nascent websites is the lack of content. The most important thing to focus on right now at this stage of your site is adding some.

Should You Use Pages or Posts?
WordPress as a CMS is more powerful when it is used as it was meant to be used which is the displaying of posts assigned to categories. Pages should be used for About Me, Contact and Photo Galleries or whatever- as long as that content is going to remain the same for an extended amount of time. If you really really don’t need Posts and even though that will leave your site pretty limited go ahead and use only Pages. Its your website! WordPress can make a new Page as easily as it can add a new Post,that’s why it is such a great CMS.

What Do Categories Do?
Categories organize your posts. Categories make it possible to keep post content separate from other post content.
Example: If you write about Celebrities you could make a child category of Celebrities called Angelina Jolie. Whenever you add a new post about ms.thing you would choose the Angelina Jolie category. Then you could have a list in your sidebar of your posts about Celebrities with a nested list of posts about Angelina Jolie. You could make as many of these “Celebrities” child categories as there are celebrities!
If your posts will only pictures of Celebrities then make a child category of Celebrities called photos with a grandchild category called Angelina Jolie. In my mind that is a very practical use of the grandchild category. More about that later on in this post.

Categories Run Everything!
Many people misunderstand categories. They either don’t use them at all or they make up a new category each time they write a new post.

The folks that add a new category for each new post could eventually have a totally bloated amount of categories, each with just one post assigned to it. This defeats the purpose and makes it just as hard to find interesting content as if there were no categories at all. Try instead to use a few Parent categories and then use as many Tags as you want.

On the other end of the spectrum are the people who don’t use or create any new categories,ever so all their posts go into Uncategorized.

Before you get started think about whether the desire for a certain kind of category widget is behind your motivation for creating categories. Ideally, the organization of content should not be determined by a stylistic preference but rather because it is a vital step towards helping people find what they are looking for.

The Parent, Child and Grandchild Category Relationship
If you want to set up parent, child and grandchild relationships for your categories, first you need to know what the main focus of your site is going to be. If the focus is going to be on Kitchen Supplies, here is one way to begin cataloging that vast area. Although I do think this kind of micro managing of categories better suits product pages, not post pages.

Parent Category: Cutlery

Child : Fork
Grandchild : Salad Forks
Child : Seafood Forks
Grandchild : Shrimp Forks
Grandchild : Crab Forks

Child : Spoon
Grandchild: Dessert Spoons
Grandchild : Soup Spoons

Child : Knife
Grandchild : Steak Knives
Grandchild : Butter Knives

I could be wrong but I have managed quite a few WordPress as a CMS type websites for over 3 years and not one of my clients (so far) ever really needed a grandchild category relationship.

There are plugins for practically everything. When choosing plugins, keep in mind you are inviting code into your WordPress site that might conflict with other plugins, might not use code that produces 100% valid XHTML, might make you fall in love with it only to be dropped by the plugin creator next month. And might just not work! But here are some I swear by.
All In One SEO (by default WP is pretty SEO challenged)
XML-Sitemaps (then you can submit a sitemap to Google Webmaster Tools)
Flexi Pages (build your own sidebar page menu that shows only pages you want)
WP Database Backup (if disaster strikes- this is plugin is going to save your hide)
Tiny Contact Form (little contact form)
Cforms (build any kind of form you can think of)
WP-Ecommerce (online shop plugin, robust and highly supported with frequent upgrades and an active user forum, vital!)
NextGen (excellent photo gallery and album manager)

Nags:
If it is a business site keep the personal topic posts to a minimum, less than 5%. Set up a category called Personal so it will be obvious what that section is about.
Be careful with what you reveal, even sites meant to be 100% personal don’t need to get too personal.

New Website: Closet Space

picture-6The first first is a chance to design a movie trailer web site for a friend of mine, Sheru Arora (I did his main site askarora.com). I have always wanted to do one and best of it it’s a Horror flick. My favorite genre these days. I’m not sure what is is, a ghost story or a monster story or both. But it looks exciting and scary. It’s called Closet Space and is sure to scare the pants off of you. I know I used to be afriad of the closet.Especially after seeing Poltergeist as a kid. Parents be warned it’s probably going to cause trauma in small chirrens.

This is a fluid width site which means I did not use #page{width:980px}. Main divs are using percents. I started doing this for my main content div and my sidebar div on other websites but never for a wrapper. The big reason I wanted to try this is because I now have a widescreen monitor. That’s basically it. I’m really not involved in the fluid vs. fixed debate.

The screenshot shows the background image, the trailer playing in the ProPlayer Plugin for WordPress, and the Closet Space banner. I was given a still image from the trailer to work with as the background image. It did not look right “as was” so I grunged it up in Photoshop with some grunge brushes I got from Deviant Art which, by the way is my number one Photoshop Resource destination.

The banner logo is made up of 5 or 6 text layers all set to Overlay and using the blend option Outside Glow. The more text layers, the brighter the glow got. The font face is Baskerville.