Yes, drop-up is a bit of an oxymoron. Technically you pull something up and drop something down, but since we talk about drop-downs so much, and the effect of what I’m about to show you happens with the same amount of “gravity”, and I’m not an language pedant (all of the time)… it’s okay.

I was asked how one might create a menu to go in the footer and I thought, hey why not show my blog a bit of love? So, what I’m going to do here is make a drop-up menu listing archives, categories and recent posts, using built in WordPress template tags and Thesis menu classes.

This has been tested in Safari and Firefox on Mac and IE6, IE7 and IE8 on Windows. There may be some z-index issues for sub-sub-menus in IE7 and IE8, sub-sub-menus don’t really work at all in IE6 because they’re not wrapped with tables, and position of the drop-up was not perfect in IE6. I wasn’t able to solve these issues. In many cases these bugs might not be visible at all (e.g., if you don’t have any sub-sub-menus), or acceptable sacrifices if you don’t care much about IE6, which I don’t.

The lovely thing about menus in Thesis 1.6 is that all the hard work of CSS dropdowns are done for you, and since the navigation has a class of “menu” (rather than an ID of “tabs”), it’s perfectly okay to reuse this class elsewhere.

The menu code

This code needs to go in custom_functions.php (which is now conveniently accessible via the built in ‘Custom File Editor’).

function custom_footer_nav() {
?>
<ul id="footer_nav" class="menu">
	<li><a href="">Archives<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="submenu">
			<?php wp_get_archives(); ?>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="">Categories<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="submenu">
			<?php wp_list_categories('title_li='); ?>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="">Recent Posts<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="submenu">
			<?php wp_get_archives('type=postbypost&limit=5'); ?>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
</ul>
<?php
}
add_action('thesis_hook_after_footer','custom_footer_nav');

What the code does

The code is wrapped in a PHP function so that we may insert it below the footer using the thesis_hook_after_footer hook.
The HTML that builds the menu is an unordered list, with each list item containing another unordered list. Each sub-list is populated with list items from the template tags wp_get_archives and wp_list_categories, which retrieve links to archives (monthly, daily, post by post, whatever you specify) and categories and present them as list items.

It’s essential that the first unordered list have class="menu" so that it inherits all the built-in dropdown function of the Thesis navigation menu.

Before and after each sub-list is

<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->

and

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

Those are there to tell Internet Explorer not to finish the parent link before the sub-list (because IE6 only allows the :hover selector on links) and for IE6 to wrap the sub-list in a table (for positioning).

A bit of javascript for positioning

The above code will give a functional dropdown menu, but we were after a drop-up menu. To achieve that we need to position the submenus above the parent links by the same number of pixels as their height. This is not currently possible in CSS for dynamic elements (with automatically created height). You could give them a fixed height, but I’m going to use a bit of jQuery to detect the height and then position the submenu.

This should also go in custom_functions.php

if ( !is_admin() ) {
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
	wp_enqueue_script('jquery');
}

function add_to_head() {
?>
<script type="text/javascript">
	$(function() {
		$("#footer_nav ul.submenu").each(function() {
			var listHeight = $(this).height();
			$(this).css("top", "-" + listHeight + "px");
		});
		$("#footer_nav > li").click(function() {
			return false;
		});
	});
</script>
<?php
}
add_action('wp_head','add_to_head');

What the javascript does

The first bit with deregister, register and enqueue script adds a Google hosted jQuery library to the pages on your blog (but not the admin pages in the dashboard).

