I’m happy to announce a new website for Toronto-based artist Flavio Trevisan. Flavio makes sculptures, mostly, based on maps. The site is a pretty straight-forward WordPress implementation. Check it out!

In the first case I did not find an acceptable solution, but in the second case I did. (I should mention that my network uses the sub-domain structure.)

Case 1: Non-WordPress directories in the root

In this case, WP is installed at the root: example.com/. I also have directories at that level — example.com/foo — that contain what might be described as stand-alone, non-WP micro-sites. In the non-network install, WP was being cool and not interfering with them.

Moving it into the network, the site becomes number x. Since blogs.dir/x/files is served as example.com/files, I had hoped I could simply move the directories over as blogs.dir/x/foo and have them served as example.com/foo, but no dice.

What you CAN do is put the directories in the network root. The upside is that they appear as intended for the domain in question. The downside is that they appear for ALL domains in the network. In my case that’s unacceptable.

I’m hoping that in the future a plugin appears to address this issue, but for now the verdict is that it’s not possible. If you or someone you know is working on a plug-in for this, I’d happily put some beer money towards the cause!

Case 2: WordPress installed in a sub-directory

In this case, I have a domain where WP is installed in a sub-directory — example.com/foo/ — and a lot is going on in the other sub-directories. I wanted to migrate the blog without messing up the other directories.

So I created a symbolic link in place of the /foo folder to serve up the network site. Since I’m on MediaTemple, I used the directions in the trusty KB article to create the link. I navigated to the html folder of example.com and did:

ln -s /home/####/domains/wordpress-domain.com/html foo

