ProPhoto - Premium Wordpress Theme for Professional Photographers - Single Column, big pictures - Blog Template

Over that past few weeks, a small but significant number of WordPress users (including ProPhoto users) have been experiencing a problem inserting images into posts using the WordPress write box.  What happens is they upload an image, but then their little upload box goes white and freezes, and they can never insert the image into their post.

[note: this is kind of a long post, but keep reading, there are some good tips, and if those don’t work, there is pretty good fallback solution at the bottom]

We have dubbed this problem “The White Screen of Death.” It’s a tricky problem.  Some facts:

First, please understand this is not a ProPhoto theme issue.  This is a problem with WordPress itself, not ProPhoto. Specifically, it is a problem with WordPress 2.5 and above.  It did not occur in earlier versions of WordPress.

Second, this is not a ProPhoto theme issue.  Oh, wait, did I already say that?  Sorry, I’ve gotten a few emails where people were upset with me over this and could not understand that there was a difference between WordPress and ProPhoto.  WordPress is the blogging software. ProPhoto is just an add-on of files that makes your WordPress blog look cool.  All of the image uploading functionality is done by WordPress, and not by ProPhoto.  You can de-activate ProPhoto (or even delete it off your web host) and still have the same problem.

An analogy:  if you’ve ever purchased a set of Actions for Photoshop, ProPhoto is like that.  If Photoshop has some kind of bug, it’s not the fault of the poor guy who sold you the actions.  Another analogy:  if you bought a pair of fuzzy pink dice for your Honda Accord, don’t blame the dice manufacturer when you blow a head gasket in your engine.

OK, rant over, sorry.

If you are having the White Screen of Death, here are a few support threads that might make for good bathroom reading:

Thread 0
Thread 1
Thread 2
Thread 3
Thread 4
Thread 5

Here are my thoughts on getting this resolved:

First, if you’re using Internet Explorer, try using Firefox instead.  If you don’t know what Firefox is, it is a free web browser that is faster, safer, and more powerful than Internet Explorer.  You can download it here.

Second, make sure your version of Flash player (a plugin used by browsers to display special content) is up to date.  Go here to update.

Third, try using Firefox with no additional tabs open - just one window and no tabs.

Fourth, use an FTP program and navigate to your blogs wp-content folder, which is in your main blog folder or whatever your root directory for your blog is.  Using the FTP program, change the permissions on this folder to 777.

Fifth, read Thread 0 above, and try some of the other solutions, or continue reading for an alternative solution.

If none of those things seem to work, you’ll probably need to use a blog editor to publish to your blog until WordPress gets this all sorted out. You can post to your blog, including uploading images, using a desktop-based (non-web based) program.  Try using Qumana blog editor.  It should allow you to post just fine.  And it’s free. Just disable the dumb little “posted by Qumana” tag by going to “Preferences” => “Editor” and uncheck “insert Qumana tagline in new posts”.

Finally, if you don’t want to use a blog editor like Qumana, you can downgrade (but I don’t recommend this) to WP 2.3.3.  This is a temporary fix, because you will want to eventually upgrade again in a few months for security reasons, but maybe by then WordPress will fix this bug. To downgrade, first backup your blog, entirely (don’t skip this step), then follow the normal upgrading instructions here, except use this copy of WordPress 2.3.3 >> WordPress233

I still get a lot of questions about size of images to post and how to resize and optimize them, so I thought I would throw up this post for the sake of clarity.

ProPhoto is designed for images that are 900 pixels by 600 pixels, vertical or horizontal. You can post images smaller than that, but you can not post images WIDER than 900px. Some people (Mark Ridout comes to mind) post a lot of pictures that are 900px wide and MUCH taller than 600px, but they still don’t go any wider than 900 pixels as this will break the layout of the blog. (By the way, I don’t personally recommend using images bigger than 900px tall because of page load speed and because most monitors are big enough to see all of the image at once).

All image editing programs (most photographers use Photoshop or Lightroom or Aperture) allow you to resize images. If you’re interested in how I get images ready to post to the blog using Photoshop, read on:

First, I resize it to 900px by 600px by going to “Image” => “Image Size…” (Note, if you’re using a PC, things might look a bit different for you.)

Then I set the wider dimension to 900 and click OK. As long as you leave “constrain proportions” checked the other dimension will take care of itself:

Once I’m done resizing, I usually add a bit of sharpening–I use Kubota’s Magic Sharp action–but you can sharpen with whatever action you like, or use a built-in sharpening filter from Photoshop, or don’t sharpen at all, it’s up to you…

Finally, I optimize it for the web by shrinking the file size (not the dimensions–how big the file is in terms of memory used to store it and download it) as much as I can without sacrificing too much quality. I do this by going to “File” => “Save for Web and Devices…”

