The better approach would be to find out what’s the maximum allowable width for an image to fit nicely in your content area, and set/resize your images to that width. For example, on Inspiration Bit the safe width is 400px, so I try to set my images 400 px wide. There are cases though, when you don’t want or can’t end up with such a long image, then it’s best to set it to half or third of the maximum width and then align those images to the left or right of the content, letting the words to flow nicely and wrap around the image. Randa Clay has put together a very helpful tutorial on how to style images and how to align them with CSS. Finally, if you’re showcasing series of thumbnails, then set up multiples of them in rows of the same height, and equal widths.

Of course you can also let your imagination fly and come up with unusual ways to present your images. A BriefMessage, for examples, features a big image not only as a main element of each post, but the entire site as well. Displaying post’s metadata on top of the image seamlessly integrates the pictures with the overall design of the site. Jason Santa Maria aligned a huge image, 495 x 863 px to the left of the content on his recently re-designed site.

As part of my meticulous design series, I now present you with eight different ways to style images in your site.

1. CSS Drop Shadows

Ads Of The World is a site that’s all about visuals, so it’s not surprising that it pays attention to how the images are presented to viewers. All images here are wrapped in a frame with a drop shadow at the bottom. There is an extensive tutorial on A List Apart that teaches how to add flexible CSS drop shadows to your images. Ads Of The World has done it a bit differently: 3×3 px shadow.gif is tiled horisontally, and applied to the A tag, while the image itself is styled with borders, background colour and padding. Notice how the colours change when you mouseover the image.

.node-image .image a {
background:transparent url(images/shadow.gif) repeat-x;
}

.node-image .image img {
background:#E4EEF7;
border-color:#D9D9D9;
border-style:solid;
border-width:0pt 1px;
padding:12px;
}
.node-image .content a:hover img {
background:#FFE8CC;
}

2. Background image

SimpleBits approach is very simple yet effective and expandable: it’s using a tiled background image and padded picture. SimpleBits’ choice of the background image is hardly noticeable, looking more like a solid colour, however it doesn’t mean that you can’t experiment with more daring images to be used as a background.

div.photo img {
background:#E0E0D5 url(../img/bitstream/noise-earth.gif) repeat;
padding:1em;
width:49em;
}

3. background+border-top/bottom+padding

Nitram+nunca has come up with an interesting touch with its presentation of images: it’s displaying only the top and bottom borders in addition to the background colour and padding around the image. Different colours for the two borders make the pictures look embossed to the site.

.main .entry img {
background:#D9CFBD;
border-bottom:1px solid #FEFEFD;
border-top:1px solid #C9C5B3;
padding:5px 6px 6px;
}

4. Decorative Image Captions

DesignIntellection initiates a new way in using image captions with a semi-transparent layer at the top of the image. First of all, the DIV container with the class “post-image” is set with a position: relative, which allows an absolute positioning with the “title-date” span inside that DIV.

.post-image {
position: relative;
}

.post-image span.title-date {
background:transparent url(images/tnsp-black-65.png) repeat scroll 0pt 50%;
color:#FFFFFF;
font: 11px/16px Helvetica,Arial,sans-serif;
margin:5px 0pt 0pt;
padding:5px 10px 5px 74px;
position:absolute;
left:0pt;
top:0pt;
}

#main .post-image p img {
border:5px solid #E7E2DF;
}

5. Dashed borders

Image styling on Antiphrasis is not at all complicated, but combined with a few delicate details it looks very effective. The images itself are simply padded with a dashed border, but because the majority of pictures there are transparent PNGs, they look very impressive, especially when you mouseover them and the background “flashes” at you with a different colour and the light dashed border turns orange and solid.

.article-img {
border:1px dashed #9EA8A8;
padding:10px;
}

.article-img-link:hover img {
background-color:#506262;
border:1px solid #F07800;
}

Cameron Moll also uses a dashed border on his site, with no frills — just a padded image on a white background.

.picC {
background:#FFFFFF;
border:1px dashed #999999;
padding:4px;
}

6. Book-like image captions

Kyle is using various techniques to style different kinds of images on Warpspire: featured post image is prominently displayed in the site’s header; some images in the posts have no accompanying captions, while others appear with book-like captions.

.figure {
background:#F5F5F5;
border:1px solid #DDDDDD;
line-height:0pt;
margin:19px 0pt 1em;
padding:2px;
text-align:center;
}

