Archive for the ‘Tech Life’ Category

Paginating your WordPress world

Posted on September 11th, 2007 in Tech Life | No Comments »

Well, I finally did it. I began writing a post that became SO LONG that I thought, “Hmmm… I wish I could split this up.” Turns out, WordPress has been capable of handling this from nearly, if not entirely, the beginning. The visual editor doesn’t make it as easy to implement as other features, like splitting up a post with “Read more”, but if you’re at all savy, you can get paginated in just a few minutes.

First, we need to whip out one of WordPress’ old QuickTags. It no longer seems to be shown in the visual or code editor. It was called “Page”. To insert is manually, use

<!--next page-->

Put this throughout your post (in the “code”, non-visual editor) where you’d like to split it into a new “page”.

Your template might not have been built to handle this feature, though, so if you’re using anything other than the standard Kubrick template, you’ll want to check around in your “Single Post” template page. To edit this, go to Presentation > Theme Editor and along the side, you should see a file nicknamed “Single Post”. Select this file to open it in the editor and start looking near the line of code

<?php the_content('Read the rest of this entry &raquo;'); ?>

What you should see, right after this line, or in this general vicinity, is

<?php wp_link_pages('before=<p><b>Pages</b> &after=</p>&next_or_number= number&pagelink=%'); ?>

or something similar. The call to wp_link_pages() is the important part to find.

If your template does not have this line of code, just add it

<?php the_content('Read the rest of this entry &raquo;'); ?> <?php wp_link_pages('before=<p><b>Pages</b> &after=</p>&next_or_number= number&pagelink=%'); ?>

You should then see something similar to “Pages 1 2 3″ at the end of your first post section or “page”.

Pretty swank.

Working with images in WordPress

Posted on June 29th, 2007 in Tech Life | No Comments »

**PLEASE NOTE: After switching themes I’ve had to go back and futz with this. It’s not finished yet so you won’t see the nice dimming effect. As soon as it is, you will, but the steps here will still work for you. Thanks. **

me_dad.jpgSo I’ve been struggling with the non-existent image uploading capabilities of WordPress. Frankly, it has been the one real thorn in my side since converting from Blogger.

Well, I just may have found the right Plugin. Three, in fact, that make it easy to upload and insert images, as well as, make it swanky to display them.

Image Manager

Here’s the lowdown. The first Plugin that I found after reading this thorough article from Lorelle on WordPress, was ImageManager. What a fricking fantastic Plugin. It is from Soderlin and not only does it help you upload single images easily, browse images you have already uploaded, and insert them effortlessly into your posts (the biggest problem I have found with WordPress) BUT, it also lets you edit these images. Basic but good tasks such as cropping, rotating, resizing, and flipping. All of this occurs from right within your post—the way it should be. For the full scoop, check out this great flash demo on how it works.

Light Boxes

On another front, there is the display of images in blogs. I’ve tried a few methods in the past that included thumbnails with links, pop up windows, or utilizing layers, etc. etc. None of these solutions seemed all that wonderful. Then there came along the next breed of display—the lightbox.

The lightbox is a great interface for allowing your visitors to really focus in on an image, if they want further detail. What it does is “pop up” the image in a new div, while also dimming the background so that your image is front and center with no distractions. Give it a shot by clicking on the image above of my father and me on my very first day.

As you can see, the display is elegant and closing the image is easy. You will also note the addition of a caption, cleverly tucked into the title tag.

All you have to do, once you have everything setup, is to add

rel="lightbox"

to links around your images. And if you want to add a caption, simply add

title="this is my caption"

with your OWN text, of course, between the quotation marks.

Pairing these two Plugins together gives you quite the imaging arsenal.

A few notes on setting up the lightbox functionality:

There are a number of lightbox scripts out there and I chose to use Lightbox JS by Lokesh Dhakar. I might be a little daft, or a lot, I’m not sure, but I had a little trouble at first with this because there weren’t 100% explicit instructions given. But anyway…

From the web site listed above you’ll have to download 5 files. One javascript file, one CSS file, and three image files. I put them into my Plugins folder even though it’s not really a Plugin, I suppose. I put it in /wp-content/plugins/lightbox.

Once you do that, add the following to your header:
<script src="/wp-content/plugins/lightbox/lightbox.js" type="text/javascript"></script>

and remember to change the path to the path to this file to be RELATIVE to the web page it will be used on - so even if you’re using a template file, go from the root:

/wp-content/plugins/lightbox/lightbox.js

Now, for the CSS. I had some trouble adding another include to the CSS file into my header, so I just added it to the CSS file for the theme I am using. This is NOT the best solution for later on when you want to switch themes, but I wanted it done.

Once that is done, you need to make a couple of changes to the CSS file and the js file to point to the graphics that are used.

In the beginning of the js file, make sure the paths to the close button and the loading image are correct. I had to change mine to:

var loadingImage = '/wp-content/plugins/lightbox/loading.gif';
var closeButton = '/wp-content/plugins/lightbox/close.gif';

