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

Nicole just left a comment asking how to adjust the font-size for her comments area.  I thought that was a very good question, and one I’ve been asked a few times, so I’m writing it up here for everyone’s benefit.

There are two places you may want to change the font-size in your comments area.  The first is in the area that lists how many comments and has the “show comments” and “add a comment” text, as shown below:

The second area, is the actual comments themselves, show below:

To change the font size in these areas, open up your Stylesheet in your Theme editor by going to “Design” => “Theme Editor” after loggin into your WP Admin area.  Once you’re in your Theme editor, from the right-hand side choose to edit the file called “Stylesheet (style.css)”.

Scroll all the way to the bottom, put your cursor at the end of the line and press return a few times to get on a new line.  Then paste in this chunk of code:

/* font size for comments area */
.meta-inner {
font-size:13px;
}

Adjust the number 13 to whatever size font you want.  This will affect both of the areas I discussed above.  If you’re OK with both areas having the same font size, you’re all set.  Just view your blog (remember to force your browser to refresh so you can see your changes) and check your work.

If you want the font size for your actual comments (picture 2 above) to be different from the other area (picture 1 above), you’ll need to add another chunk of code, like so:

/* font size for only comments */
.meta-inner #comments {
font-size:12px;
}

Again, adjust the number 12 to whatever you want, save the changes, view your blog and refresh your browser to check your work.

Related posts:
Change comment text color,
Display comments by default,
Comments aren’t working

Dennis recently commented on a post asking how to change the comment text color on main page comments.

Here’s how:

In you WordPress admin area, go to “Design” => “Theme Editor” and select “Stylesheet (style.css)” to edit it. Scroll down to lines 121-123 which look like this:

body.home #comments {
background-color: #E3E3E3; /* bg color of mainpage commment area */
}

Add a line inside the curly braces, like so…

body.home #comments {
background-color: #E3E3E3; /* bg color of mainpage commment area */
color:#ff990; /* color of comment text */
}

…except use the six-digit color code of your choice. Click “update file” to save your changes, then view your blog (remember to force your browser to refresh) to check your work.

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.

Jennifer sent me an email today asking how to edit the font (and I assume link) colors in the large footer area of her blog. That, combined with a conversation I had yesterday with Matt, who handles installations, kind of pointed out to me that my CSS doesn’t make it overwhelmingly clear how to make changes to this footer area. So, I’m going to make the code a bit more clear for future purchasers, and tell you all how to tinker with these colors in this write-up.

The area in question is this big footer area (technically its your sidebar, but since it’s a one-column theme, it’s more like a footer), shown below.

There are two types of text on in the footer area, and you can style them individually. We’ll start with non-link text (circled above in red) which basically is your widget headers.

If you don’t like the color that these headers are inheriting from other parts of your CSS, here’s how to change it. In your WP admin area, under “Design” (”Presentation” in WP 2.3.3 and earlier) = “Theme Editor” choose the “Stylesheet (style.css)” file to edit. Then scroll down to about lines 108-113 where you should see this chunk of code:

/* edit these to change background color and/or
padding of "sidebar" area at bottom of page */
div#sidebar_footer {
background-color: #F0F0F0; /* bg color of footer-sidebar area */
padding: 20px 0 10px 0; /* top, right, bottom, left padding */
}

Right before the closing “}” on the last line of this chunk, add the line highlighted in red so that it looks like this:

/* edit these to change background color and/or
padding of "sidebar" area at bottom of page */
div#sidebar_footer {
background-color: #F0F0F0; /* bg color of footer-sidebar area */
padding: 20px 0 10px 0; /* top, right, bottom, left padding */
color: #ff9900; /* color of non-link text in footer */
}

Except change the color code to whatever you want it to be. This will also change the color of the bullets next to the links, by the way. Save your changes by clicking “update file” and view your blog, refreshing your browser, to see you changes.

To change the colors of your links in the footer, we’re going to have to paste in some additional CSS code and then change the six-digit color codes to suit us. To do that, still in your “Stylesheet”, scroll to the very bottom, press return a few times and on a brand new line paste in the following code:

/*styles sidebar-footer links */
#sidebar_footer a:link {
text-decoration: none; /* no underlining default */
color: #3333CC; /* color of links not yet visited */
}
#sidebar_footer a:visited {
text-decoration: none; /* no underlining default */
color: #663399; /* color of links already visited */
}
#sidebar_footer a:hover {
text-decoration: underline; /* underlining as hover default */
color: #000000; /* color of links when being hovered over */
}

Then, just go back and edit the color codes for the three states of the links: normal (unvisited), visited, and hovered. You can also experiment with switching on and off underlining in the various states using either “none” or “underline” for the value of “text-decoration:”. Save your changes, check your blog, refresh your changes, and admire your work.

Related post: How to customize your footer/sidebar area

Kelly emailed me today asking how to add a signature image to her bio text area. I thought it was a good question, and something a few of you might like to know how to do, so I’m writing up the answer here.

I think the look Kelly is going for is something like what I did with Paige Elizabeth’s blog, shown here.

See the cute little signature below her bio? Pretty cool, huh?

Well, to pull this off yourself, first, create a signature image. Try to keep the file size fairly small, although the dimensions can be whatever you want. Write down the exact pixel dimensions (width and height) of the image–you’ll need them later.

Next, we’re going to upload the image to your website. Now, you could just use an FTP program or a file manager to upload your image, but for those of you who are a little bit intimidated by such things, here’s how to do it without leaving your comfy WordPress admin area.

