Read more about my professional career on LinkedIn.

Words are not enough to describe this plugin so just take a look at the WordPress Easy Archive plugin page!

For example
You write a post with several h2 headings. When I’ve written a long post with a lot of h2 headings I always added manually a short table of contents with anchor links to the headings at the top of the post. A long time consuming process and I’d rather do it automatically: with WordPress Easy Contents.

Example

This is the example of the table this plugin:

Screenshots

Installation

Download the zip file from the WordPress plugin directory.

• Upload the folder wp-easy-contents to the ‘/wp-content/plugins/’ directory
• Activate the plugin through the ‘Plugins’ menu in WordPress
• Navigate to Manage > Option > Easy Contents to configure plugin output.

Usage

It’s very simple. Add a <!- -contents- -> tag to your post in the html view port. Please remove all the spaces!

Upgrading

• Delete the old plugin folder ‘wp-easy-contents’.
• Upload the folder wp-easy-maps to the ‘/wp-content/plugins/’ directory
• Activate the plugin through the ‘Plugins’ menu in WordPress
• Navigate to Manage > Option > Easy Contents to configure plugin output.

Frequently Asked Questions

Is it possible to modify the style of the table of contents?
Yes of course, change the css file to your own preferences.

Where do I find a change log?
You can find the change log in the changelog on this page.

Where do I have to suggest some modifications?
Suggest modifications in the comments section on this page.

Known Bugs

Please notify me about the bugs in the comments.

Roadmap

In this list you can find some features which will be added in the feature.

• A button in the wysiwyg editor to easily add the table of contents to the post.
• Alignment of table per post/page (not by the amount of headings)
• Multiple levels in the table of contents

Change log

• 1.3 Released 27 Feb 2010
  • Minor bug fix for the urls in the table and elements
• 1.2 Released 22 Feb 2010
  • File structure fix for the wordpress plugin directory
• 1.1 Released 6 April 2009
  • Table of contents on posts and single pages visible
• 1.0 Released 5 April 2009

Cheers!

How it works

When the archive is loaded all the posts are loaded and screened for images and the first image will be stored and re sized by the settings you’ve entered. Images are not processed more than once so the server load is minimal. Scroll down to the Usage section for more info.

The images are processed by a great class from Colin Verot.

Screenshots

How the plugin looks like is very depening on your content and layout, that’s for sure. But the image below will give you an idea what the possibilities are.

On a page or post

You can find an live Easy Archive on the following websites:

• Crispijn Verkade
• Young Dutch Design

Do you also have WordPress Easy Archive on your website? Let me know and I’ll post your website on this page.

Settings

Modify the settings via the admin panel.

Image modification

You have four options to modify the images for the archive. Let’s take a look at the examples and remember: in all cases the image ratio will not be changed.

• Resize only
  The image will be re-sized to the maximum width
  
• Resize and fill the image
  Resize the image and and fill it up to the max width and height.
  
• Crop the image
  Crop the image from the center.
  

Do you have a suggestion for a image modification? Please let me know in the comments section at the bottom of this page.

Installation

Search for the plugin ‘WordPress Easy Archive’ via the ‘Add New’ tool on the WordPress admin panel. Click Install and the plugin will be installed on your server. After the plugin is installed you’ve only got to activate the plugin. You’ll see quick enough how it works. If it doesn’t work you can follow the step by step installation guide:

• Download the zip file from the WordPress plugin directory.
• Upload the folder wordpress-easy-archive to the ‘/wp-content/plugins/’ directory
• Activate the plugin through the ‘Plugins’ menu in WordPress
• Set the options to your preferences via the WordPress admin panel

Usage

It’s very simple. Add a <!–-archive–-> tag to your post in the html view port. This tag will be replaced and the archive is shown.

Upgrading

New version of WordPress Easy Archive will be released on the WordPress plugin Directory and you’ll see if there’s an update in on the plugin buttons in the admin panel. If you don’t get this message, just download the zip-file from the WordPress plugins directory and follow the manual installation guide. Instead of copying to your server for the first time you’ll have to delete all the files before you upload the folder wordpress-easy-archive.

Frequently Asked Questions

• How do I change the “no image” image?
  Make your own image and overwrite the default image in ‘wp-content/plugins/wordpress-easy-archive/images/no-image.jpg‘.
• How do I modify the style of the archive?
  Just modify the plugin settings to ajust the image size and how the image is cropped. If this is not enough for you, just modify the file wp_easy_archive.css
