Hack Your BIG Folio Blog: Lightbox Your Article Images

A few people have asked how to get the Lightbox Effect on images embedded in a standard article. You can see an example of it here on my blog and in the diagram below.

If you're not comfortable writing a couple lines of HTML, this hack probably isn't for you. But, hey, if you mess up, just delete the post.

Step 1: Resize Your Image

To get this working, you need to create 2 versions of the image you want to display. I generally create a small version that is 400 pixels wide and a large version that is about 900 pixels wide. See the diagram below. I usually name my images something sillysmall.jpg and sillylarge.jpg.

Step 2: Upload Your Images

Because this is going in a normal article post, the images need to be hosted elsewhere. If you have a BIG Folio site, you can simply upload them to your image bank. If you have a different type of site, you can simply upload them (via FTP) to any web-accessible folder. Something like "images" or "blog" would be a good idea.

Now, make sure you can see the images by typing their URL directly in a browser. If you have a BIG Folio site and uploaded them to your image bank, the images will be at:

http://www.mywebsite.com/gallery/silly_small.jpg

If you have a different type of site, they will be located on the domain and in the folder you placed them. Probably something like http://www.mywebsite.com/blog/silly_small.jpg

A nice description

Step 3: Write Your Post

I like to write my blog posts in a text editor–then paste it into the blog admin when I'm ready. This gives me the chance to save it, proof-read it, and remove something stupid I've said before posting. If you're more of a "from the hip" kind of blogger, go ahead and type write into the blog admin.

Step 4: Place the Image in the Post

Here's the only tricky part. You need to put a line of HTML in your post (wherever you want the image displayed) that embeds your small image and links to the big one. Here's what it looks like:

<a href="http://mywebsite.com/gallery/silly_large.jpg" rel="lightbox">
<img src="http://mywebsite.com/gallery/silly_small.jpg" border="0" alt="description" />
</a>

That's it. You can just copy the above code, paste it into your post, change the ALT description, then make sure to change the URLs of the two images. The first URL (in the a tag) should point to the large version of your image. The second URL (in the img tag) should point to your small version. I added the ALT description because that's a handy way to add some SEO goodness to your blog posts.

That should do it. Submit that post and test it out.

Good luck.

Valentines Special for the Ladies

Happy Valentines Day from all of us at BIG Folio. Personally, I think Valentines is a made-up holiday for selling greeting cards and chocolates. But that doesn't mean we can't use it to give away some stuff.

Free Gifts to All Ladies Who Purchase a BIG Folio Site Today

Ladies, purchase any BIG Folio website today (Feb 14) and you'll receive three awesome gifts:

1. Our new BIG Folio t-shirt. We've got a new t-shirt design this year and you'll be one of the first to own it.

2. $100 Gift Card to Victoria Secret or Your Favorite Department Store. We'll mail you a $100 gift card to Victoria Secret. If pink lingerie isn't your thing, we'll send you a gift card to a great department store.

3. A copy of our Rank Higher DVD. Boost your search engine rankings with our awesome how-to DVD.

That's over $200 in free stuff. Because we care. Because you're a lady.

Blog Updates

We'll be deploying some BIG Folio Blog updates today.

Commenting and Spam Updates

The biggest update will be to the commenting and spam-fighting features of the blog. We dropped the Akismet plugin (we never could get it working right) and have implemented reCaptcha for comments. Not only will reCaptcha stop comment spam, but the service actually helps digitize books. Win-win (well, win-win-lose if you count spam).

Other Fixes

There are other, less noticeable, fixes as well. A couple themes were updated to display images better.

Thanks to all our blog users and keep the feedback coming.

Short Street is here

after hours and hours of design and development the Short Street design is ready to be revealed. check it out here: Short St. and then sign up here: BIG Folio designs

Forward in time