And then making sure that “JPEG” is selected as file type, and turning down the quality to around 80. I keep my eye on the file size in the lower left corner and watch how the quality looks on the “optimized” tab preview. I’m trying to get the file size as small as possible (this will help your blog load fast) without sacrificing image quality too much.

(By the way, that is my bald 8 month-old daughter on the left of that picture.) Then, I click save, and I’m ready to upload to the blog.

If you know your way around Photoshop a bit, you may want to create a couple of actions that automates all of this for you–this can save a lot of time.

One of the cool features of WordPress 2.5 (have you upgraded yet) is that you can upload multiple images at one time.

If you haven’t already tried this yet, all you have to do is click on the “Add media:” image button, click on “choose files to upload” and use shift+click or command+click (ctrl+click for PCs) to select multiple images at once. You can also click on an entire folder to upload all the images inside it.

Well, that’s pretty cool and all, but wouldn’t it be even nicer if you could insert all your images into your post all at once instead of one by one? Well, you can, sort of. All you need to do is use WP 2.5’s new “gallery” shortcode feature, with a little special sauce thrown in.

Here’s how it works:

First, upload a bunch of pictures using the “Add media:” image button.

Once they’ve all finished uploading, click on the “gallery” tab of your little uploader box, and at the bottom you can click on “insert gallery into post.” What this does is add a little bit of special WordPress code to your post that says:

[ gallery]

(I added an extra space after the first [ that shouldn’t be there so that the code wouldn’t execute in this post). When you publish your post now, it will insert all your images into your post as small thumbnails. Go ahead, try it and then come back here.

Cool, huh? The only problem is, we don’t want little thumbnails, right? Right. The next step is to modify the gallery shortcode just a bit so that we display our images full-size. To do that, just change the gallery short code to:

[ gallery size="full" columns="1"]

(again, leave out the space after the first “[”). Now if you publish your post your images should display full-size, one per line, and centered. We’re getting closer.

However, there is still a funky border that we don’t want.

To get rid of that, we have to make one change to our stylesheet. We only have to do this once, and then from now on every time we use the gallery shortcode, we won’t have those borders. To make the change, go to “Design” –> “Theme Editor” and open up “Stylesheet (style.css)”. Scroll down to the bottom, add a new line, and paste in this line:

.gallery img {border:none !important;}

Click “update file” to save your changes, refresh your browser, and the borders should be gone.

Once you get used to this, this can save you a lot of time. Again, all you have to do is upload all your images, and then paste this line (minus the extra space) into your post where you want your images to appear:

[ gallery size="full" columns="1"]

The only real downside is that inserting your in this way does not allow you to type text between images, so if you like to do that, then this probably isn’t for you. But, if you like to write up your post and then post all of your pictures in a row, this could save you lots of time.

Q: I embedded a YouTube video or ShowIt video (or something else) and my blog broke and is all messed up. What happened and how can I fix it?

A: Sometimes when you embed a YouTube video or occasionally something else (I’ve seen it happen with a ShowIt slideshow, although these usually work just fine) your whole blog “breaks” the text flows off to the side and onto your background.

This is caused by WordPress’ visual editor interacting poorly with YouTube (or ShowIt) embed code. To fix it, recreate your post. Click on “code editor” when you are ready to paste in your embed code. In the code editor, paste the code and save or publish the post FROM WITHIN THE CODE EDITOR. Do not go back to the visual editor after you’ve pasted the code in. It should work now.

Do not edit this post once it is working, as this will open it up in the visual editor and corrupt the code.

P.S. I think this is less of a problem with WordPress 2.5

Q: Can I embed a ShowIt slideshow? How do I center it?

A: Yes, just paste the embed code generated by ShowIt Web into the CODE EDITOR section of your posting admin panel.

If you want the slideshow centered, after you’ve pasted in the code into the code editor, add this tag before: <p align="center"> and this tag after:</p>.

NOTE: if you can’t see the controls of your ShowIt slideshow after embedding it, it’s probably a background color issue. For example, if you normally have your ShowIt slideshow web pages with a black background, ShowIt will make the controls WHITE so you can see them. However, if you paste the embed code into a blog with a white background, now you won’t be able to see the controls even though they are there. To fix this, just create an additional showit web page with the same background color as your blog, and use the embed code generated when making that page.

NOTE #2: Sometimes people get a problem when embedding ShowIt slideshows where the whole blog kind of breaks, and text below the show flows off into the background and everything looks weird. Click here for fix.

When you’re creating your post, in the visual editor simply click on your image, and then click on the “center-aligned text” button, which looks like this:

Old images from imported blogs may not be centered, depending on how they were originally coded before importing.