• The archive page is very slow
  It’s possible the archive has to be generated after you’ve set up the archive of you’ve changed some settings. This is only at the first page load. Try again by reloading the page.
• Some images are not the right size
  Clear the browser cache and relad the page. This will solve the problem

If you do have other questions about this plugin just ask them in the comments on the bottom of this page. I’ll try to answer them via a comment before I’ll place them in this section.

Known Bugs

There are no bugs at the moment. Please notify me of bugs via the comments on this page. I’ll try to fix them as soon as possible.

Roadmap

• Exclude categories
• Exclude posts

Changelog

• v1.2 – 2 may 2010
  • Updated the file structure
• v1.1 – 27 feb 2010
  • First official release of WordPress Easy Archive
• v1.0 – 22 feb 2010
  • Release of the first version

View example Download file

Download now!

The html

The css

.newsticker {
	height: 300px;
	width: 500px;
	display: block;
	overflow: hidden;
	position: relative;
	}

.images {
	height: 270px;
	width: 270px;
	}

img {
	border: none;
	}

.newsticker ul li {
	/*float: left; add the float: left when you prefer a horizontal news ticker*/
	display: block;
	width: 480px;
	padding: 10px;
	font: .8em Georgia, "Times New Roman", Times, serif;
	}

.tickertitle {
	display: block;
	font: bold .9em Georgia, "Times New Roman", Times, serif;
	}

.tickerimg {
	float:left;
	margin: 0px 15px 15px 0px;
	}

The javascript

window.addEvent('domready', function() {
	var news = new cvNewsTicker('tickerimages',{speed:500,delay:5000,direction:'horizontal'});
});

Changelog

• V1.0.1 – 7 dec 2009
  • Added a delay when the page is loaded
    
• V1.0 – 17 apr 2009
  • First release of the news ticker class

So I decided to write my own Eyedropper. Test it and install it on your own website! You can tweak some events so it has more functionality.

There is also a Zip file available with a working example. Just upload the files to your folder on your webspace and navigate to it!

Example Download Class Download Zip

File structure

The following structure is used in the example and the documentation.

• images
  • your_image.jpg
• js
  • cvMooDrop.js
  • mootools-1.2.js
• ajax_moodrop.php
• basic.css
• cvMooDrop.css
• index.php /*This file contains the html for the eyedropper*/
• moodrop.php

The html

The html is really simple. The path to the image is the relative path.

The css

#dropperid {
	float: left;
	padding: 0px;
	width: 551px; //the width of the image
	height: 157px; //the height of the image
	}

#prev {
	float: left;
	width: 80px;
	height: 80px;
	border: 1px #CCC solid;
	}

The basic javascript

window.addEvent('domready', function() {
	var test1 = new moodrop('dropperid',{
		url: 'ajax_moodrop.php',
		prev_id: 'prev'
	});
});

The more advanced javascript

window.addEvent('domready', function() {
	var test2 = new moodrop('dropperadvanced',{
		url: 'ajax_moodrop.php',
		prev_id: 'prev2',
	});

	var colors = [];

	var addColor = function(c){
		if(colors.contains(c)){
			alert('This color already exists!');
		}else{
			colors.push(c);
			$('colors_field').value = JSON.encode(colors);
			createColor(c);
		}
	}

	var createColor = function(c){
		var box = new Element('span',{	'id': this.hex,
							  			'class': 'box',
										'styles': {
											'background': c,
											'display': 'block',
											'float': 'left',
											'cursor': 'pointer'
											}
										}).inject($('scheme'));
	};

	$('add').addEvent('click',function(a){
		addColor(test2.hex);
	});
});

The php (ajax_moodrop.php)

The AJAX request has several variables in it to get the right pixel, the pixel the dropper is pointing at.

• image: the relative path to the image file
• n: the relative top position of the pixel
• w: the relative left position of the pixel

if(isset($_GET['image'])){
	/* select the left lower pixel from the dropperdiv and get the color index */
	$im = imagecreatefromjpeg($_GET['image']);
	$color_index = imagecolorat($im, $_GET['w'], $_GET['n']);

	/* get rid of the temporary image and display the human readable hex color */
	echo '#'.dechex($color_index);
}

The function imagecreatefrom* can be changed to several functions, depending on the image type you use. In this case I’ve used a very simple static solution but you can select the correct function by checking the mime type.

• imagecreatefromjpeg
• imagecreatefromgif
• imagecreatefrompng