(### being my server number, wordpress-domain.com being the domain where my WP network is installed, and foo being the directory in question)

When I mapped the domain (using the Domain Mapping plugin), I did so as example.com/foo. And under site properties I added /foo to the path. Doing these things lets me pull up the homepage. Awesome!

But there were two problems: logging-in, and permalinks.

Logging-in

With this mapping, I couldn’t log-in to the site. The problem appears to be that there was a discrepancy between the directory WP thought it was trying to log-in to, /foo/, and the directory where it was actually located, the root.

There’s a plug-in for that! From the description: “By default the wordpress cookie exactly matches the URL of your installation, this plugin removes any subfolders from the cookie so that your whole domain has access to it.”

Be sure to only activate the plug-in for the site in question and not your root site.

Pretty Permalinks

I ran into trouble when I clicked a permalink, or otherwise left the start directory as the rewrite rules from the WP domain’s .htaccess weren’t being applied.

So I grabbed some mod_rewrite code from a test installation, and compared it to that from the root domain. I determined which lines were needed for the file uploads, and which for the permalinks. The problem is that the last line, essential for the permalinks, redirects all requests (the “.” matches any character) through wordpress — including those to the domains we’re trying not to touch!

The way I managed to do it was to put in exceptions for the files and folders I wanted left alone. I would have preferred not to do it this way as it means I have to include a line for each one, but for the scale of the site I was dealing with it was no big deal. If someone knows of a solution that doesn’t involve exclusions, please let me know!

Here’s the finished mod_rewrite:

1
2
3
4
5
6
7
8
9
10
11
12

RewriteEngine On
RewriteBase /foo/
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
 
# here's the format for excluding files in the root
RewriteCond %{REQUEST_URI} !^.somefile\.html
 
# and here's the format for excluding directories
RewriteCond %{REQUEST_URI} !^/somedirectory
 
RewriteRule . /foo/index.php [L]

And that’s it! I imported the site and now I’ve one less WP install to worry about. The site in question for this case, by-the-way, was halfempty.com/wp/.

Any questions or comments, please let me know. I hope this helps you in your own projects.

I’m really excited about the new Network feature in WordPress 3, which allows you to run many sites off the same install. I’m hoping this makes it easier to keep my friends’ sites up-to-date and malware free.

I installed WordPress at 0003.org and am running the second site kateschneider.net off of it. Here’s how:

1. Follow the standard WordPress installation instructions. Give some thought to where you want to put this, as you won’t want to change it later.

2. Follow the codex instructions to Create A Network. You have a choice between subfolders and subdomains; I went with subfolders. Subfolders turned out to be a problem for root-relative links in sites whose domains aren’t yet attached, so I re-started with subdomains.

3. Go ahead and add the second site using Super Admin -> Sites.

4. Next, follow Otto’s Domain Mapping plugin tutorial. I found you don’t need to use the “mu-plugins” folder, It turns out there is a good reason to use the mu-plugins folder and it stands not for “multiuser” but “Must Use”; but IMPORTANTLY, you DO need to use the trunk version rather than the standard version. It looks like they’ve updated the plug-in so now it’s cool.

5. Otto says that when it comes to mapping the domain, all hosts are different. MediaTemple users will want to follow the KB instructions for Pointing Multiple Domains to the Same Alternate Domain Folder. (In their example, “mt-example.com” would be the name of the domain where you’ve installed WordPress, and “alt-example.com” the second site.)

6. Finally, go back Super Admin -> Sites and Edit the second site. Under Site Info there’s a checkbox for “Update siteurl and home as well”; uncheck that. Then scroll down and update the Siteurl and Home fields with the proper domain name.

That’s it — one WordPress, two sites! I hope the instructions make sense; please let me know if they don’t.

Cheers!

In this version we’re going to include an h3 at the top of each slide and have jQuery pull those out to make the ul controls. The HTML is like so:

1
2
3
4
5
6
7
8
9
10

<div id="slides">
	<div class="slide">
		<h3>Slide 1</h3>
		<p>This is the content of slide one</p>
	</div>
	<div class="slide">
		<h3>Slide 2</h3>
		<p>This is the content of slide two</p>
	</div>
</div>

And the jQuery (the new action is in the first fifteen lines):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

$(document).ready(function() {
 
	// Insert the wrapper for the controls
	$('#slides').before('<ul id="slidecontrols"></ul>');
 
	//For each heading...
	$('#slides div.slide > h3').each(function(){
		// Copy it into the controls
		$(this).clone().appendTo("#slidecontrols");
		// and replace the heading markup with list markup, keeping the contained text
		$('#slidecontrols h3').replaceWith('<li><a href="#">' + $(this).text() + '</a></li>');
	});
 
	// Hide those H3s
	$('.slide > h3').hide();
 
	//Set the initial state: highlight the first button...
	$('#slidecontrols').find('li:eq(0)').addClass('selected');
 
	//and hide all slides except the first one
	$('#slides').find('> div:eq(0)').nextAll().hide();
 
	//actions that apply on click of any of the buttons
	$('#slidecontrols li').click( function(event) {
 
		//turn off the link so it doesn't try to jump down the page
		event.preventDefault();
 
		//un-highlight the buttons
		$('#slidecontrols li').removeClass();
 
		//hide all the slides
		$('#slides > div').hide();
 
		//highlight the current button
		$(this).addClass('selected');
 
		//get the index of the current button...
		var index = $('#slidecontrols li').index(this);
 
		//and use that index to show the corresponding slide
		$('#slides > div:eq('+index+')').show();
 
	});
 
});

Happy coding!

As I mentioned previously, I’ve been migrating the Half Empty archive into a WordPress implementation. I am happy to announce that all material from the paper magazines Half Empty #1 and Half Empty #2 is now online!

Half Empty #1, published in 2003, includes a roundtable discussion on Art In Retail with views from Jeremy Bailey and Sebastien Agneessens; a fashion story illustrated by Jon Burgerman; interviews with television producer Jen Podemski, typographer Pablo Medina and artists Kinya Hanada and Ilan Katin; plus lots of original art.

Half Empty #2, published in 2004, includes a roundtable discussion on Commissioning Street Art moderated by the Wooster Collective; an interview with Karl Ackerman; a look at First Fridays in Phoenix, AZ; artist statements by Inksurge and Jaime Leblanc; reviews of books Type & Typeography and Charles Wilkin’s Index-A; and much more.

In addition to the HTML posts, PDFs can be downloaded from the Half Empty #1 and Half Empty #2 pages.

I read the reviews comparing Brushes and Sketchbook Pro, and settled on the latter. I like it, and afterward I saw Jim Lee has been using it, which removed any doubt in my mind.

I’m working on an idea for a comic, but I don’t want to say too much about it yet. I hope it’ll make a good summer project — a comic all drawn on the iPad!

Here’s what you do:

1. Call jQuery in the head of your template. As of this writing I’m using 1.3;
2. Upload the Flickr API library to your server and call it something like “flickr_api.inc.php”. It is a very slightly modified version of Rasmus Lerdorf’s PHP5 Flickr_API;
3. Upload the jQuery slideshow to your server and call it something like “flickrslideshow.js”. An explination of the jQuery can be found in a previous post;
4. Create a new snippet called “flickr-slideshow”. The contents of that snippet is bellow;
5. And finally, call the snippet like so: [[flickr-slideshow? &photoset=`XXXXXXXXXXXXXXXXX`]], replacing, of course, the XXXs with the ID of the Flickr set.

The contents of the “flickr-slideshow” snippet:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

<?php
 
// Get the photoset from the snippet call
$photoset = isset($photoset) ? $photoset : '';
 
// Your path to to the Flickr API library 
include_once("pathto/flickr_api.inc.php");
 
// Your API key	
$secrets = array('api_key'=>'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX','api_secret'=>'XXXXXXXXXXXXXXXX');
 
// Create an instance of the Flickr class, using your credentials
$flickr = new Flickr($secrets);
 
// Load the set we're looking for into an array
$photos = $flickr->photosetsGetPhotos($photoset);
 
// Start a counter
$counter = 1;
 
// Get the total number of photos in the set
$photocount = count($photos['photos']);
 
// A wrapper div, used by the jQuery
echo '<div class="flickrslideshow">';
 
// Now to loop through the photos in the set...
foreach($photos['photos'] as $photo) {
 
// Get the path to the image
$url = $flickr->getPhotoURL($photo,'');
 
// Get the image info
$info = $flickr->photosGetInfo($photo['id']);
 
// Another div for the jQuery
echo '<div>';
 
// Output the image tag, with the title as the alt
echo '<span class="image"><img src="'.$url.'" alt="'.$info['title'].'" /></span>';
 
echo '<p class="caption">';
 
// If the photo has a title, output that...
if ($info['title'] != ""){ echo '<strong>'.$info['title'].'.</strong> '; }
 
// and ditto for the descrition.
if ($info['description'] != ""){ echo ' '.$info['description'].' '; }
 
echo '</p>';
 
// Output the count
echo '<p class="controls">Image '.$counter.' of '.$photocount.' | ';
 
// Set up some numbers to use for the prev/next controls
$counterprev = $counter - 1;
$counternext = $counter + 1;
 
// Output the "previous" control
if ($counterprev > 0) { echo '<a href="#'.$counterprev.'" class="prev">Prev</a>'; }
 
// Output a separator, if needed
if ($counterprev > 0 && $counternext <= $photocount) { echo ' / '; }
 
// Output the "next" control
if ($counternext <= $photocount) { echo ' <a href="#'.$counternext.'" class="next">Next</a>'; }
 
echo '</p></div>';
 
// Iterate the counter
$counter++;
 
}
 
// Include the jQuery slideshow code (change to match the path on your server, of course)
echo '<script type="text/javascript" src="/pathto/flickrslideshow.js"></script>';
 
echo '</div>';
 
?>

This could be improved in a myriad of ways. For instance, the presentation layer could be abstracted out into ModX chunks and the jQuery could be made to insert the markup which is essentially redundant in the no-script view.

If you notice any errors please post in the comments. As always, I hope that seeing this helps you in your own coding!

As an employee of the Art Gallery of Ontario, I am a member of OPSEU Local 535. I got involved this year as part of the communication committee, designing the Local’s newsletter and, recently, website. Check it out!

The Archive and Everyday Life Conference, held May 6–8, 2010 at McMaster University, examined how fields of archive intersect with everyday life. The conference program includes panel discussions, screenings, and visual art.

Midi Onodera’s year-long 2009 video project A Movie A Week was on view in the accompanying group exhibition held at Hamilton Artists Inc. from May 1–15. Her collection of 52 mini-movies “focus the lens on daily, un-monumental occurrences fit for the small screen.”

A long-time collaborator of Midi’s, I developed her site and online-presentation of A Movie A Week. For this exhibition, Ruby Pajares and I created a stand-alone version of the project (image above) that could be run off a lap-top.

Here’s a simple fade-in/out slideshow I wrote for a friend’s website. I knew there were already plug-ins out there for achieving this sort of thing, but I decided to write my own in order to become more familiar with some of the basic concepts.

See it in action. Here’s the HTML we’re outputting:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="slideshow">
 
	<div>
		<img src="1.jpg" alt="Image One" />
		<p class="controls"><a href="#2" class="next">Next</a></p>
	</div>
 
	<div>
		<img src="2.jpg" alt="Image Two" />
		<p class="controls"><a href="#1" class="prev">Prev</a> /
			<a href="#3" class="next">Next</a></p>
	</div>
 
	<div>
		<img src="3.jpg" alt="Image Three" />
		<p class="controls"><a href="#2" class="prev">Prev</a></p>
	</div>
 
</div>

And here’s the jQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

$(document).ready(function(){
 
	// Set the initial state: Hide all but the first slide
	$('.slideshow').find('> div:eq(0)').nextAll().css({'opacity':'0','display':'none'});
 
	// On click of a controller link...
	$('.controls > a').click(function(event) {
		event.preventDefault();
 
		// Get the div containing the clicked link...
		var currentslide = $(this).parents('div:first');
 
		// ... and get the index of that div
		var currentposition = $('.slideshow div').index(currentslide);
 
		// Use that index to get the slide we'll be fading to
		var nextposition = ($(this).attr('class')=='next') ? currentposition+1 : currentposition-1;
 
		// Fade the current slide out...
		$('.slideshow div:eq('+currentposition+')').animate({opacity: 0}, 250, function() {
 
			// ... and hide it.
			$('.slideshow div:eq('+currentposition+')').css('display','none');
 
			// Show the next slide...
			$('.slideshow div:eq('+nextposition+')').css('display','block');
 
			// ... and fade it in.
			$('.slideshow div:eq('+nextposition+')').animate({opacity: 100}, 1500);
		  }
		);
	});
 
});

As you can see, it’s pretty basic. There’s a number of improvements that could be made, such as having the jQuery insert the control links as they’re somewhat redundant for the non-JS user. Also, it’s a bit fussy about divs — you might want to have some inside your slides but, as written, that would confuse it. I’ll post again if I get around to addressing that.

As always, best wishes to you in your coding!