.figure small {
background:#DDDDDD;
color:#666666;
display:block;
font-size:10px;
line-height:12px;
margin:2px 0pt 0pt;
padding:5px 7px;
text-align:left;
}

You can get inspired by more images with captions over at Elements Of Design.

7. Images with Fixed Backgrounds

If you can prepare and always resize your images with the same width, you could apply a fixed fancy background image underneath. CarnivaleDuVin, for example, is showcasing the images in an ornate frame.

.entry img.hdr {
background:transparent url(../images/hdr-img.jpg) no-repeat;
margin:-8px 0pt 0pt -12px;
padding:24px 25px;
}

The Ernest Hemingway Collection on the other hand is featuring pictures framed like photos with shadows.

Recently Nick La posted a comprehensive tutorial on how to style images with CSS and set them within some very impressive frames.

8. Digital Image Editing

You can also go with a completely different route and style your images not with CSS but in any digital editing image software that you can get your hands on.

Jacob Caas cleverly crops all main post images in a shape of a pencil, similar to the one in his logo. John Boardley beautifully decorates the images on iLoveTypography with white on black captions.

Looking at all those original ideas helped me to choose how I would be styling images on Inspiration Bit after the re-design. Have you seen some other interesting ways in formatting images on the Web?

Last month Ronald has completed the work on the plugin, calling it WP Vivtiger Image Resizer and publicly (with my permission, of course) releasing it on Wordpress.org. The plugin has been tested on all major browsers and used with Wordpress versions from v. 2.1 to the latest 2.3.

What is the Vivtiger Image Resizer?

The Image Resizer allows you to use the existing WordPress attachment system to upload, crop, and resize an image easily.
The plugin was designed to be simple and straight forward and is a bare-featured image-upload/crop/resize solution.

Who is Vivtiger Image Resizer For?

Vivtiger Image Resizer is for those who take a lot of screenshots and like to include them in posts. The plugin allows you to specify a maximum width and resize images based on the maximum width to fit the layout of your blog. There is also an option to link the cropped image to the bigger version in a new browser window.

Features

Vivtiger Image Resizer has the following features:

• Set the maximum width for images on your blog.
• Assign a crop ratio for resized images.
• Use the existing WordPress attachment system. There’s no need to learn a different system.
• Images are cropped and resized using AJAX.
• Large images can be inserted into a post with a single click.
• Large images can be launched in a new window.
• Numerous admin panel options.

Download

This page is the official home of the WP Vivtiger Image Resizer plugin. Please, download the plugin file vivtiger-image-resizer.1.0.2.0.zip

Installation

Installation is simple. Just follow these steps:

• Copy the “vivtiger-image-resizer” folder into your /wp_content/plugins/ directory.
• Activate the plugin in the Plugins administration panel.
• Customize the plugin in the Options section

Screenshots

WP Vivtiger Image Resizer plugin Options panel

The image is to be cropped with the Crop Ratio turned On.

The image is already cropped with the Crop Ratio turned On, with no link to the larger image.

The image is already cropped with the Crop Ratio turned On, with the link to the larger image.

The image is already cropped with the Crop Ratio turned Off, with the link to the larger image.

Demonstration

For a demonstration, please view the following videos, courtesy of Ronald Huereca:

• Cropping with Crop Ratio On
• Cropping with Crop Ratio Off

FAQ

How Does the Plugin Work?

The plugin works based on the maximum width set in the admin panel. If you upload an image larger than the maximum width, a crop overlay will show up on the attached image. You can then crop the image based on your preferences in the admin panel.

If the cropped image is greater than the maximum width, then an option will show up allowing you to insert a link to the larger image.

What Happens When I Crop an Image?

The image will be cropped according to the red-box selection. If the selection is larger than the maximum width you have selected, the image will then be resized to the maximum width.

What browsers does this plugin work for?

This plugin has been tested on Firefox 2.0, Opera 9, and IE 7.

Where can I find support for this plugin?

This plugin is AS IS. This was a custom plugin for Inspiration Bit, and I agreed to have it publicly released. It is highly unlikely any future updates to this plugin will be released.

Updated version of Vivtiger Image Resizer plugin

A new version of the plugin has just been released by Ronald. Now you can Download version 1.1.5.0. Thew latest version of this plugin allows you to override crop options per image upload. This is especially useful if you need to insert different image sizes to your article.

Here are two screenshots with the new features:

Crop Ratio – off, customized later