The function add_to_head() adds some jQuery to the head of your site. It finds the submenu in our footer navigation (#footer_nav ul.submenu) and detects its height in pixels ($(this).height()) then applies CSS of top:-height; so that the submenu is positioned by its full height above the menu.

$("#footer_nav > li").click(function() {
	return false;
});

That just makes sure that nothing happens when you click on the top-level links of the footer menu because in this example they don’t go anywhere. You can remove this if you intended to link the top links to real pages.

A bit of CSS to wrap up

This goes in custom.css. All it does is rearrange some of the borders and margins that makes the dropdown navigation lists line up properly, so our drop-up lists line up better. If you have navigation borders set to 0 in the Design Options, you probably don’t need this CSS at all.

.custom #footer_nav {border-bottom:0; border-top:1px solid #ddd;}
	.custom #footer_nav li {margin-bottom:0; margin-top:-0.1em;}
		.custom #footer_nav li ul {border-bottom:0; margin-top:0;}
			.custom #footer_nav ul.children {margin-top:0.1em;}

If you need further info on the syntax of PHP, XHTML or CSS to understand the info above, please check out Tizag tutorials and W3 Schools.

Megapixels don’t mean much

Leo Laporte and folks were talking about the Droid on This Week in Google and This Week in Tech over the last few days and someone mentioned they weren’t especially impressed with the camera. Despite the 5 megapixels it’s not much (or any) better than the iPhone camera.

It just goes to show that there’s only so much quality you can get out of those tiny little (plastic?) lenses and small sensors, and the megapixel battle is mostly a load of crap. If you want to make good images, worry less about megapixels and more about using your brain: grapple composition, making the most of the equipment you have and seeing interesting things where others see the mundane. Of course, you might be concerned about megapixels if you’re printing enormous photos, but most people don’t.

iPhone photos are mad fun

I think much of the iPhone photo fun is the apps you can edit them with. Sure, you can just bring them into your regular photo editing application and edit them there (and I have cropped some in Aperture), but I the apps with all kinds of tap-of-the-screen filters and effects are half (or more!) of the fun.

Some of my favourites are

• Paid apps
  • QuadCamera
  • Photogene
  • Best Camera
• Free apps (first ones are by GhostBirdSoftware)
  • PhotoCurvesFree
  • PhotoCleaner
  • PhotoSharpFree
  • Photo Lab Daily

I much prefer looking at my iPhone photos at small sizes (due to the quality/megapixel issue — especially low light photos) and even though they’re sometimes intriguing and make me want to view them larger, it’s usually just better if they stay small. Maybe that means I have a lot to learn in iPhone photography, but that’s okay; learning is fun too.

If you’ve got your phone (doesn’t have to be iPhone) photos on the interwebs and think they’re interesting, point me at ‘em!

Incase you missed it on Twitter and haven’t looked at my nav menu recently, last week I released a couple of free Thesis skins.

Skins are basically a set of custom files to style and (sometimes) add more function to your already installed Thesis blog. The ones I’ve made have quite an attention to detail in the styles and add widgetised Multimedia Box and footer to your blog, and more.

Check the skin pages Mini and Cappuccino for more details, screenshots and demos.

I received a request to make Thesography display EXIF upon hover over an image instead of just displaying as more text in the post. While I won’t include that kind of function in the plugin at this time (because I’m not sure how best to do it while maintaining a good amount of flexibility), I can show you how to implement it to suit your posting style.

EXIF via the title attribute

A very simple (though arguably non-semantic) way of doing this could be to display a tooltip via the title attribute.

EXIF displayed in a tooltip by Thesography

When you insert your image into your WordPress post you can insert the Thesography shortcode into the title attribute via the HTML view.

<img src="http://www.example.com/wp-content/uploads/2009/10/lily.jpg" alt="lily" title="[exif id="18" show="all"]" width="800" height="529" class="aligncenter size-full wp-image-18" />

For this to work you must not have any HTML in the Thesography HTML display options. You should change the HTML options from the default to something like the following screenshot.

Thesography HTML options for tooltip display

Fancy EXIF display with javascript

The first step to making a javascript EXIF display is to use CSS to style the EXIF block the way you want it.

Default Thesography style: list with a class of "exif"

The CSS makes it look cool

EXIF displayed by Thesography with custom CSS

Using the following CSS (in your theme’s CSS file or custom.css when using the Thesis theme), along with a black 85% opacity background image, you can get a slightly transparent black sidebar over the left of your page.

You don’t have to use this particular CSS; it’s an example of the sort of thing you can do without having to recode your EXIF HTML. The javascript will apply to a range of different styles.

N.B. IE6 does not support position:fixed;, the list will appear below the image (where it was before) instead of overlayed on the page.

ul.exif {
	position:fixed;
	left:-2em;
	top:0;
	z-index:100;
	height:100%;
	width:16em;
	padding:10em 2em 2em;
	background:url(images/black-85.png) repeat;
	color:#fff;
	list-style-position:inside;
}

The javascript makes it act cool

To start, we need to add display:none; to the CSS so that ul.exif is hidden when the page loads.

The following PHP code can go in functions.php in the main directory of your theme, or in custom_functions.php if you’re using Thesis. If your theme doesn’t have a functions.php you can make one by creating a new file with that name (in a plain text editor, not MS Word or a rich text editor); add <?php at the start and paste this code after that.

if ( !is_admin() ) {
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
	wp_enqueue_script('jquery');
}

function exif_popout() {
	if (is_single()) {
?>
<script type="text/javascript">
	$(function() {

		var hovered = 0;

		var maybeFadeOut = function() {
			if (hovered == 0) {
				$("ul.exif").fadeOut();
			}
		};

		var hoverOn = function() {
			$(this).parent().next("ul.exif").fadeIn();
			hovered++;
		};
		var hoverOff = function() {
			hovered--;
			setTimeout(maybeFadeOut, 0);
		};

		$(".post img").hover(hoverOn, hoverOff);
		$("ul.exif").hover(hoverOn, hoverOff);
	});
</script>
<?php
	}
}
add_action('wp_head','exif_popout');

The first chunk of code is from Digging into WordPress and it loads the latest (at time of writing) jQuery library, hosted by Google. Using externally hosted libraries can be good because you have easy access to the latest files and because they can load asynchronously (i.e., while something from your server is loading, this can load too because it’s on another server, things from your server only load one at a time).

The second chunk of code inserts javascript into the head of our HTML WordPress page.

exif_popout() step by step

If you need more info about basic PHP syntax try the Tizag PHP tutorial. On Tizag.com you can also find HTML and CSS tutorials.

The function exif_popout() is designed to load only on single post pages (if (is_single()) determines that). It is also designed to be useful when there are multiple images on the page, each with their own EXIF that comes right after the image in the post.

$(function() { ... }); instructs jQuery to run our function when the webpage has completed loading.

var hovered = 0; is a variable that acts as a counter getting increased or decreased as we move our mouse over and off the image or the EXIF block. It helps determine how the movement of the mouse indicates whether the EXIF should be visible or not.

maybeFadeOut is a function that when called says, if hovered is equal to zero all EXIF blocks should be hidden (with a fade out effect).

hoverOn is a function that when called takes the element it acts upon ($(this), in this case it’s the image), then it finds that element’s parent element (using parent(), which in WordPress posts will be a paragraph, because images on their own line get wrapped in a paragraph). It then finds the ul.class that is next to that paragraph (next("ul.exif")) and displays it with a fade in effect. The hovered counter is also increased.

hoverOff is a function that when called decreases the hovered counter and activates the maybeFadeOut function. maybeFadeOut is wrapped with setTimeout, which adds a delay (of zero milliseconds) to the execution of maybeFadeOut and moves it to the end of the current action queue; allowing the rest of the javascript to execute before it. This allows us to move our mouse off the image and onto the EXIF block, or off the block onto the image, without the EXIF fading out and back in again (i.e., the fade out is delayed until we really want it to disappear — when we’re not hovering on the image or the EXIF).

$(".post img").hover(hoverOn, hoverOff);
$("ul.exif").hover(hoverOn, hoverOff);
Those two lines activate hoverOn and hoverOff when you hover your mouse on and off .post img and ul.exif.

.post is a class assigned to the element containing your image. If your theme uses a different class for your posts you need to change that in the javascript. Also, ul.exif is an unordered list with a class of “exif”, which is the default display for Thesography. If you have changed the way that Thesography displays, you will need to change ul.exif to whatever element your EXIF is presented with.

What if I’m using auto-insertion in Thesis

If you’re using Thesography auto-insertion with Thesis and you have some text in between the image and the EXIF the javascript won’t work as written because ul.exif won’t be the next thing after the image paragraph, there will be another paragraph (or more) in between. However, if you’re using auto-insertion it means you’ve only got one lot of EXIF on the page and you can change $(this).parent().next("ul.exif").fadeIn(); to $("ul.exif").fadeIn();.

What if this doesn’t work with my post layout?

There are so many different ways that your images and EXIF could be laid out in a post; it’s impossible for me to predict them all.

If you want to wrap your image and EXIF in a div together, that might simplify things for you and you could look into using the siblings selector instead of parent().next("ul.exif"), or perhaps parent().children("ul.exif").

Alternatively, while writing your post you could wrap each image and its related EXIF in paragraphs or divs with a unique class for each pair, and then use the class attribute as a variable to identify which EXIF should be displayed.

For more info on how to identify and navigate elements with jQuery, check the jQuery documentation; particularly Selectors and Traversing.

If you have trouble making the javascript fit your posting style and ask for help, please be very specific with the way your posts are displayed. A link to a direct example or the source code of an example (perhaps copied into Pastebin) is preferable.