Archive for the ‘Blogging’ Category

The White Screen of Death - Problem inserting images into posts

Wednesday, June 25th, 2008

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

Tricks for writing text below and between images in posts

Thursday, May 29th, 2008

I got an email today from someone who was having trouble typing below and between images that she had uploaded and inserted into her post. She said that in the past when she tried to do this…

“several of my images were “stuck” together so I couldn’t get in between the images very well to type — and when I did once it deleted the image.  so i got frustrated.”

This type of problem is pretty common for people new (or not-so-new) to WordPress.  It’s tough sometimes to get your cursor in the right spot and type without deleting stuff or clicking on images.  Here are a few tips and tricks to make this a bit easier.

1. Increase the height of your post box (<– click the link to find out more)

2. Increase the width of your post box (<– click the link to find out more)

3. When you’ve inserted an image and want to type below it, or if you want to type between two images you’ve already inserted, put your cursor just to the right of an image, click there, then press “Enter”.  If you then start typing, you should be on a new line under that image.

4. Try switching to full-screen editing mode when posting (<– near the bottom of that post)

5. In a pinch, switch over to “HTML” mode and put your curser after the code for the image in question.  Then press return TWICE and start typing your next line.  If you then switch back to visual mode, you should be able to continue typing.

Redirect your old Blogger blog to your new WordPress blog

Wednesday, May 14th, 2008

A lot of you switched from Blogger (blogspot.com) blogs to WordPress in order to use the ProPhoto theme.

If you’re anything like me (and I know I am) you probably just posted one last time on your old blog saying “Our blog has moved!” and putting a link to the new address. Well, I was thinking today there’s got to be a better way, so I dug around a bit, found a few posts, and came up with this for my wife’s old blog: Click here to see it. Go ahead, click on it and come back here.

Pretty cool, eh? Here’s how to do it:

Log into your old Blogger dashboard and click on Manage: “Template” for the blog you want to redirect, as shown below:

Then, hunt around in the big editable text box, and just below the tag that says <head>, paste in these two lines:

<meta content='1;url=http://www.website.com/blog/' http-equiv='refresh'/>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW"/>

Be sure to change the address (highlighted in red) to your new blog’s address. The second line tells search engines not to read or index your old blog. This assumes that you’ve imported your old blogger blog into your WordPress blog. Search engines penalize you some for duplicate content (having the same exact content appear in several places on the internet) so this takes care of that. If you didn’t import your old blogger blog into your WordPress blog, then you can leave this line out. Also, the number “1″ in the first line is how many seconds the user will wait before they are redirected. You can adjust this if you want.

This code takes care of redirecting browsers to your new blog. Next we have to insert one more bit of code to display that cool yellow box so they know what’s happening to them.

To do this, scroll down a bit further and find a line that says:

<b:section class='main' id='main' showaddelement='no'>

Right below that line, paste in this chunk:

(NOTE: if you are still using an ancient Blogger template like I was, you might not have this line of code. Instead, just insert it right below the <body> tag.)

<div style='position: absolute; top: 0; left: 0; margin: 30px; border: solid 2px #333; color: #000; background-color: yellow; padding: 25px; width: 85%; z-index: 5; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 14px;'>
<p><strong>My blog has moved!</strong></p>
<p>You should be automatically redirected in a few seconds. If not, visit<br/> <a style="color:red;" href='http://www.website.com/blog/'> <strong>http://www.website.com/blog/</strong></a> <br/> and update your bookmarks.</p></div>

Again, be sure to change the website address twice in the above code (highlighted in red) to your blog’s address. Click save changes, and check your work.

Questions? Leave ‘em in the comments and I’ll try to get back to you in a jiffy.

Import a FTP or SFTP Blogger blog into WordPress

Tuesday, May 13th, 2008

The fantastic WordPress import feature (which can be found under “Manage” => “Import”) does not support importing Blogger blogs that were set up to publish via FTP or SFTP.  It works fine for the other two types of Blogger blogs:  standard and “custom domain”, but for FTP/SFTP published blogs you can see the blog but it shows 0/0 posts and 0/0 comments.

I found out after a lot of digging today that it is possible to import this type of blog.  All you have to do is first convert it to a regular Blogger blog and then import it.  To do this, login to your blogger account dashboard and click on “Settings” => “Publishing.”  Then choose “Switch to: blogspot.com.”

Pick a random subdomain address and let blogger do its thing.  After you’ve converted it, WordPress will import it without a hitch.  You can even switch it back to publishing via FTP or SFTP after the transfer was a success.

Upload and insert multiple images in a post at one time

Friday, May 2nd, 2008

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.

WordPress Tip: Increase the size of your post-writing box