Crop Ratio – off, customized later, with a link

Many thanks to Ronald for adding these new helpful features to the plugin. Let me know, please, how the new version works for you.

UPDATE:

There is an updated version 1.21 of WP Vivtiger Image Resizer Plugin is available for download from Wordpress.org that fixes the most common problems users were having with the plugin. So be sure to update your plugin.

Also, the plugin’s author – Ronald Huereca – has kindly added the support to WP Vivtiger Image Resizer plugin to his site: RA Project Support . If you have any questions regarding the plugin, you can submit your requests at RA Project Support page. Please, consider a donation to Ronald for all his hard work and dedication to this plugin, when sending your requests.

From then on the more people visited my blog, the more spam was getting caught by Akismet. It was getting worse every day. Last week I was receiving 40-50 spams daily. I got tired of deleting all those spam comments from Akismet Spam.

Until finally, I’ve installed a new plugin to keep the spam under control – Wordpress Comment Spam Stopper plugin. The plugin adds a captcha to my Comments form, asking a simple question that only humans would know the answer to, not some alien spammers. Thanks to Ronald for recommending it. Since activating it yesterday Akismet has managed to catch only 1 spam comment – that’s a big difference, I think.

Are you keeping spammers under control on your blogs?

Thanks to Ronald from Reader Appreciation Project my wish came true and today a new invaluable Wordpress plugin has been released – WP Ajax Edit Comments

Those who were commenting on my blog this week must’ve noticed the ability to edit your comments here. Unknowingly you were all alpha and beta testers of this new plugin. Since I didn’t receive any complaints from my readers, looks like the testing of this plugin was successful. Now you are presented with a chance to install this indispensable new Wordpress plugin on your blog.

You can find download and installation instructions at RA Project, along with some screenshots. It is very easy to install and set up WP Ajax Edit Comments on your blog. So, give it a try and let me know what you think of it. I find it extremely handy and valuable.

• no configuration is needed – simply unzip the download file and copy to your plugins folder
• no template code tweaking is required
• no worries that with a release of a new Wordpress version this plugin becomes incompatible
• the latest stable version that would never need to be updated
• comes with some top-notch security features. No more worries about various security vulnerabilities like cross-site scripting and SQL injection.
• doesn’t take up much space on your server (less than 1 Kb) and doesn’t eat your server’s and database resources
• it is compatible not just with all future and past Wordpress versions, but also with all other blogging platforms that are available on the internet or would be created in future.

Drum Roll Please, let me introduce the best plugin ever – WP Do Nothing plugin. Hurry up over to RA Project for download and let me know what you think of it.

Until one day, Ronald from Devlounge, replied to my question about this problem and directed me to a Full Text Feed plugin on cavemonkey50.com. I’ve quickly installed this plugin and my posts are displayed as full feeds. Many thanks to the 18 year old author of this plugin – Ronald Heft.

I wonder why starting from Wordpress 2.1 it’s breaking an RSS feed at the More tag by default. This contradicts to the understanding of a Full feed. If I wanted to break my posts in RSS, I would’ve set up partial feeds. I think everyone knows now that it’s better to use full feeds in RSS, nobody likes to read partial RSS feeds.

There are different kind of security vulnerabilities, but the most common of them are XSS (Cross site scripting) and SQL injections. In both cases various flaws and weakness in a system are discovered allowing an attacker to inject a malicious code into a website or a database.

In most cases any form on a website that asks for user’s input and is not properly validating the input in the back-end presents a perfect gateway for a hacker to exploit the system. Make sure to check Some simple XSS Attacks by Example to see how some of these attacks can be performed. You will see that you don’t need to be a skilled programmer to hijack someone’s site or steal a cookie, etc. The existence of a Firefox extension called Web Developer Add-on, makes all form fields vulnerable. One of the examples there shows how you can add a simple JavaScript code to a text field that asks for an image source details. If not validated properly, the form accepts the JavaScript entry as valid and executes the code.

That’s what happened to a very well-known Democracy plugin for Wordpress that allows you to create polls. Well, there’s an option to add your own answer to the poll question, and that text field hasn’t been properly validated in the plugin’s code, allowing to insert SCRIPT tags with the following window.location='http://anewsite.com'
As a result, it hijacks the vulnerable website by redirecting every user to a different website. Aaron Brazell from Technosailor posted all details about the flaws in the plugin. Fortunately the plugin’s author has already fixed the code and released the secure version of the plugin. Subscribe to comments plugin also had similar vulnerabilities, thankfully the author has patched the code as well and released the new and secure version.