In the CSS file, you deal with the png file that gives you the nice dimming of the background. You will edit the following two lines:

#overlay{ background-image: url(/wp-content/plugins/lightbox/overlay.png);

filter: progid:DXImageTransform.Microsoft.AlphaImage Loader(src="/wp-content/plugins/lightbox/overlay.png"

After these changes are done, you should be all set to use this lightbox code with ease.

Batch Image Uploader

One last Plugin is the Batch Image Uploader by mogrify. What this little jobby does is, hold your breath, let you upload multiple images at once. (Let out the breath) This is hugely convenient for those image heavy posts. I have alot of posts on other sites that I manage that have multiple images, and Lord knows I want those images up as fast I can so that I can get that shit done, uppercut!

Anyway, it’s an easy to use interface and saves alot of time.

Here’s one more image for your lightboxing pleasure:

me_seat.jpg

Enjoy and happy image heavy blogging!

Extending Firefox bliss

Posted on May 7th, 2007 in Tech Life | No Comments »

Cooliris Previews
https://addons.mozilla.org/en-US/firefox/addon/2207

Cooliris Previews gives you the power to browse and share Web links and rich media faster. Just mouse over any link, and the Cooliris preview window immediately appears to show you the content. To email it, just click.

• Simply mouse over the Cooliris link icon, and a preview window will instantly appear to show you the underlying content. No more clicking back and both, or leaving your current page.

• To email a link instantly, just right-click on any web page.

• Right-click on any phrase to have Cooliris automatically do a subsearch in Google, Wikipedia, or a dictionary.

• Customize how and when you want the preview window to appear.

I have seen no reduction in browsing speed so far.

Firefox Showcase
https://addons.mozilla.org/en-US/firefox/addon/1810

Easily find and manage your browser tabs.

Showcase provides a new way to manage your Firefox tabs and windows by showing them as thumbnails in a single window, tab or sidebar. Includes a find bar that will filter the thumbnails, and the capability to select the thumbnails in the same way you would select files in your system.

You can also do more advanced things like search through all thumbnails for specific text

Firebug
https://addons.mozilla.org/en-US/firefox/addon/1843

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Tab Mix Plus
https://addons.mozilla.org/en-US/firefox/addon/1122

Tab Mix Plus enhances Firefox’s tab browsing capabilities. It includes such features as duplicating tabs, controlling tab focus, tab clicking options, undo closed tabs and windows, plus much more.

Colorzilla
https://addons.mozilla.org/en-US/firefox/addon/271

Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.

MeasureIt
https://addons.mozilla.org/en-US/firefox/addon/539

Draw out a ruler to get the pixel width and height of any elements on a webpage.

The “latest” in digital camera technology

Posted on September 26th, 2006 in Tech Life | No Comments »

…and by “late”, I mean this guy is 10 years too late.

Check out the Seitz 6×17 Digital.

Upon first inspection, it seems like a pretty run-of-the-mill digital camera for taking panoramics. There are some nice sample shots, like the one below.

Then you start reading things like “Very high speed and resolution: 300 MB raw data per second! ” Hmm… why would I need 300 MB per second…?

You pause, scroll down further and then you see this:

Yes ladies and gentlemen, that IS a Mac Mini. THIS is your portable storage device. This is because, of course, “A 6×17 digital panorama (uncompressed) has about 950 MB. To process and store such large amounts of data we have created a state-of-the-art computer system. Data is transferred by gigabit ethernet from the sensor to the storage device. ”

And then the kicker…

Holy fuck, that is the camera TO SCALE. And they actually say “We designed this camera to meet the expectations of those photographers who like to take their equipment on exploratory adventures. ” What kind of exploratory adventures are you going to take this puppy on? Mountain climbing? A trip to the Grand Canyon? A day at the beach?

“Alright then, I’ll just put this in my pock… Oh shit.”

Good God man. You couldn’t even bring this bitch as carry-on.

“Uh yeah, so I’d like to rent TWO vehicles for the weekend.”
Sales associate “And whom shall I put the second car under?”
“Oh, me. I am renting both. The second is for my camera. God, I am SO glad I got this. And you can see how practical it is. I just throw it over my shoulder, fall backward, jar it beyond ever being functional, and I am on my way.”

Or, from Dr. Nick who pointed me to the story, “Imagine pulling it out at a party, ‘Hold on, let me get a shot of everyone. No no, you don’t have to scrunch together.”

And don’t worry, the site says that it is a “rewarding investment”. I’m glad they could determine that for me, as it wasn’t obvious from all of it’s ridiculously unecessary features and size. Good thing, with a price tag around $36,000.

I am pretty sure I have seen the creator of this camera before. He was at a CompUSA not too long ago and I am pretty sure I overhead him say, “Yeah, I’m going to go buy a new desktop this weekend. It’s called the WOPR. Oh yeah, I’m totally stoked”