  
Globally Replacing Cafepress Images with CPShop
(October, 2006)
It’s possible to use CPShop’s “images”
file to replace all sorts of text and HTML that comes
in from the Cafepress servers, and I’ve used it
for a variety of things - including disabling content
or features that I’ve decided I don’t want
in my CPShop. But the original purpose of that images
file is for replacing the default product and thumbnail
images with your own, custom images, and it does that
very well.
You
might want to do this in order to change the background
color of the product images, or in some other way
to make them match your site design. You might want
to create a more readable thumbnail image for products
like the golf shirts or women’s hoodie, whose
pocket graphic can’t really be seen in the default
150 pixel store image. You might want to use an alternate
image size, but just letting the user’s browser
scale the image gives unacceptable results. You might
even want to correct bugs or inconsistencies in the
Cafepress thumbnails. For me, the reason I started
doing this was purely for site performance. The CP
image servers frequently have problems, and store
images may become erratically unavailable –
especially in high traffic times like the holiday
season.
Because
of numerous image changes this year, and in order
to make some changes to my products, I’ve
just gone through this process for the second time.
I figured that I’d document it while it’s
all fresh in my mind in case anyone else chooses
to do this – it’s not quite as simple
as it used to be.
The
images file was meant to replace the full URL of
an image. For my purposes, since I wanted to replace
ALL my store images, this wasn’t practical.
What I do is to use the images file to replace only
the path to the image, so that –
in a perfect world – all I’d need to
do would be to duplicate all my store and product
images in a single place, add a few lines to the
images file, and everything would simply work.
In
practice it’s gotten a bit more complicated
this year. There have been several changes to filenames
and image paths for CP’s store images, so
that I’ve had to adapt my images file to accommodate
the changes.
I
don’t recommend that you try doing this unless
you feel you have a very good reason for doing it
– it can be a lot of work to set up in the first
place, and it will mean that your CPShop will require
additional maintenance that you may not want to perform.
In my case I found that it was worth it, since within
a month of setting it up the image servers went south
in a big way and I alone, muahaha,
had a working shop. Despite the effort I think it’s
worth it for me, since I’m now immune to that
sort of trouble.
…but
I really ought to play Devil’s Advocate anyhow.
Reasons
You Should Not Do This
1.
Duplicating all your store images is a lot of work.
…and it’s tedious, too.
If you’re going to replace your images globally
you need to save off every one of them so that you
can upload local copies to your web server. Your
shop may have hundreds of products, and most products
have a small “store” thumbnail and two
full size product images (front and back, or Front
and Inside). That’s a lot of images.
The best way I know how to do this without altering
any image names, or grabbing a lot of unwanted images,
is to view every one of your sections and products
in your browser and save it off by right-clicking
on it. I’d like to think there’s an
easier way, and that I’m just not smart enough
to figure it out.
2. New Product image swapping for color variations.
If
you want to support the new image-swapping feature
for color variations on clothing, you would need
to duplicate three additional images for every affected
product. (It’s possible to disable this feature,
if your custom images are more important to you
than the pretty cool color-switching product images
– more below.)
3. Product image names now change.
If you make a change to a product that rebuilds
its product images, the product image name now changes.
The old product image is not deleted, and while
the page information is cached your CPShop will
continue to show the old image. Once the cache expires,
if you haven’t done something to allow for
this, either globally or by reproducing the new
product images, your product image will not show.
I have a workaround for this, too, but like everything
else here it requires you to take a maintenance
step that normally isn’t necessary.
It is very possible that this would also happen
if CafePress should automatically regenerate its
store images, as they have done in the past. For
that reason I’d recommend that step that I
am taking, which will be described below.
4. More Work to Add Products.
Duplicating
the images, even if you’re not modifying them,
adds an additional step to adding designs and products
to your store. For that reason alone, you may not
wish to do this.
CafePress
filename conventions have been changing, and you
may have to modify your images to cope. For the
most part I’ve been able to do this automatically
– but for example, the inside images for greeting
cards recently changed from “Back” or
“B” to “Inside”. I had to
make replacements for those images to adapt, since
this was a change I couldn’t remap globally.
You
should never do this with affiliated products.
First, it’s against the affiliate TOS; and
second, you will have no idea when or how an affiliated
product may change. Its store and product images
should always be “live”.
Reasons
You Might Do This
1.
Performance and Uptime.
This, like I said, was why I started and why I’ve
decided to continue. Any time the Cafepress image
servers go down or get sluggish, my shop images
still come up reliably and customers have no idea
that there’s a problem somewhere else. Obviously
my site still has to draw the non-image data from
CP, so if their whole site has problems then I have
problems too. But I don’t have to worry about
the images, which are the element most likely to
have problems.
2.
Correcting image problems.
This is necessarily subject to change. At the time
of writing, one significant problem is that the
“Back” image for the women’s hoodie
is not square; it’s 219 by 240, rather than
240 by 240. Your CPShop installation displays this
as 240 by 240, so the user’s browser stretches
it to that size. The back images for this product
end up looking pixellated and jagged for that reason.
In addition, during my latest round of image gathering
I found about half a dozen “Store”,
or thumbnail images, which were also a non-square
shape and an odd size, something like 120 by 125.
I was able to make new square images to replace
these, and my own images won’t change to a
buggy state if a problem like that appears again.
You may want to make global changes like altering
the background color of all your images –
I’d rather not. There are just too many
of them to modify every single one.
There are a few changes I do make, though.
A.
I remove the “Made in USA” stamps
from those products that have them, because I
feel it’s a bad idea.
B. I make new store thumbnails for Golf Shirts
and Women’s Raglan Hoodies – these
shirts have small pocket designs, and those can’t
really be seen in the default images. What I do
there is to crop the upper right part of the Front
product image to make a new “zoomed in”
thumbnail that better shows the pocket design
area.
C. I now lower the saturation on the neon product
images for the yellow and green shirts –
the product images are much more saturated than
the shirts themselves are.
D. I make new poster thumbnails and product images.
If a poster is trimmed to less than its maximum
size, its thumbnail and product image is that
much smaller than the image size – that
is, the image always leave space for that part
of the poster that’s to be trimmed off.
So these images often have a lot of whitespace
around them which could be better used to show
the poster itself. Posters are the whole reason
I started this, so I want to present them better
than that.
E. Due to some CP changes that made their content
use more horizontal space, I had to start scaling
my store images from 150 by 150 to 140 by 140.
Browsers do this badly; Photoshop does this well.
One
thing I’d love to do would be to use my 3D rendering
tools to make much better images for the mugs –
images in which my design actually wraps around the
mug, instead of being plopped flat on its image. That’s
a big enough project that I haven’t done it
yet.
How
To Globally Replace Your Images
So
if you think this is worth the hassle, here’s
how to globally replace every store and product image
in your CPShop.
1.
Capture all your store’s images.
You’ll need to save off copies of every store
thumbnail and every product image. I haven’t
had the courage to duplicate all the possible color
swatch product images, but you could do that too.
I do this by product type (like, all white t shirts,
etc.) because I may process different products differently.
You can capture these images from your CPShop site,
or from the preview pages (“Preview this page”)
for your shop at Cafepress. In the public shop display
at CafePress these images are protected from being
saved locally.
2.
Modify any of these images as you wish.
I have Photoshop actions for scaling, saturation,
and cropping modifications that I use, and by moving
all images of a certain type to a folder by themselves
you can use batch processing to change them all at
once.
3.
File Renaming
During my first year of replacing these images, some
naming changes made it necessary for me to adapt.
In this new round, all my image names already conform
to the current file naming conventions. They’ve
apparently been regenerated automatically.
There’s
no guarantee that this won’t happen again.
There’s
one more wrinkle. In its current state, Cafepress
now changes the name of a product image when it’s
regenerated. A “v2”, “v3”,
or other version number is appended to the product
number in the filename. I don’t know whether
this is a version number for the image, or for the
image processing system – but whichever one
it is I need to remove it if my custom images are
going to continue to work even if CafePress
should automatically rebuild all its own thumbnail
images.
So
I first batch rename my custom images to remove the
“v2”, “v3”, etc. Then I use
the CPShop images file to filter out those characters
from the filenames. Once I do those two things my
shop basically ignores the version numbers for all
product images.
I
have no idea how high the version numbers go (I’ve
had them as high as 7) and I’ll just need to
watch things to see if they go any higher. If they
do, I’ll just need to add a line or lines to
my images file, to filter those higher numbers out.
There
are probably a bunch of tools for batch renaming files.
Here’s
the Windows tool I use.
I open the folder where my full set of thumbs is,
then rename “v1_” to “_”,
“v2_” to “_”, and so on.
At
this point, I have a full set of shop images, modified
or not, and they’ve all been renamed to remove
the version numbers from their filenames.
Upload
all these images to a folder on your web site. For
the purpose of this example, let’s assume you’ve
uploaded them to yourwebsite.com/thumbs.
4.
Edit your CPShop images file
Here are the lines you need to add to your CPShop
images file.
The
first set of replacements remaps the path of your
store images from the CafePress site to your own –
you’ll want to replace the URL in these lines
with your own shop URL, of course.
The
second set of replacements strips out the version
numbers from the image files that CPShop will load.
This will continue to load your renamed “versionless”
files regardless of changes to CafePress’ version
number for the image (up to v10; if that number goes
higher, you need to add additional lines).
If
you also want to replace all store section
images, put your custom versions in the same directory,
and add these lines to the images file:
When
you’ve made these changes to the images file,
save it, and upload it to your cgi-bin directory.
Use the CPShop admin page to clear the cache, and
you should be seeing your replacement images.
If
anything goes wrong, now or later, you can quickly
delete those lines from the images file and clear
the cache again – your site will now be displaying
the Cafepress product images, instead of yours.
You
should view every one of your section and product
pages to make sure that you didn’t miss any
images. It’s better to do it now.
Now…
those color swatch changes on products like the baseball
jerseys, cap sleeve shirts, and so on. If you couldn’t
face grabbing three additional versions of each of
those product images, you can disable this feature
in your CPShop with these lines in the images file:
The
first line gives a new name to the product image;
now the function that wants to swap the image won’t
find an image to swap. The second line renames the
function that changes the product color in the product
color dropdown, if a color swatch is clicked –
this isn’t necessary, probably, but it prevents
the user from accidentally changing the color selection
by clicking on the (now inactive) swatch.
The
color image replacement lines replace requests for
the alternate color images; they're remapped to requests
for the normal product images, which are already loaded
and cached. This prevents error messages on your server
and should improve page load times, if only slightly.
Finally,
an external Javascript file was being referenced with
a relative address, rather than an absolute address
to its location at CafePress. The last line fixes
that so that it loads correctly. Whatever it is.
And
that should be it. The worst part is the first part:
duplicating the hundreds or thousands of images for
the products already in your shop.
Known
Problems
1.
The "View Larger" links only for those
products whose color would otherwise be swapping
don't work. Still looking for that workaround.
Adding
and Changing Items in the Future
From now on, every time you create a new product (or
alter the design on an existing one) you will need
to:
1.
Grab its store and product images from CafePress,
in the “Preview this page” view while
you’re administering your store.
2. Rename the product images to remove the “v1”
or other version number from the product images.
3. Modify the images, if desired.
4. Upload the new images to the folder on your web
server where all your other store and product images
have been stored.
I
create new products in a hidden section of my store,
perform these steps, and then move the products into
the sections where they’ll live – after
my replacement images are in place.
And
remember – if anything ever melts down or blows
up, you can turn your image replacement off immediately
by deleting these new lines from your images file,
uploading it, and clearing your CPShop cache.
You
can see this crazy scheme in action here:
Note
(February 2007) - because of issues with the changing
color swatches and continuing changes to product thumbnails,
I've at least temporarily modified this so that I'm
replacing only store page thumbnails, and not product
images. So currently, my own images file does not
replace anything from images.cafepress.com, version
numbers, or color names. I am also no longer replacing
the doswatchclick function.
|
|
|
"Something very
strange and mystic
happened
to me
Something realistic and as weird as can be
Something that I feared somehow is now endeared to me
What a funny feeling - odd and yet so true
Did a thing like this ever happen to you?"
"Did
You Ever See a Dream Walking" by Mack Gordon &
Harry Revel, 1933
|
|