While I was writing this article, I saw a notice on my Dashboard about the new version of Wordpress 2.1.1 being dangerous and that everyone should upgrade to 2.1.2:

Long story short: If you downloaded WordPress 2.1.1 within the past 3-4 days, your files may include a security exploit that was added by a cracker, and you should upgrade all of your files to 2.1.2 immediately.

I’m glad I didn’t rush with upgrading my blog from WP 2.1.0. In my opinion it’s always a good idea to wait a bit before upgrading to a newer version.

Getting back to my post now. One of the ways to protect your form from XSS attacks is by converting all HTML meta characters (or angle brackets) < and > to the equivalent HTML entities, also stripping the <script> tag will help as well.

As I mentioned before, another common vulnerability is SQL injection. This one allows an attacker to perform unsolicited query to the database. Sometimes a query to delete an entire database or a table can be executed. Make sure to check an eye-opening SQL Injection Attacks by Example. There are various techniques that can be implemented in the back-end code to protect the database from an SQL injection. This topic is too broad to talk about in this one post, so I’ll write another post, where I’ll provide you with some very helpful and useful articles on this security topic for your Recommended Reading.

I really hope that this post has raised some suspicious flags in your head and made you to become more cautious with plugins before using them on your blog.

Promotional plugins

This list includes some of the user-oriented plugins that you should definitely consider installing on your blog. Usually people land on your blog from search engines, or links from other sites, thus they tend to read that particular post they landed on and leave. These plugins will promote your blog and encourage readers to explore your site beyond the landing page.

1. Related Posts – Displays a list of other related posts based on matching keywords within the article. Usually they appear at the end of your post and you can control the number of the generated related entries.
2. Top Posts By Category – Returns a list of Top most viewed or commented posts on your blog. You can customize it to display the posts by category or regardless, and control the number of the most popular posts.
3. WP-notable – Adds social bookmark links/icons (16 in total) to each blog post. The links include sites like digg, del.icio.us, newsvine, fark, furl, reddit, magnolia and much more.
4. Share This – This is another plugin that encourages visitors to post your blog posts t various social bookmarking sites. But it also allows your readers to share your article with others by email. Originally I had wp-notable installed on my blog, but switched to Share This because it adds less clutter to my post, plus includes two options. It’s a little bit more difficult to customize though, you might need to fiddle with the PHP code a bit and CSS to adjust the colours and some other options. Alex King does provide instructions for this plugin, so you can give it a try.
5. Digg This - Detects when your post has been dugg by digg users; automatically sends an email to you informing that your post has been dugg and displays a link back to the digg post for users to digg your story. You can also display a digg vote box next to that post displaying the number of diggs and the link to “digg it”.

Motivational plugins

These plugins help you with persuading your visitors to come back to your site, to comment and even benefit from being a loyal reader of your blog.

1. Subscribe To Comments – Very often people comment on someone’s blog but then lose track of that site and never check back to see if anyone has replied to their comments. This plugin allows readers to receive email notifications of new comments that are posted to a post where they left a comment.
2. Show Top Commentators – Who doesn’t want to get a link back to their site? Well this plugin displays readers with the most comments to your blog, with their names, linked to their website if there’s one. So you’ll encourage more feedback and discussions from readers and reward them for their active participation.

Administrative Plugins

1. Tiger Style Administration – If you’re not too impressed with the look of your Wordpress Administration area, then this plugin will allow you to “freshen it up”. There are several plugins that give you this option to change the Admin’s interface, this one is my favourite. Recently someone has come up with a Digg Styled Wordpress Dashboard plugin but wasn’t sure if it’s okay to release it.
2. WP-SlimStat – You definitely need to track your blog statistics. There are various statistics tools available, including Google Analytics. However I wanted to have an easy and quick way to access my blog stats while I blog. After trying several different statistics plugins, I’ve stopped with this one. It has a very nice interface and comes with lots of statistical perks (summary of hits and visits for today, yesterday, by week, by month, search strings, recent and most popular resources, domains and much more)

Monetizing Plugins

Since I haven’t monetized my blog I can’t give you any personal recommendations on this topic. I found Lorelle’s article on Monetizing Wordpress Plugins very exhaustive and helpful.

Plugin Resources