Friday, April 18th, 2008

In my opinion, I think the default size of the post-writing box (shown below) is a little too small. Then, again, I do have a 24″ monitor. But still, especially with the size of images we tend to post on ProPhoto blogs, this area is a little cramped.

Luckily, there is a simple way to increase the size of your posting box. Just click on “Settings” (”Options” in WP 2.3.3 and earlier) in your WP Admin area, and then click on the “Writing” subtab. Then, where it says “size of the post box” just bump it up from the default 10 lines to something bigger.

I like 20 lines or more. Depends on how big your monitor is. Or, if you really want a lot of room, click on the “Toggle Fullscreen Mode” button, and really get comfortable.

Update:  if what you’re really after is more WIDTH to your posting box, try using this plugin.  It’s pretty sweet.

Update #2: If you want to make just a quick temporary adjustment to your posting box height (it won’t be remembered next time you post) you can also just grab the lower left-hand corner of the box (shown below) and drag it.

RSS in plain english

Saturday, March 22nd, 2008

This blog is going to become the central place for tips, bug fixes, advanced customization videos, and lots more. So, I want to make sure none of you miss any of these posts. If you don’t already use RSS to subscribe to blogs rather than having to check them all the time, you really ought to consider it. My blog feed is here, or just paste the blog address into your reader of choice. If you’re still a little fuzzy on RSS and RSS readers, watch this sweet video:

FAQ: How do I import an old blog, preserving posts and comments?

Saturday, February 23rd, 2008

One of the great things about switching to WordPress is that you can very easily import your old blogs. This post will cover how to import blogs from three platforms: Blogger (blogspot), TypePad, and WordPress.com. Together, these three types of blogs probably make up 95% of the blogs that people want to import into self-hosted WordPress blogs.

NOTE: after successfully importing an old blog, DO NOT delete that old blog. Just let it sit there. Your photos from your old blog are not actually moved over to your new blog, they are simply referenced by your new blog and must be left in place to display correctly.

For all three types, you start by going to “Manage” –> “Import” in your WP Admin area, which looks like this:

Importing a Blogger Blog:

If the blog you are importing is a blogger blog (i.e., ends with a .blogspot.com), follow these steps. (NOTE: if you have a blogger blog that was set up to publish via FTP or SFTP (fairly uncommon), see this post for info on how to get it imported.)

  1. Open up your blog’s WordPress Admin area, and go to “Manage” –> “Import.”
  2. Next, open another tab of your browser, or a new browser window, log in to your Blogger account. Make sure you are logged in and not just visiting your blogger blog.
  3. Then, go back to your WordPress Admin area and click on the “Blogger” link, then click “Authorize.”
  4. If you did step 2 right, you should see a screen that looks like this:
  5. Click to grant access, and then you will be able to click an “import” button for the blog you want to import, shown below:
  6. When it is done importing, the “Magic Button” will change to saying “Set Authors.” Click it and map your blogger users to WordPress users. If you haven’t created any WordPress Users except the default “admin” you can navigate away from this page and click on “users” in the upper right of your screen, create some users and come back to this screen to map them correctly. That’s it. You’re done!

Importing a TypePad (Movable Type) Blog:

I’ve only done this a handful of times, and I don’t have a TypePad account that I have access to so that I can take screenshots, so I’ll have to do this section from memory. As I recall, the steps are:

  1. Login to your TypePad blog admin area. There should be an option somewhere that says “Export.” Click it and download the file it creates.
  2. Then, rename the download file “mt-export.txt”
  3. Next, in your WordPress blog’s admin area, go to “Manage” –> “Import” and click on the link that says “Moveable Type and TypePad”.
  4. In the next screen, click on the “browse” button and locate the “mt-export.txt” file.
  5. Click on “upload file and import.”
  6. The rest should be simple

NOTE: I have noticed that imported TypePad blogs occasionally display weird behavior in ProPhoto WordPress blogs, where instead of showing full posts on the homepage, they only show excerpts. To fix this, in your WP Admin area, click on “Design” –> “AWP Managment”. Then click on the “Posts & Pages” module, and disable inline posts. Scroll down to save your changes, and your posts should now display in full.

Importing a WordPress.com Blog:

If you have a free blog through WordPress.com and are switching to a self-hosted WordPress installation on your own domain and webhost, the steps to import are pretty simple.

  1. First, log into your old WordPress.com blog admin area and click on “Manage” –> “Export” and then click on “Download Export File.”
  2. Next, log into your new, self-hosted WordPress blog, and click on “Manage” –> “Import”. Click on browse and locate the file you just downloaded, and then click “Upload file and import.”
  3. Finally, map your old users to existing users in your new blog or create new users to map to and click submit.