scriptygoddess

One of the things that drove me to WordPress was the fact that it was PHP based. It leaves the doors wide open for you to do practically any kind of hack you could possibly think of.

I recently reworked Pixelog.org for Christine. The original was a table based design, powered by MT. Now it's all CSS based, valid XHTML 1.0 Strict, and powered by WordPress!

However, to get everything to work just so I had to pull a few tricks….

1) Browser resizing
Christine couldn't decide between a horizontal layout which she preferred, or a vertical one (which would be more "smaller browser" friendly. So, we did both! I used the getBrowserWidth() javascript that The Man in Blue used for this sample for resolution based layouts, and some of the javascript mentioned here. The end result, while not as fancy as The Man in Blue's – it does the trick. Each time the browser is resized, the screen is refreshed, and the stylesheet appropriate for your browser width is loaded.

2) Extract just what you need
Pixelog.org is already a few years old. Back then, we hardcoded awful things like borders, styles inside the img tag itself. I REALLY wanted the site to validate, but there was so much junk in the posts and img tags, and with 230+ posts, there was no way we were going to be able to edit everything and clean it up. Since the "main" part of the post was being handled one way, and the "more" part of the post completely seperate, I was going to have to access the "raw" data anyway.

So, to get JUST the "main" part of the post I did this:

$content = explode('<!–more–>', $pages[$page-1]);

then to extract just the url to the image, Matt gave me this little code snippet:

$jpg = preg_replace('/.*(http:.*?.jpg).*/i', '$1', $content[0]);

now I can reconstruct the URL and make it a clean img tag:

echo '<img src="'.trim($jpg).'" alt="'.$post->post_title.'" />';

Then, where I wanted the "more" to display, I did this:

$content = explode('<!–more–>', $pages[$page-1]);
echo apply_filters('the_content', $content[1]);

(note: By doing things this way – you may bypass some of the other filters wordpress does! So, while this worked for this particular situation, as they say "your mileage may vary!"

3) Category view on it's own page
I wanted to keep the cateogry page on a completely different page as the rest of the site. We're not using the "nicer" permalinks, so I set up a redirect based on the query string in the url. This is on the index page:

<?php
if (isset($_GET['cat'])) {
$url = "/catview.php";
if (isset($_SERVER['QUERY_STRING'])) {
$url .= "?".$_SERVER['QUERY_STRING'];
}
header("Location: ". $url);
exit;
}
?>

"catview.php" is the category page. On that page I have this code at the top:

<?php
if (!isset($_GET['cat'])) {
$url = "/index.php";
if (isset($_SERVER['QUERY_STRING'])) {
$url .= "?".$_SERVER['QUERY_STRING'];
}
header("Location: ". $url);
exit;
}
?>

4) Pixelog on BigPinkCookie
The last trick was getting the thumbnails from the most recent pixelog posts to show up on Christine's main blog BigPinkCookie. The nice thing is that since they're both now powered by wordpress and are in the same database (just with different table prefixes), we already have a plug into the database we need. Again, it's a matter of getting to the raw data. I get the excerpts (which have the thumbnails in them) like this:

$pixelog = $wpdb->get_results("SELECT ID, post_excerpt FROM PREFIXHERE_posts WHERE post_status = 'publish' order by post_date desc limit 10");

Then I go through each result like this:

foreach ($pixelog as $v) {
echo "<li class='pixelogborder'>
<a href='http://www.pixelog.org/index.php?p=".$v->ID."'>" .
$v->post_excerpt .
"</a>
</li>";
}

Update: I should probably add, the way Christine is entering her posts to get this to work; Thumbnails go in the excerpt field. The main photo goes as the "main" part of the post. And her "notes" go in the "more" part of the post.