Wordpress Codex has a complete list of plugins and plugin resources, carefully categorized and easy to search through. I recommend you to check it out and see if there are any other plugins that are worth installing on your blog. You might want to install some gallery or forum related plugins, polls, widgets, translating plugins, etc. The list is endless, it all depends on your blog’s needs.
Another way to look for plugins is to simply type your keywords on Google. That’s how I find most of my information on the internet.

I’m sure my list of plugins is not an extensive one, but hopefully some of you will find it helpful. I’ll continue posting about other Wordpress plugins after trying them on my blog.
What are your favourite plugins and what do you use them for? I’m sure we can all learn from each other.

• Everyone can choose to install only the plugins they need, saving on time to generate a web page
• Extra functionality can be added to Wordpress without having to know programming.
• The numerous plugins will make it possible to keep Wordpress code from bloating, leaving only the necessary features available in the program’s core.

There are a few drawbacks when dealing with plugins though:

• Some plugins won’t work with the new releases of Wordpress, leaving users to question whether they should upgrade their Wordpress but lose the plugin or keep the plugin and the old Wordpress version.
• When installing a new plugin, you usually integrate it with the active theme. If the theme is changed, you will have to hook all your plugins with the new theme all over again.
• Not all plugins come with a solid support system. Some plugin writers are happy to share their code with the rest of the world, but have no time to provide an actual support, and troubleshoot the problems that you may encounter when getting these plugins to work properly.

Which Wordpress plugins are essential?

1. Akismet – there’s a good reason why Akismet plugin is one of the three plugins that come with every Wordpress installation. So make sure you activate this plugin and it’ll save you lots of time and frustrations when dealing with an inevitable spam on your blog. After two months of blogging, my blog suddenly started getting spam comments, almost on a daily basis: just one or two, but I’m sure glad I have my Akismet warrior catching them.
2. Optimal Title – this plugin is good for SEO. By default Wordpress displays your blogs name first in every page/post title tag, followed by the actual post title. Optimal Title plugin reverses the structure which makes it more SEO friendly, by giving more prominence to the keywords in your post’s title.
3. Feedburner Feed Replacement – Forwards all feed traffic to Feedburner. This allows you to customize your feeds with various feed presentation, analyze your subscribers statistics, and much more.
4. WP-ContactForm or Dagon Design Form Mailer – Every blog, just like every website, should have a Contact page. Of course, you can create one and display your contact details there, but it’s much better to have a contact form that your readers can use to contact you directly, and the form will protect your email address from getting spanned. At first I was using WP-Contact Form plugin for my contact page, but then I was told by Jonathan from Pixel Acres about another plugin which includes more security features in the contact form code – Dagon Design Form Mailer. I looked at the code and the features and I did like it better. It includes an Image Verification question which ensures that a person fills out your contact form, not a spam bot.
5. Google Sitemaps – This plugin will generate a Google compliant sitemap of your WordPress blog. Google sitemap will allow Google to know how often a web page has been updated and helps to get more pages crawled.

If you think that I missed on some essential plugins for Wordpress, please, let me know and I will update this list. Next I will talk about some optional plugins that would make your blogging life easier and more efficient, based on your blog’s needs.

1. What is a plugin?
2. What are the essential plugins that everyone should have on their blogs?
3. Are there any specific plugins that I might need for my particular blog?
4. Which plugins are nice to have but not necessary?
5. Where do I look for these plugins?
6. Will these plugins work for my version of Wordpress?
7. Who writes these plugins; can I trust their code?
8. Did plugin writers keep the security issues in mind when developing those plugins?

You may have other questions about plugins but make sure you always address the security questions before installing the plugin. It’s not that difficult to write a plugin if you are a programmer. However, every programmer has a certain style, a specific skill set and adheres to a particular set of rules when writing a code. Not every programmer follows a clean well-documented code, knows and focuses on security issues and vulnerabilities of a particular application, performs a sufficient testing of this plugin.

Even Wordpress programmers often miss on these things, that’s why they regularly release updated versions of the application on a monthly basis. The latest version 2.1.1 includes “about 30 bug fixes, mostly minor things around encoding, XML-RPC, the object cache, and HTML code”. Considering that the previous version 2.1 has been released just 30 days prior to the update, that’s 1 bug every day. Most plugin writers don’t update their code as frequently, but who knows how many bugs their code contains?

I will tackle these questions soon and dedicate a few posts on this topic. Meanwhile if you have any other questions about plugins, let me know and I’ll attend to them as well.