To upload your image, just write a new post and save it as a draft. In that new post, upload your signature image and insert it, full-size, into your post, just like you were posting an image in a regular blog entry.

Once the image is inserted into your post, switch your post into “HTML” mode (”Code” in WP 2.3.3 and earlier) by clicking on the tab at the top of your posting box. You should see a bunch of code that looks like this:

<a href="http://www.myblog.com/wp-content/uploads/2008/05/picture-12333.jpg" title="picture-12333.jpg"><img src="http://www.myblog.com/wp-content/uploads/2008/05/picture-12333.jpg" alt="picture-12333.jpg" /></a>

Click and drag in that code to highlight the text in between the quotation marks right after “src=“, shown here marked in red:

<a href="http://www.myblog.com/wp-content/uploads/2008/05/picture-12333.jpg" title="picture-12333.jpg"><img src="http://www.myblog.com/wp-content/uploads/2008/05/picture-12333.jpg” alt=”picture-12333.jpg” /></a>

That’s the address of your signature image that you just uploaded. (It might look a little different, don’t worry.) Copy that text into WordPad or TextEdit for a few minutes. Save your post as a draft in case you copied wrong and need to come back and grab that code again. Once you’ve got everything working, you can delete the post entirely–I’m 98% certain the image you uploaded won’t be deleted when delete the post.

Ok, we’re getting close.

Next, in your WP Admin area, go to “Design” => “Theme Editor” and choose the file “bio.php” to edit it. Near the bottom of that file, look for the end of the last paragraph of your bio, which is marked by a close paragraph html tag that looks like this: </p>.

After that </p> tag but before the two </div> tags, paste in this line.

<img src="http://www.myblog.com/wp-content/uploads/2008/05/picture-12333.jpg" width="50" height="50" id="mysignature" />

Once you’ve pasted that in, just replace the text after “src=” with the text you copied out of your draft post when you uploaded your signature. Also, change the width and height to the dimensions you wrote down when you created the image. Click “update file” to save your changes. Then just view your blog and refresh your browser to see your work.

If you’re really particular about exactly where the signature is placed relative to your text, you can reference this image from your stylesheet and fiddle with its margins a little bit. To do that, just go to your “Theme Editor” again, and edit “Stylesheet (style.css).” Pull down to the bottom of the document, press return to add a new blank line in and paste in these lines:

#mysignature {
margin: 0px 0px 0px 0px;
}

Then, just change those 0’s to different pixel amounts, and experiment by saving your changes and refreshing your browser to see changes. The four zeros represent, in order: top margin, right margin, bottom margin, left margin

A few people have asked me how to create a drop-down menu of your pages in your top navigation bar area. Here’s how:

In your WP Admin area, go to “Design” => “Theme Editor” => “topnav.php”. On a blank line in the middle (depending on where you want it to go) paste in this line of code on an empty line:

<?php wp_list_pages('orderby=name&title_li=<a href="#">Pages</a>'); ?>

Then, save your changes and, assuming you have some pages written, you should have a perfectly functioning drop-down list of your pages.

NOTE: Because you’re adding another feature to the nav area, you may run out of room and get your header bumped down covering up your bio. If this happens, maybe delete one of your nav items, like the search, or follow the directions here to squeeze it in so it fits.

Related resources:
Why is my header is covering up my bio?
How do I delete the search feature, or something else from the nav area?

A few times I’ve gotten asked about how to change the height of the Flashfader header slideshow. It’s not terribly difficult, but it’s not as easy as you might think, either.

1. Step 1: Go to “Manage” –> “Flashfader” and set the height to whatever you want it to be. Click “save.”

2. Step 2: Go to “Design” –> “Theme Editor” and choose “Stylesheet (style.css)” to edit it. Scroll down to line 268 (there’s a line marker at line 265). This chunk looks like this:

/* LINE 265 */
 
#header-masthead {
height: 250px; /*height of masthead*/
background-image: none;
}

Change the height to whatever you want it to be.

3. Step 3: Finally, you’re going to need to use an FTP program or your File Manager to edit one more file, called “flashfader.js” It’s in your “prophoto” theme folder. Open it up with WordPad or TextEdit, and you will see two places where it says ‘height=”250px” or something like that. Change the height to your desired height in both places. Save your changes and reupload the file, overwriting the one on your web server.

4. Step 4: If you’ve already uploaded images into your Flashfader management area that are not your desired height, you’ll need to delete them and reupload new ones. Also, if you uploaded images that were something other than 250px high while your settings were still set at 250px, Flashfader may have cropped them. So, if they’re still not showing up right, delete them and reupload them.

5. Step 5: Empty your browsers cache and check your work.

Helpful related resources:
Using an FTP program
Using a web-based file manager utility

Questions? Leave them in the comments instead of emailing for support so everyone can benefit from the clarification.

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.

If you want to change the background color of just the top header area, so it looks something like this:

You can pull it off by adding one line to your stylesheet. Open up your stylesheet by going to “Design” (”Presentation” in old versions of WP) –> “Theme Editor” and selecting “Stylesheet (style.css)”. Scroll down to line 158, which looks like this:

#header {
    height: 108px; /*height of header: logo & top links - see 5 lines below*/
}

Add a line in like so and change the color code to whatever you want it to be.

#header {
    height: 108px; /*height of header: logo & top links - see 5 lines below*/
    background: #ff9900;
}

Click “update file” to save your changes, visit your blog and force your browser to refresh to see your changes.